Vue中系统定义的指令

Vue中系统定义的指令

1、文本渲染：

详情跳转至v-html、v-bind、v-text、{{}}双花括号

1. v-text：纯文本
2. v-html：html文本

2、条件渲染：（满足条件的节点即显示，否则隐藏）

1、 v-show
2、 v-if
3、v-else-if
4、v-else

v-if 和 v-show 详情请跳转至v-if 和 v-show

3、列表渲染：（通常是对数组进行遍历）

v-for：

<div v-for="n in 10">{{n}} - 需要重复渲染的内容</div>
<div v-for="(item, index) in arr">当前：{{ item }}，索引：{{ index }}</div>
<div v-for="(value, key, index) in stu">{{ key }} - {{ value }} - {{ index }}</div>

<div v-for="n of 10">{{n}} - 需要重复渲染的内容</div>
<div v-for="(item, index) of arr">当前：{{ item }}，索引：{{ index }}</div>
<div v-for="(value, key, index) of stu">{{ key }} - {{ value }} - {{ index }}/div>

注意：在进行列表渲染时，尽量为渲染的每一项绑定 key 属性。建议尽可能在使用 v-for 时提供 key attribute。

v-if 与 v-for 一起使用：

不推荐同时使用 v-if 和 v-for。
当在同一个节点中同时使用 v-if 与 v-for 时：
vue2.x：v-for 的优先级高于 v-if
vue3.x：v-if 的优先级高于 v-for

4、事件处理：

v-on：可简写为 @

1. 可使用 v-on 去接收一个需要调用的方法名称（事件处理程序函数名称）
2. 在内联 JavaScript 语句中调用方法，当在事件处理程序调用时需要显式传递参数时，通常使用这种方式

5、属性绑定：

v-bind：可简写为 :

6、表单处理：

v-model：双向绑定（你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。）

详情请跳转至v-model

7、插槽：

v-slot：

8、其他：

1. v-pre：跳过这个元素和它的子元素的编译过程，可以用来显示原始 Mustache 标签
2. v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
3. v-once：一次