Vue基本指令的使用 Vue基本指令的使用

v-cloak（插值表达式）
使用v-cloak能够解决插值表达式的闪烁问题
如：{{ msg }}
，在Vue实例中data中的msg值为‘123’
在网速很慢的情况下，标签的请求速度也会很慢，我们会看到在这个时候会渲染出{{ msg }}再渲染出123
而在标签里面添加v-cloak属性

{{ msg }}

再在css里面设置

[v-cloak]{
display:none;
}

可以解决这个问题
原理：
vue.js页面加载完成后，会自动去除v-cloak的css样式，也就是说对应的p标签变为可见了

v-text
v-text与使用双向数据绑定{{ msg }}的作用相似，但各有优缺点
如：

优点：默认v-text是没有闪烁问题的
缺点：v-text会覆盖原本元素内的innerHTML的值
如：

Hello,Vue！

msg中的值会覆盖掉标签对里面innerHTML的值
而v-cloak可以在标签对里面灵活添加内容
如：
hello{{ msg }}hello

[v-cloak]{
【Vue基本指令的使用】display:none;
}

结果的结果会显示hello123hello

v-html
把属性的值解析成html，也存在覆盖掉原本内容的情况
假如有

msg:'Hello,Vue！'

我们想只显示Hello,Vue！这个结果，就必须使用v-html
使用v-text或者是使用插值表达式{{ msg }}的话会输出Hello,Vue！这个结果，v-text把msg解析的值的全部内容都解析成了一个字符串

v-bind
v-bind: 是Vue中用于绑定属性的指令
假如有

这时候当鼠标移动到该按钮的时候，按钮上会显示mytitle这个字符串
但是有一种情况就是：
mytitle是我在data里面自定义的变量，mytitle：'hello'
想要输出的是hello，就需要加上v-bind: 指令

这时候，v-bind会把""里面的东西解析成js表达式，如：

也是可以的
注：v-bind: 还可以缩写成：

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]

假如我们想在标签中循环输出该数组，可以使用v-for指令，如：

索引值：{{ i }}，数组每一项的值：{{ item }}

二、对象数组的循环渲染
或者有数组

list:[
{id: 1, name, zhang},
{id: 2, name: wang},
{id: 3, name: chen},
{id: 4, name: wu},
]

还是输出他们的值，如：

{{ user.id }}----------{{ user.name }}

三、循环对象
在data中有

data：{
user：{
id：1，
name：tony，
gender：male
}
}

则可以这样循环输出

值：{{ val }}，键：{{ key }}，索引：{{ i }}

注：在Vue2.20的版本后，当在组件中使用v-for时，key属性是必须带上的
{{item }}

四、数字的迭代循环

{{ count }}

则输出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初始化性能消耗较高）