Vue内置指令功能特性概述

2018年11月30日 Vue.js 1,553 views 0

Vue内置13个指令，码笔记分享Vue指令的功能特性概述：

Vue内置指令特性概述

Vue内置指令包括：v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-pre、v-cloak、v-once；

1、v-text：更新元素的textContent；
例如：

<span v-text="msg"></span> 等同于 <span>{{msg}}</span>；

2、v-html：更新元素的innerHTML；
3、v-show：条件渲染指令，为DOM设置css的style属性
4、v-if：条件渲染指令，动态在DOM内添加或删除DOM元素
5、v-else：条件渲染指令，必须跟v-if成对使用
6、v-else-if：判断多层条件，必须跟v-if成对使用；
7、v-for：循环指令；
例如：
```
<li v-for="(item,index) in todos"></li>
```
8、v-on：用于监听DOM事件；
例如：v-on:click v-on:keyup
9、v-bind：响应并更新DOM特性；
例如：v-bind:href v-bind:class v-bind:title v-bind:bb
10、v-model：数据双向绑定；用于表单输入等；
例如：
```
<input v-model="message">
```
11、v-pre：不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；
例如：
```
<span v-pre>{{ this will not be compiled }}</span>；
```
12、v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译；
13、v-once：不需要表达式，只渲染元素或组件一次，随后的渲染，组件/元素以及下面的子元素都当成静态页面不在渲染。