自定义指令

1. 创建指令

• 在main.js,或者单独创建文件夹再引入main.js
• 示例：

import Vue from 'vue'
Vue.directive('highlight', {
  // 指令的绑定函数
  inserted: function (el, binding) {
    // 在绑定时进行一些初始化操作
    // el参数代表绑定了该指令的DOM元素
    // binding参数包含了指令的信息

    // 在这里可以获取指令的值和修饰符
    var color = binding.value

    // 修改元素的背景颜色
    el.style.backgroundColor = color
    el.style.color = 'red'
  }
  // 其他钩子函数，如：inserted、update等
})

// main.js
import Vue from 'vue'
import App from './App.vue'
// 注册全局自定义指令
import './directives'
Vue.config.productionTip = false

new Vue({
  render: (h) => h(App)
}).$mount('#app')

// Dom中
<template>
  <div>
    <div v-highlight="'yellow'">我是一个带有自定义指令的元素</div>
  </div>
</template>

• 做了一个改变元素背景颜色和字体颜色的操作

2. directive的生命周期

1. bind：只调用一次，当指令第一次绑定到元素时调用。可以在这里进行一些初始化设置。
2. inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。通常在这里进行DOM操作。
3. update：组件更新时调用，但可能发生在其子组件更新之前。但首次绑定时不会调用，需要在这里对新旧的绑定值进行检查。
4. componentUpdated：组件更新后调用。如果指令同时绑定了表达式和参数，则每次更新都会调用。
5. unbind：只调用一次，指令与元素解绑时调用。可以在这里进行一些清理操作。

2.1 生命周期接收的参数

1. bind(el, binding, vnode)：bind钩子函数接收三个参数：

   • el：指令绑定的元素。
   • binding：一个对象，包含了指令的信息，如指令的值、修饰符等。
   • vnode：Vue编译生成的虚拟节点。

2. inserted(el, binding, vnode)：inserted钩子函数也接收三个参数，与bind相同。这些参数在元素插入到父节点时调用时提供。

3. update(el, binding, vnode, oldVnode)：update钩子函数接收四个参数：

   • el：指令绑定的元素。
   • binding：一个对象，包含了指令的信息，如指令的新值、旧值等。
   • vnode：Vue编译生成的虚拟节点。
   • oldVnode：上一个虚拟节点，仅在首次绑定时为undefined。

4. componentUpdated(el, binding, vnode, oldVnode)：componentUpdated钩子函数接收四个参数，与update相同。它在组件及其子组件被更新之后调用。

5. unbind(el, binding, vnode)：unbind钩子函数接收三个参数，与bind相同。它在解绑指令时调用。