指令就是在inserted上操作dom元素
全局注册
// 注册在整个大Vue上
Vue.directive('focous', {
// 当被绑定的元素插入到DOM中时
inserted: function(el) {
el.focus() // 聚焦元素
}
})
局部注册
directives: {
founs: {
inserted: function(el) {
el.focus()
}
}
}
钩子函数及其参数
- bind: 只能调用一次，指令第一次绑定到元素时调用，可以进行初始化配置
- inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update: 所在组件的 VNode 更新时调用
- componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用
- unbind: 只调用一次，指令与元素解绑时调用。
每个钩子函数都有下面的参数 bind(el, binding, vnode, oldVnode)
参数
- el: 指令所绑定的元素，可以用来直接操作 DOM。
- binding: 一个对象，包含以下属性
- name: 指令名
- value: 指令绑定的值 v-my-directive="1 + 1" 中的 2
- oldValue: 指令绑定的前一个值，传给指令的值 仅在
update和componentUpdated钩子中可用 - expression: 字符串形式的指令表达式 ‘1+1’
- arg: 传递给指令的参数 v-my-directive:foo => foo
- modifiers: 一个包含装饰符的对象。v-my-directive.foo.bar => { foo: true, bar: true }
- vnode: Vue编译生成的虚拟节点
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用
渲染函数中的自定义指令
// 自定义指令是个数组，每个对象都是一个自定义指令
directives: [
{
name: 'my-custom-directive',
value: '2', // 传递给指令的值
expression: '1 + 1', // 传递给指令的表达式
arg: 'foo', // 传递给指令的变量
modifiers: { // 传递给指令的修饰符
bar: true
}
}
]
- 在渲染函数中可以写一个方法把 一个指令变成directives 数组对象的形式 _vm'
loading=${loading}'
