重学VUE——vue 常用指令有哪些？
一、什么是指令？
在 vue 中，指令以 v- 开头，是一种特殊的自定义行间属性。指令属性的预期值是一个表达式，指令的职责就是：表达式的值改变时，相应地将某些行为应用到DOM上。只有v-for是一个类外，后边跟的不是表达式。
一个指令能够接收一个参数，在指令名称之后以冒号表示。例如：
<a v-bind:href="url">vue官网</a>
添加指令后，url 会被当作变量来解析。
二、常用指令
2.1、v-model 双向绑定数据
v-model 指令可以用在 input、textarea、select元素上创建双向数据绑定。他会根据控件类型自动选取正确的方法来更新元素。
使用语法：<input type="text" v-model="msg"/>
<!-- 修改input中的值，标签p元素内容随之改变 --><input v-model="content"/><p>{{ content }}</p>
data () {
return {
content: '我是双向数据绑定，可以有默认值',
}
}
2.2、v-for 列表渲染
作用：借助 v-for 把一个数据渲染成一个列表。
使用语法：<li v-for="item in list"></li>
其中 list 是源数据数组，item是被迭代的数组元素的别名。
<!-- 使用实例 --><ul>
<li v-for="item in list" :key="item.id">{{item.girl}}</li>
</ul>
data(){
return{
list:[
{ id:'1' , girl:'花花'},
{ id:'2' , girl:'草草'}
]
}
})
2.3、v-bind 动态绑定属性
作用：用来动态绑定属性，属性值有变动的时候及时对页面数据或样式等保持最新状态。
使用语法：
<div v-bind:attribute = " 变量 "></div>
<!-- 更改 url 图片地址，网页内图片也会实时更新 --><img v-bind:src="url" alt="">
data () {
return {
url:'http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg'
}
}
2.4、v-on 绑定事件
作用：给元素绑定事件监听，触发事件后，执行 methods 里面对应函数。可以缩写为@。
使用语法：
<div v-on:click="fun"></div>
//或
<div @click="fun"></div><!-- 点击按钮，调试器会打印出vue -->
<button @click="print">点击,打印vue</button>
methods:{
print(){
console.log('vue')
}
}
注意：上述 v-on 使用的时候没有传参，所以方法后的小括号可以省略。
v-on 传参时，必须添加括号，使用如下。
<!-- 点击按钮，调试器会打印出vue --><button v-for="item in list" @click="print(item)">点击{{item}}</button>
data () {
return {
list:[ 'one', 'two', 'three' ]
}
},
methods:{
print(item){
console.log('点击',item)
}
}
这是一个遍历的按钮组，点击的时候，打印当前元素内容。
2.5、v-if / v-else-if / v-else
作用：根据逻辑判断，控制元素的显示和隐藏。
使用语法：<div v-if=" boolean|表达式 " ></div>
注意：v-if / v-else-if / v-else 使用语法都是相同的，但是v-else-if 和 v-else 必须与v-if连用，不能单独使用。
<!-- 修改show的值，元素内容也会改变 --><div >
<span v-if="show">真</span>
<span v-else>假</span>
</div>
data () {
return {
show:true,
}
}
2.6、v-show / v-hide
作用：控制元素的显示和隐藏。
使用语法：
<div v-show=" boolean|表达式 " ></div> //表达式为真的时候显示<div v-hide=" boolean|表达式 " ></div> //表达式为真的时候隐藏
<div >
<span v-show="show">真</span>
<span v-hide="show">假</span>
</div>
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 适合用于频繁切换的场景。
以上是 重学VUE——vue 常用指令有哪些？ 的全部内容， 来源链接： utcz.com/z/375698.html
