有人可能感觉自定义指令好像是个新东西，还要学自定义，一听就高大上不想学。其实指令可以简单地理解为组件的一个小弟，专门帮助组件做一些事情的人。一句话来概括指令可以说成了：“现在组件在干 XXX 的时候，指令我就要做 OOO 的事了”。
注册指令
注册指令和注册组件是差不多的，有全局注册也有局部注册，只不过将 components 变成了directives。
全局注册
Vue.directive('focus', {
inserted: function (el) {
console.log('Hello, I am ' + el)
}
})
局部注册
directives: {
focus: {
inserted: function (el) {
console.log('Hello, I am ' + el)
}
}
}
生命钩子函数
- bind: 只调用一次，指令第一次绑定到元素时调用。
- inserted: 被绑定元素插入父节点时调用。
- update: 被绑定元素所在的模板更新时调用。
- componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
- unbind: 只调用一次，指令与元素解绑时调用。
钩子函数参数
一般每个钩子都会传入 4 个参数：el, binding, vnode, oldNode。通常我们只用前面两个参数就够了。
- el: 指令所绑定的元素，可以用来直接操作DOM
- binding: 一个对象：
- name: 指令名，不包括 v-前缀
- value: 指令绑定的新值， v-my-dir="1 + 1", value -> 2
- oldValue: 指令绑定的前一个值
- expression: 绑定值的字符串形式，如 v-my-dir="1 + 1", expression -> 1" + 1"
- arg: 传给指令的参数, v-my-dir:foo, arg -> foo
- vnode: Vue 编译生成的虚拟节点
实例
如果上面看得有点晕可以看下面的例子的输出就容易理解了。先对指令定义。
Vue.directive('test', {
bind(ebl, binding) {
el.innerHTML = `
name -> ${binding.name}
value -> ${binding.value}
expression -> ${binding.expression}
argument -> ${binding.arg}
modifiers -> ${JSON.stringify(binding.modifiers)}
`
}
})
let app = new Vue({
el: '#root',
data() {
return {
msg: 'Hello World'
}
},
})
接下下使用这个指令。
<pre v-test:nice.a.b.c="msg">Hello World</pre>
结果如下。
结果
图解
图解
