「这是我参与2022首次更文挑战的第19天,活动详情查看:[2022首次更文挑战]
语法:
全局自定义指令:
Vue.directive('指令名',{
inserted:function(el,...) {
//对el的一些操作(这个自定义指令被触发做什么事情)
}
})
//局部自定义指令
directives:{
//自定义指令名
focus:{
//自定义钩子函数
inserted:function(el) {
el.focus()
}
}
}
自定义指令的钩子函数
(1)bind:指令第一次绑定要元素时调用,这个自定义指令只能用一次(日抛型)
(2)unbind:指令与元素解绑时,只使用一次
(3)inserted:被绑定的元素,插入到父节点的dom上的时候调用
(4)update:组件更新时调用
(5)componentUpdated:组件和子组件更新时调用。 注意点:
(1)el指的是绑定这个指令的DOM元素,el的参数是js对象
(2)除了el,其他的都是可读的
(3)除了update和componentUpdated之外,其他的钩子函数都有el,binding,vnode这三个参数
(4)binding里有很多属性:name,value,oldValue,expression、arg、modifiers
(5)oldVnode只在update和componentUpdated这两个钩子函数中生效(Vnode是虚拟节点的意思)