重学VUE——vue 常用指令有哪些?（vue常用的指令）
一、什么是指令？
在 vue 中，指令以 v- 开头，是一种特殊的自定义行间属性。指令属性的预期值是一个表达式，指令的职责就是：表达式的值改变时，相应地将某些行为应用到DOM上。只有v-for是一个类外，后边跟的不是表达式。
一个指令能够接收一个参数，在指令名称之后以冒号表示。例如：
vue官网添加指令后，url 会被当作变量来解析。
二、常用指令
2.1、v-model 双向绑定数据
v-model 指令可以用在 input、textarea、select元素上创建双向数据绑定。他会根据控件类型自动选取正确的方法来更新元素。
使用语法：
{{ content }}
data () {
return {
content: '我是双向数据绑定，可以有默认值',
}
}2.2、v-for 列表渲染
作用：借助 v-for 把一个数据渲染成一个列表。
使用语法：
其中 list 是源数据数组，item是被迭代的数组元素的别名。
- {{item.girl}}
data(){
return{
list:[
{ id:'1' , girl:'花花'},
{ id:'2' , girl:'草草'}
]
}
})2.3、v-bind 动态绑定属性
作用：用来动态绑定属性，属性值有变动的时候及时对页面数据或样式等保持最新状态。
使用语法：
![]()
data () {
return {
url:'http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg'
}
}2.4、v-on 绑定事件
作用：给元素绑定事件监听，触发事件后，执行 methods 里面对应函数。可以缩写为@。
使用语法：
或
methods:{
print(){
console.log('vue')
}
}注意：上述 v-on 使用的时候没有传参，所以方法后的小括号可以省略。
v-on 传参时，必须添加括号，使用如下。
data () {
return {
list:[ 'one', 'two', 'three' ]
}
},
methods:{
print(item){
console.log('点击',item)
}
}这是一个遍历的按钮组，点击的时候，打印当前元素内容。
2.5、v-if / v-else-if / v-else
作用：根据逻辑判断，控制元素的显示和隐藏。
使用语法：
注意：v-if / v-else-if / v-else 使用语法都是相同的，但是v-else-if 和 v-else 必须与v-if连用，不能单独使用。
真
假
data () {
return {
show:true,
}
}2.6、v-show / v-hide
作用：控制元素的显示和隐藏。
使用语法：
//表达式为真的时候显示
//表达式为真的时候隐藏
真
假
data () {
return {
show:true,
}
}2.7、v-html 解析html标签
2.8、v-once 进入页面时 只渲染一次 不再进行渲染
2.9、v-cloak 防止闪烁
2.10、v-pre 把标签内部的元素原位输出
2.11、v-text 解析文本
三、v-if 与 v-show 的区别
相同点：都是控制元素的隐藏显示的。
区别：
- v-if 是条件渲染，满足条件时，节点元素都会被渲染出来，包括事件绑定等，如果不满足条件，节点就不会被渲染出来，包括事件等。但 v-show 是借助 display:none 隐藏节点的显示，它的内容还有事件等始终都存在。
- v-if 来回切换时，浏览器需要不停地渲染，损耗性能，所以成本很高。但是 v-show 只是隐藏显示，所以成本较低。
- v-show 在页面初始化的时候，需要全部渲染，相对 v-if 成本要高。
- 根据 v-if 的特性，适合用于加快初始化的渲染速度。而 v-show 适合用于频繁切换的场景。