重学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 适合用于频繁切换的场景。