十七、内置指令

（一）v-bind

• 单向绑定解析表达式
• 可简写为：:xxx

（二）v-model

• 双向数据绑定

（三）v-for

• 遍历数组/对象/字符串

（四）v-on

• 绑定事件监听
• 可简写为：@xxx

（五）v-if

• 条件渲染
• 动态控制节点是否存在

（六）v-else

• 条件渲染
• 动态控制节点是否存在

（七）v-show

• 条件渲染
• 动态控制节点是否展示

（八）v-text

1.作用

• 向其所在的节点中渲染文本内容

2.与插值语法的区别

• v-text 会替换掉节点中的内容
• {{xxx}}则不会

（九）v-html

1.作用

• 向指定节点中渲染包含 html 结构的内容

2.与插值语法的区别

• v-html 会替换掉节点中所有的内容，{{xxx}}则不会
• v-html 可以识别 html 结构

v-html 有安全性问题

• 在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击
• 一定要在可信的内容上使用 v-html，永远不要用在用户提交的内容上

（十）v-cloak（没有值）

• 本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性
• 使用 css 的属性选择器 [v-cloak]
  • 可以解决网速慢时页面展示出 {{xxx}} 的问题

（十一）v-once

• v-once 所在节点在初次动态渲染后，就视为静态内容了
• 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能

（十二）v-pre

• 跳过其所在节点的编译过程
• 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译速度