1. 适用
需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令
2. 钩子函数参数
除了 el 之外,其它参数都应该是只读的,切勿进行修改
<div v-if="show" v-my-directive:arguments.modification="1+1" class="focus">
- 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"。 ==注意 字符串的foo是固定值,不是变量==
- modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。 ==注意 表示有foo、bar修饰符值为true==
3. 动态指令参数
v-mydirective:[argument]="value"
argument可以是动态变化的,并且在钩子里面实时更新的
4.钩子区别
update 和 componentUpdated
- 共同点:组件更新都会调用,update在componentUpdated之前
-
不同点:
- update 组件更新前的状态
- componentUpdated 组件更新后的状态
场景:点击事件,div的内容追加 !;
update(el, binding,vnode,oldVnode){
console.log(el.innerHTML); // <div>!</div>
}
componentUpdated(el, binding,vnode,oldVnode){
console.log(el.innerHTML); // //<div>!!</div>
}
// 注意: 区别是div里面的!数量
bind 和 inserted
- 共同点: dom插入都会调用,bind在inserted之前
-
不同点:
- bind 时父节点为 null
- inserted 时父节点存在。
- bind是在dom树绘制前调用,inserted在dom树绘制后调用
bind: function (el) {
console.log(el.parentNode) // null
console.log('bind')
},
inserted: function (el) {
console.log(el.parentNode) // <div class="directive-box">...</div>
console.log('inserted')
}
注意:
1.自定义指令的钩子里面没有vue实例,this指向undefined;
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。