自定义指令

发布时间 2023-10-09 22:36:35作者: 嘎嘎鸭2

自定义指令:自己定义的指令,可以封装一些 dom 操作,扩展额外功能

 

语法:

(无论是全局方式定义指令 还是 局部方式定义指令,最终 只要把指令定义完成,页面当中用起来  只需要 eg : <input   v-指令名   type = "text" > 。只要一绑上,在当前输入框被插入到页面当中的时候,就会自动执行 inserted 钩子)

1. 全局注册:

Vue.directive ( ' 指令名 ' ,  { // 指令的配置项,在配置项当中需要写跟指令相关的钩子

      " inserted " ( el )  {   

             // inserted 就是指令的生命周期钩子,表示当前指令所绑定的元素被添加到页面当中的时候  会自动调用。形参 el 就可以拿到指令所绑定的元素

            // 可以对 el 标签,扩展额外功能

            el.focus ()

      }

})

 

2. 局部注册:

directives : {

      " 指令名 " : {

            inserted () {

                  el.focus ()

            }

      }

}