共计 943 个字符，预计需要花费 3 分钟才能阅读完成。
除了默认设置的外围指令 (v-model 和 v-show)，Vue 也容许注册自定义指令。在 Vue 里，代码复用的次要模式和形象是组件。然而，有的状况下，依然须要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。本文将具体介绍 Vue 自定义指令
指令注册
以一个 input 元素主动取得焦点为例，当页面加载时，应用 autofocus 能够让元素将取得焦点。然而 autofocus 在挪动版 Safari 上不工作。当初注册一个使元素主动获取焦点的指令站长交易
指令注册相似于组件注册，包含全局指令和部分指令两种
【全局指令】
应用 Vue.diretive() 来全局注册指令
【部分指令】
也能够注册部分指令，组件或 Vue 构造函数中承受一个 directives 的选项
而后能够在模板中任何元素上应用新的 v-focus 属性
钩子函数
指令定义函数提供了几个钩子函数（可选）
【bind】
只调用一次，指令第一次绑定到元素时调用，用这个钩子函数能够定义一个在绑定时执行一次的初始化动作
【inserted】
被绑定元素插入父节点时调用（父节点存在即可调用，不用存在于 document 中）
【update】
所在组件的 VNode 更新时调用，然而可能产生在其孩子的 VNode 更新之前。指令的值可能产生了扭转也可能没有。然而能够通过比拟更新前后的值来疏忽不必要的模板更新
【componentUpdated】
所在组件的 VNode 及其孩子的 VNode 全副更新时调用
【unbind】
只调用一次，指令与元素解绑时调用
钩子函数参数
钩子函数被赋予了以下参数
【el】
指令所绑定的元素，能够用来间接操作 DOM
【binding】
一个对象，蕴含以下属性：
【vnode】
Vue 编译生成的虚构节点
【oldVnode】
上一个虚构节点，仅在 update 和 componentUpdated 钩子中可用
[留神] 除了 el 之外，其它参数都是只读的，尽量不要批改他们。如果须要在钩子之间共享数据，倡议通过元素的 dataset 来进行
上面是一个应用了这些参数的自定义钩子样例
【函数简写】
大多数状况下，可能想在 bind 和 update 钩子上做反复动作，并且不想关怀其它的钩子函数。能够这样写：
【对象字面量】
如果指令须要多个值，能够传入一个 JS 对象字面量。指令函数可能承受所有非法类型的 JS 表达式