全局自定义指令

203 阅读1分钟

全局自定义指令

Vue除了提供了默认内置的指令外,还允许开发人员根据实际情况自定义指令,它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。

     全局自定义指令
     Vue.directive(指令名,{// 生命周期})
     局部自定义指令
        自定义一个指令实现:打开页面你就聚焦
        生命周期
        基本使用:
        定义:
          directives:{
            不能直接使用this
            指令名(xxx):{
                 生命周期
                  bind(dom,obj,vnode){                    
                    // 当前指令绑定于dom时执行
                   dom:就是当前指令所在标签dom
                   obj:指令的属性(obj.arg),修饰符(obj.modifiers),值(obj.value)
                   vnode.context===当前组件的this
                  }  
                   inserted(dom,obj,vnode){
                     // 当前指令所在dom添加到父结点时执行
                   } 
                   update(dom,obj){
                     // 当前指令所在组件更新时执行,而且不保证组件已更新完成
                   }
                   componentUpdated(dom,obj){
                     // 当前指令所在组件更新完成时执行
                   }
                   unbind(dom,obj){
                       // 当前指令和dom解除绑定时执行
                   }
            }
          }
          使用:v-xxx:属性名.修饰符="值"
     -->