v-text
v-text类似元素的innerText属性，它跟{{}}一样，用于数据绑定：
<div id="app">
<!-- 绑定data中msg数据，将其渲染在页面上-->
<h3 v-text="msg"></h3>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"hello v-text"
}
})
</script>
跟{{}}一样，可以使用JavaScript逻辑运算，变量拼接等
<h3 v-text="msg + '111'"></h3>
<h3 v-text="msg > 1 ? '大于' : '小于'"></h3>
<h3 v-text="msg + msg"></h3>
添加了v-text，标签中的内容会被覆盖，页面上展示的是绑定的数据
<p v-text="msg">我会被覆盖</p>
v-html
v-html和v-text功能大同小异，唯一的区别就是对于标签的解析方面
<div id="app">
<h3 style="color: red">v-text：</h3>
<span v-text="msg"></span>
<h3 style="color: red">v-html：</h3>
<span v-html="msg"></span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"<h1>v-text和v-html的区别</h1>"
}
})
</script>
页面展示结果：
text-html.png
v-once
执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。
<div id = "com">
<h1> {{c}} </h1>
<h4 v-once> {{c}} </h4>
<input type="text" v-model="c">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
var a = new Vue({
el: '#com',
data:{
c:'Hello vue'
}
});
</script>
使用了v-once只执行一次插值：
v-once.gif
v-pre
跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
<div id="app">
<h3 style="color: red">不使用v-pre：</h3>
<span>{{msg}}</span>
<h3 style="color: red">使用v-pre：</h3>
<span v-pre>{{msg}}</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"HELLO VUE!"
}
})
</script>
展示：
v-pre.png
v-cloak
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。造成闪烁的效果
css：
[v-cloak]{
display: none;
}
<div id="app">
<h3 style="color: red">闪烁展示源码</h3>
<span>{{msg}}</span>
<h3 style="color: red">使用cloak：</h3>
<span v-cloak>{{msg}}</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"HELLO VUE!"
}
})
</script>
展示效果
v-cloak2.gif
v-model
使用v-model可以实现标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
文本框
如下div中加入<p>{{ test}}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。
<div id="app">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:"好好学习"
}
})
</script>
效果：
v-model1.gif
复选框
选中或取消，值为true或false
<div id="app">
<input type="checkbox" v-model="msg" />学习
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:""
}
})
</script>
效果：
v-model2.gif
绑定的数据为空数组时，选中填null
<div id="app">
<input type="checkbox" v-model="msg" />学习
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:[]
}
})
</script>
效果：
v-model3.gif
因为复选框中，并没有vlaue值，加上vlaue，选中则填充到数组中
<div id="app">
<input type="checkbox" v-model="msg" value="学习"/>学习
<input type="checkbox" v-model="msg" value="游戏"/>游戏
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:[]
}
})
</script>
效果:
v-model4.gif
单选框
当单选框的vlaue值跟绑定的数据相同的，那么默认就是选上的状态：
<div id="app">
<label for="man">
<input type="radio" v-model="sex" id="man" value="1">男
</label>
<label for="wom">
<input type="radio" v-model="sex" id="man" value="1">女
</label>
<p>性别：{{sex}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
sex:'1'
}
})
</script>
效果：
v-model4.png
当value值和绑定数据值不一致的时候，才不是选上的状态
<div id="app">
<label for="man">
<input type="radio" v-model="sex" id="man" value="男">男
</label>
<label for="wom">
<input type="radio" v-model="sex" id="man" value="女">女
</label>
<p>性别：{{sex}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
sex:''
}
})
</script>
效果：
v-model5.gif
下拉框
<div id="app">
<select v-model="selected">
<option value="星期天">星期天</option>
<option value="我还在">我还在</option>
<option value="学习">学习</option>
</select>
<p>选中：{{selected}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
selected:''
}
})
</script>
效果：
v-model6.gif
表单输入绑定修饰符
lazy延迟修饰符
<div id="app">
<input type="text" v-model.lazy="msg">
<p>输入：{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
效果：
v-model.lazy.gif
number数字修饰符
这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
<div id="app">
<input type="text" v-model.number="msg">
<p>输入：{{typeof(msg)}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
效果：
v-model.number.gif
过滤空白修饰符
<div id="app">
<input type="text" v-model.trim="msg">
<input type="text" v-model="msg2">
<p>输入：{{msg}}</p>
<p>输入：{{msg2}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:'',
msg2:''
}
})
</script>
效果
trim.png
