v-cloak（插值表达式）
使用v-cloak能够解决插值表达式的闪烁问题
如：<p>{{ msg }}</p>，在Vue实例中data中的msg值为‘123’
在网速很慢的情况下，<script>标签的请求速度也会很慢，我们会看到在这个时候会渲染出{{ msg }}再渲染出123
而在<p>标签里面添加v-cloak属性
<p v-cloak>{{ msg }}</p>
再在css里面设置
[v-cloak]{
display:none;
}
可以解决这个问题
原理：
vue.js页面加载完成后，会自动去除v-cloak的css样式，也就是说对应的p标签变为可见了
v-text
v-text与使用双向数据绑定{{ msg }}的作用相似，但各有优缺点
如：
<p v-text="msg"></p>
优点：默认v-text是没有闪烁问题的
缺点：v-text会覆盖原本元素内的innerHTML的值
如：
<p v-text="msg">Hello,Vue！</p>
msg中的值会覆盖掉<p>标签对里面innerHTML的值
而v-cloak可以在<p>标签对里面灵活添加内容
如：
<p v-cloak>hello{{ msg }}hello</p>
[v-cloak]{
display:none;
}
结果<p>的结果会显示hello123hello
v-html
把属性的值解析成html，也存在覆盖掉原本内容的情况
假如有
msg:'<h1>Hello,Vue！</h1>'
我们想只显示Hello,Vue！这个结果，就必须使用v-html
使用v-text或者是使用插值表达式{{ msg }}的话会输出<h1>Hello,Vue！</h1>这个结果，v-text把msg解析的值的全部内容都解析成了一个字符串
v-bind
v-bind: 是Vue中用于绑定属性的指令
假如有
<input type="button" value="按钮" title="mytitle" />
这时候当鼠标移动到该按钮的时候，按钮上会显示mytitle这个字符串
但是有一种情况就是：
mytitle是我在data里面自定义的变量，mytitle：'hello'
想要输出的是hello，就需要加上v-bind: 指令
<input type="button" value="按钮" v-bind: title="mytitle" />
这时候，v-bind会把""里面的东西解析成js表达式，如：
<input type="button" value="按钮" v-bind: title="mytitle + ‘123’" />
也是可以的
注：v-bind: 还可以缩写成：
<input type="button" value="按钮" : title="mytitle" />
v-on
Vue中提供了v-on: 事件绑定机制(v-on是用来绑定事件的)
一般情况下，我们定义一个事件，需要在元素内为它设置一个id号，然后通过document.getElementById("xxx").onclick = function(){}
但是这就违背了Vue设计的初衷，Vue就是为了减少DOM操作而设计出来的，Vue不提倡我们操作DOM
这时候我们可以v-on:事件名="方法名"
这个方法名需要在Vue里面的methods属性下定义
methods{
方法名: function(){
alert("hello");
}
}
v-on也有缩写，缩写为@，如：@: 事件名="方法名"
v-model
v-model实现表单元素（View层）和Vue实例中的data（Model层）的双向数据绑定
也就是说View层数据发生改变，Model层的数据也会发生改变；Model层数据发生改变，View层的数据也会发生改变；
注：v-model只能用在表单元素中
v-model和v-bind的主要区别在于：
v-bind只能实现Model层到View层的数据绑定，
而v-model可以实现双向数据绑定
v-for
v-for在Vue中的主要作用是循环
一、普通数组的循环渲染
在data是声明一个数组
list: [1,2,3,4,5,6]
假如我们想在<p>标签中循环输出该数组，可以使用v-for指令，如：
<p v-for="(item,i) in list">索引值：{{ i }}，数组每一项的值：{{ item }}</p>
二、对象数组的循环渲染
或者有数组
list:[
{id: 1, name, zhang},
{id: 2, name: wang},
{id: 3, name: chen},
{id: 4, name: wu},
]
还是输出他们的值，如：
<p v-for="user in list">{{ user.id }}----------{{ user.name }}</p>
三、循环对象
在data中有
data：{
user：{
id：1，
name：tony，
gender：male
}
}
则可以这样循环输出
<p v-for="(val, key, i) in user">值：{{ val }}，键：{{ key }}，索引：{{ i }}</p>
注：在Vue2.20的版本后，当在组件中使用v-for时，key属性是必须带上的
<p v-for="item in user" v-bind: key="item.id">{{ item }}</p>
四、数字的迭代循环
<p v-for="count in 10">{{ count }}</p>
则输出1-10，count从1开始
v-if
在Vue中用于元素的显示和隐藏
v-if特点：
每次都会创建或删除元素
v-if有较高的切换性能消耗
如果元素涉及到频繁的切换，最好不要用v-if
如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if
v-show
在Vue中也是用于元素的显示和隐藏
v-show特点：
每次都不会创建或删除元素，只是切换了元素的display：none样式
v-show有较高的较高的初始化消耗（不管标志位初始化为true还是false，该元素都存在，而v-if初始化为false的时候，不会创建元素，故v-show初始化性能消耗较高）
网友评论