Vue07/Vue自定义指令 局部注册 全局注册 自定义指令值传值_自定义指令传值

自定义指令

自定义指令作用: 封装dom操作, 扩展额外功能

1.自定义指令- 局部注册

语法: 

<标签 v-directives内指令名>   </标签>

directives:{ 

'自定义指令名':{ 

   inserted( 自定义参数名 ) {

            

      }

   }

}

2. 自定义指令- 全局注册

语法:

main.js文件

Vue.directive(' 自定义指令名 ',{

   inserted( 自定义参数名 ) {

     

     }

}   )

Vue文件

<标签 v-directives内指令名>   </标签>

3.自定义指令 - 指令的值

<标签 v-directives内指令名="data内变量">   </标签>

directives: {

    自定义指令名: {

      inserted(参数1, { value }) {

      },

      update(参数1, 参数2) {

      },

    },

  },

};

参数说明:

(1) inserted

inserted: 是绑定的DOM元素插入到页面时执行的函数 只会执行一次 后期如果指令的值发生变化也不会再执行了

参数1: dom元素

参数2: 指令的值

(2) update

update: 这个函数会在指令的值发生变化时执行

参数1: dom元素

参数2: 指令的值

注意:

1.指令通过 v-指令名=" 值 " 传值

2.指令值变化会触发 自定义指的update方法