自定义指令

155 阅读1分钟

「这是我参与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是虚拟节点的意思)