vue自定义全局指令
2019-10-14 本文已影响0人
crayona
Vue.directive('指令名'，{
钩子函数1（）{}，
钩子函数2（）{}
})
-------------------------
钩子函数
bind第一次绑定时调用
inserted被绑定的元素插入父节点时
update vnode更新时调用 虚拟节点更新时调用
componentUpdated 指令所在的组件的vnode更新或者其子vnode全部更新时调用
Unbind解绑时调用
-----------------------------
钩子函数的参数
1.el指令所绑定的元素 指DOM
2.binding对象
name
value
oldValue
expression表达式
arg参数
modifiers 包含修饰符的对象
3.vnode编译生成的虚拟节点
4.oldvnode
------------------------------------------------------
例子 自动聚焦输出框
<tempate><div><input value="" v-focus="true"></div></template>
Vue.diective('focus',
inserted(el,binding){
if(binding.name=="focus"&&binding.value){
el.focus()
}
})
