内置指令 v-*

已经提到过的内置指令：

• v-bind：单向绑定解析表达式，可简写为 : ；

• v-model：双向数据绑定；

• v-for：遍历数组 / 对象 / 字符串；

• v-on：绑定事件监听，可简写为 @ ；

• v-if：条件渲染（动态控制节点是否存存在）

  v-else：条件渲染（动态控制节点是否存存在）

• v-show：条件渲染（动态控制节点是否展示）

v-text ：向其所在的节点中渲染文本内容；

（与插值语法的区别： v-text 会替换掉节点中的内容， 插值语法则不会）

v-html ：与 v-text 相似，但是 v-html 可以支持结构的解析渲染（文本内容可以包含 HTML 标签）；

（⚠️：安全性问题： 在网站上任意渲染 HTML 内容非常危险，容易导致 XSS 攻击；一定要在可信的内容上使用 v-html ，永远不要使用在用户可提交的内容中）

v-cloak ： 一个特殊的没有值的属性，Vue 实例创建完毕并且接管容器后会删掉 v-cloak 属性；所以可以使用 CSS 配合 v-cloak 解决网速慢网页延迟显示未经渲染的 Vue 内容问题。

v-once ：一个特殊的没有值的属性，在 v-once 所在的节点在初次渲染之后就视为静态内容。（只会被渲染一次）之后数据的改变不会引起 v-once 属性所在的结构更新，可用于优化性能。（区别开事件中的 once 特性）

v-pre ：一个特殊的没有值的属性，可以让 Vue 跳过 v-pre 属性所在节点的编译过程。可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快容器中内容的编译。

自定义指令

使用 new Vue({directives: {...}}) 配置自定义指令，

⚠️：原理不靠返回的值。

函数式

语法： new Vue({directives: { 指令名(){ … } }})

对象

语法： new Vue({directives: {指令名:{配置对象...}}}) ；

常用的三个回调函数：

• bind ：指令与元素成功绑定时调用；
• inserted ：指令所在元素被插入页面时调用；
• update ：指令所在模版结构被重新解析时调用；

其他问题注意：

• 指令定义时不加 v- ，使用时需要加 v-

• 指令名称使用多个名字时要用 - 分隔开来（kebab-cab 命名），在 directives 中定义该指令时要使用字符串的形式 word-word(){} ；

• 指令中回调函数的 this 问题：不论是函数式还是对象式， this 都会指向 window 对象。

• 全局指令使用 Vue.directive('xxx', function(element, binding){}) 或者 Vue.directive(‘xxx’, { xxx }) 配置。