Vue中的自定义指令

什么是指令？

答： 特点:是v- 开头 ，在 vue 中提供了些对页面和数据更方便的输出方式，就是指令。实质上就是特殊的 html 标签属性。

指令的作用： 指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

自定义指令所传递的三个参数

• el: 指令所绑定的元素，可以用来直接操作DOM。
• binding: 一个对象，包含指令的很多信息。
• vnode: Vue编译生成的虚拟节点。

指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别如下：

1. bind:只调用一次，指令第一次绑定到元素时调用。
2. inserted:被绑定元素插入父节点时调用。
3. update:被绑定于元素所在的模板更新时调用。
4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5. unbind:只调用一次，指令与元素解绑时调用。

bind:()=>{//被绑定
    console.log('bind');
},

inserted:()=>{//绑定到节点
    console.log('inserted');
},

update:()=>{//组件更新
    console.log('update');
},

componentUpdated:()=>{//组件更新完成
    console.log('componentUpdated');
},

unbind:()=>{//解绑
    console.log('unbind');
}

Vue3全局自定义指令：

let app = createApp(App)
app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
   }
})

Vue3局部自定义指令：

directives: {
highlight: {
  beforeMount(el, binding, vnode) {
     el.style.background = binding.value;
  },
},

 el：指令绑定的元素

binding：数据对象

vnode：Vue编译生成的虚拟节点