1.v-cloak

作用：解决插值表达式闪烁的问题

当网速过慢时，或者加载数据时间过长时，网页会出现  {{msg}}  的现象

使用方法：

<!--缺陷需要写style样式-->

<style>

            [v-cloak] {

                display: none;

            }

        </style>

<h1 v-cloak>{{meg}}===============</h1>

2.v-text

作用：解决插值表达式闪烁的问题

使用方法：

<!--缺陷：会覆盖元素内部的内容-->

<h1 v-text="meg">==============</h1>

3.v-html

作用：解析html代码

使用方法：

<!--缺陷：会覆盖元素内部的内容-->

<h1 v-text="meg">==============</h1>

4.v-bind

作用：绑定属性，将html的属性转化为vue.js的属性

使用方法

<input type="button" value="按钮" v-bind:title="mytitle+'123456'" />

<!--简写方式-->

<input type="button" value="按钮" :title="mytitle+'123456'" />

5.v-on

作用：绑定事件，将html的事件转化为vue.js的事件

使用方法

<input type="button" value="按钮" v-on:click="show" />

<!--缩写形式-->

<input type="button" value="按钮" @click="show" />

6.v-model

作用：双向数据的绑定  v-m 和 m-v

使用方法：

<!--缺陷： 只能运用在表单元素中<input type="">-->

<input type="text" v-model="msg" />

以上指令用到的数据

<script>

            var vm = new Vue({ //vm就是 mvvm中的调度者vm

                el: '#app',

                data: {

                    meg: '123',

                    meg2: '<h1>我是一个大大的h1</h1>',

                    mytitle: '这是一个自定义的title'

                },

                methods: { //methods中定义了当前Vue的所有可用方法

                    show: function() {

                        alert('hello');

                    }

                }

            })

        </script>

6.根据以上指令完成一个走马灯

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/vue-2.4.0.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="button" value="浪起来" @click="lang" />

            <input type="button" value="低调" @click="stop"/>

            <h4>{{msg}}</h4>

        </div>

        <script>

            //在vm实例中 会监听自己data中的数据，只要数据发生改变，就会把最新的数据渲染到页面上去

            var vm = new Vue({

                el: '#app',

                data: {

                    msg: '猥琐发育别浪~~~~~~~',

                    intervalId:null

                },

                methods: {

                    lang() {

                        //在vm内部中想要获取  data的数据，或者methods中的方法 要使用this 代表这个vm对象

                        //console.log(this.msg);

                        //var _this = this;

                        //function() {} 的建造函数 ()=> 作用内部的this相当于外部的this

                        this.stop()

                        this.intervalId = setInterval(() => {

                            var start = this.msg.substring(0, 1)

                            var emd = this.msg.substring(1)

                            this.msg = emd + start

                        }, 400)

                    },

                    stop(){

                        clearInterval(this.intervalId)

                    }

                },

            })

        </script>

    </body>

</html>

vue.js_02_vue.js的基础指令的更多相关文章

  1. Vue的介绍及基础指令

    一.什么是Vue Vue.js是一个渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 为什么要学习Vue 三 ...

  2. vue学前班004（基础指令与使用技巧）

    我学vue 的最终目的是为了 做apicloud 和vue 的开发  作为配合apicloud的前端框架使用 所以项目用不到的会暂时不介绍. (强烈建议  官网案例走一遍) 基础指令的学习(结合aui ...

  3. vue.js_06_vue.js的自定义指令和自定义键盘修饰符

    1.全局的自定义指令 实现:当页面刷新时,光标聚焦到搜索框中 <label> 搜索: <input type="text" class="form-co ...

  4. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  5. Vue.js框架的基础指令

    Vue.js 渐进式 javascript 框架,可以独立完成前后端分离式web项目的javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,vue是js功能的集合体. 三大主流前端框 ...

  6. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  7. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  8. Vue.JS学习基础

      = 导航   顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件   顶部 vue.js介绍 vue.js实例 模板语法 计 ...

  9. 0807 创建vue实例以及vue的基础指令

    lession1 1.Vue的了解   渐进式框架   作者:尤雨溪     mvvm 2.创建vue实例 引入<script src="vue.js"><scr ...

随机推荐

  1. bzoj 1059: [ZJOI2007]矩阵游戏 [二分图][二分图最大匹配]

    Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N *N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行 ...

  2. 尚学linux课程---4、linux网络配置及linux文件

    尚学linux课程---4.linux网络配置及linux文件 一.总结 一句话总结: linux下的etc目录是配置文件的目录,所以很多的文件配置操作都可以看到它的身影:比如 init系列命名,比如 ...

  3. npm使用入门

    NPM使用入门 npm 就是node package manager node的包管理工具 我们通过npm install 模块 来安装模块,缩写:npm i 模块,注意,低版本的node可能需要np ...

  4. SpringBoot--Banner的定制和关闭

    SpringBoot项目启动的时候控制台会打印如下信息: 上面红色框框内的“SPRING BOOT”被称为Banner,意为横幅,默认会开启并在控制台打印,其实我们可以修改它的内容和样式,即定制:并选 ...

  5. Spring MVC(十四)--SpringMVC验证表单

    在Spring MVC中提供了验证器可以进行服务端校验,所有的验证都必须先注册校验器,不过校验器也是Spring MVC自动加载的,在使用Spring MVC校验器之前首先要下载相关的jar包,下面是 ...

  6. IO初步，字节输入流和字节输出流

    字节输出流 OutputStream(基类,抽象) 特点:写任意的文件 方法:写出数据的方法:write write(int b) 写出1个字节 -128~127之间,写的是一个ASCLL码的值 wr ...

  7. java读写属性配置文件

    package readproperties; import java.io.FileInputStream; import java.io.IOException; import java.io.I ...

  8. 干货：排名前 16 的 Java 工具类！

    在Java中,工具类定义了一组公共方法,这篇文章将介绍Java中使用最频繁及最通用的Java工具类.以下工具类.方法按使用流行度排名,参考数据来源于Github上随机选取的5万个开源项目源码. 一. ...

  9. ImportError: cannot import name webdriver解决方案

        在sublime写一个Python程序的时候,使用from selenium import webdriver,在run的时候却出现ImportError: cannot import nam ...

  10. java_缓冲流(字节输入流)

    /** * java.iko.BufferedInputStream extends InputStream * BufferedInputStream:字节缓冲输入流 * 构造方法: * Buffe ...