自定义指令

Vue 除了基本指令外（v-model，v-show等等），允许用户自定义指令。自定义指令是对基本指令的扩展与补充，可复用。
其中自定义指令又分为：全局自定义指令和局部自定义指令

语法

  1. directives:{
  2.     指令名称：{
  3.         inserted(el,binding){         
  4.          }
  5.      }
  6. }

inserted钩子函数：被绑定元素插入父节点时调用，它只会触发一次
如果想在dom更新时也触发自定义指令，可以添加updated钩子函数
关于钩子函数的参数
el:指令所绑定的元素，可以用来直接操作 DOM
binding:一个对象，包含多个属性，特别是里面的value，通过它可以获取指令的绑定值，当用户给指令绑定了值的时候，通过binding.value可以获取
注意：el和binding只是形参，可以自定义参数的名称

全局自定义指令使用方法

全局自定义指令使用——Vue.directive( 指令ID，定义对象 )
“指令ID”：指令的名字
“定义对象”：就是一个功能对象，包含有该指令的钩子函数
钩子函数：是一个函数，但是只有是系统消息被触发时被系统自动调用，无法自己触发。

1. 自定义一个全局指令

  1. 使用 Vue.directive(‘指令名’, {对象}) 定义全局的指令 v-focus
  2. 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀
  3. 但是：在调用的时候，必须在指令前加上v-前缀进行调用
  4. 参数2：是一个对象，在这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

2. 自定义一个v-focus焦点属性

  1. Vue.directive('focus', {
  2.     /* 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次 */
  3.     // 注意：在每个函数中，第一个参数，永远是el,表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
  4.     // 在元素 刚绑定的时候，还没有插入到DOM中去，这时候调用focus方法，没有作用
  5.     bind: function(el){
  6.         // el.focus()  
  7.     },
  8.     /* inserted 表示元素插入到DOM中的时候，会执行inserted函数【触发一次】 */
  9.     // 和JS行为有关的操作，最好在inserted中去执行，防止JS行为不生效
  10.     inserted: function(el){
  11.         el.focus()
  12.     },
  13.     /* 当VNode更新的时候，会执行updated，可能会触发多次 */
  14.     updated: function(){
  16.     }
  17. });

05自定义指令 - 图3

全局自定义指令使用方法image-20220527110136762

局部自定义指令定义使用

05自定义指令 - 图5