Vue.directive 是 Vue.js 提供的全局指令注册方法，用于自定义指令。我们可以通过它来扩展 Vue.js 的模板语法，使得我们能够创建自己的指令，以实现一些特殊的效果。
注意：
directives是用于注册自定义指令的 Vue 实例选项，而Vue.directive是全局方法，用于注册全局自定义指令或在组件中注册局部自定义指令。
基础语法
- 定义：
Vue.directive(name, options)
Vue.directive('my-directive', {
bind: function (el, binding, vnode) {
// 在元素绑定到指令时调用
},
inserted: function (el, binding, vnode) {
// 元素插入父节点时调用
},
update: function (el, binding, vnode, oldVnode) {
// 在元素所在组件更新时调用，也可以在初始绑定值发生变化时调用
// 可以通过比较新旧值来执行相应的操作
},
componentUpdated: function (el, binding, vnode, oldVnode) {
// 在元素所在组件及其子组件全部更新后调用
},
unbind: function (el, binding, vnode) {
// 在指令与元素解绑时调用
}
});
// 当只需要 update 函数时，可以传入一个函数替代定义对象
Vue.directive('my-directive', function (el, binding, vnode, oldVnode) {
// 这个函数用作 update()
});
- 使用：需带前缀
v-
<!-- 不带值与参数 -->
<div v-my-directive="someValue"></div>
<!-- 仅带值 binding.value -->
<div v-my-directive="someValue"></div>
<!-- 仅带参数 binding.arg -->
<div v-my-directive:[arg1, args2]></div>
<!-- 带值与参数 binding.arg + binding.value -->
<div v-my-directive:[arg1, args2]="someValue"></div>
钩子函数
| 钩子函数 | 描述 | 参数 |
|---|---|---|
| bind | 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 | el, binding |
| inserted | 被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。 | el, binding |
| update | 所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。 | el, binding, vnode, oldVnode |
| componentUpdated | 指令所在组件的VNode及其子VNode全部更新后调用。 | el, binding, vnode, oldVnode |
| unbind | 只调用一次，指令与元素解绑时调用。 | el, binding |
el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下 property：name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
