基本指令01

v-text

v-text类似元素的innerText属性，它跟{{}}一样，用于数据绑定：

跟{{}}一样，可以使用JavaScript逻辑运算，变量拼接等

添加了v-text，标签中的内容会被覆盖，页面上展示的是绑定的数据

我会被覆盖

v-html

v-html和v-text功能大同小异，唯一的区别就是对于标签的解析方面

    
v-text：
    
    
v-html：
    

页面展示结果：

text-html.png

v-once

执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。

    
 {{c}} 
    
 {{c}} 
    

使用了v-once只执行一次插值：

v-once.gif

v-pre

跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑

    
不使用v-pre：
    {{msg}}
    
使用v-pre：
    {{msg}}

展示：

v-pre.png

v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。造成闪烁的效果

css：

[v-cloak]{
    display: none;
}

 

    
闪烁展示源码
    {{msg}}
    
使用cloak：
    {{msg}}

展示效果

v-cloak2.gif

v-model

使用v-model可以实现标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

文本框

如下div中加入

{{ test}}

获取input数据，然后去修改input中数据会发现

中数据随之改变。

    
    
{{msg}}

效果：

v-model1.gif

复选框

选中或取消，值为true或false

    学习
    
{{msg}}

效果：

v-model2.gif

绑定的数据为空数组时，选中填null

    学习
    
{{msg}}

效果：

v-model3.gif

因为复选框中，并没有vlaue值，加上vlaue，选中则填充到数组中

    学习
    游戏
    
{{msg}}

效果:

v-model4.gif

单选框

当单选框的vlaue值跟绑定的数据相同的，那么默认就是选上的状态：

    
        男
    
    
        女
    
    
性别：{{sex}}

效果：

v-model4.png

当value值和绑定数据值不一致的时候，才不是选上的状态

    
        男
    
    
        女
    
    
性别：{{sex}}

效果：

v-model5.gif

下拉框

    
    星期天
    我还在
    学习
    
    
选中：{{selected}}

效果：

v-model6.gif

表单输入绑定修饰符

lazy延迟修饰符

    
    
输入：{{msg}}
    

效果：

v-model.lazy.gif

number数字修饰符

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

    
    
输入：{{typeof(msg)}}

效果：

v-model.number.gif

过滤空白修饰符

    
            
            
输入：{{msg}}
            
输入：{{msg2}}

效果

trim.png