vue 自定义指令directives及其常用钩子函数说明

下面是关于 "vue 自定义指令directives及其常用钩子函数说明" 的完整攻略：

什么是自定义指令（Directives）

Vue.js 中的指令（Directives）是一种特殊的元素属性(attribute)，它们以 v- 前缀开头，用于在 Vue 实例的模板中添加特殊的行为。除了内置的指令（如 v-if 和 v-for），Vue.js 还允许我们自定义指令以满足各种需求，这种自定义指令就是所谓的自定义指令（Directives）。

自定义指令的基本语法

Vue.js 中自定义指令通过 Vue.directive() 方法进行注册，语法如下：

Vue.directive('指令名称', {
  // 钩子函数
})

其中，指令名称 即为指令的名称，可以自定义命名，但一定要使用 v- 前缀才能生效。

钩子函数 是自定义指令的核心所在，它是一个对象，包含多个钩子函数，用于控制指令的行为。下面是常用的钩子函数及其说明：

常用指令钩子函数

bind

指令第一次绑定到元素时触发，只会触发一次。

// 示例
Vue.directive('demo', {
  bind: function (el, binding) {
    // 执行代码
  }
})

inserted

指令所在的元素插入到 DOM 中时触发，只会触发一次。

// 示例
Vue.directive('demo', {
  inserted: function (el, binding) {
    // 执行代码
  }
})

update

指令所在的元素所绑定的值发生改变时触发，可能会触发多次。

// 示例
Vue.directive('demo', {
  update: function (el, binding) {
    // 执行代码
  }
})

componentUpdated

指令所在的组件的 VNode（VirtualNode）更新时触发，可能会触发多次。

// 示例
Vue.directive('demo', {
  componentUpdated: function (el, binding) {
    // 执行代码
  }
})

unbind

指令与元素解绑时触发，只会触发一次。

// 示例
Vue.directive('demo', {
  unbind: function (el, binding) {
    // 执行代码
  }
})

自定义指令的示例

自定义全局指令

下面是一个简单的自定义全局指令示例，它会给绑定的元素背景色添加渐变效果：

<template>
  <div v-demo>这是一个渐变背景色</div>
</template>

<script>
export default {
  directives: {
    demo: {
      // 全局自定义指令
      inserted: function (el) {
        el.style.background = 'linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)';
      }
    }
  }
};
</script>

自定义局部指令

下面是一个自定义局部指令示例，它为某个页面的特定元素绑定了鼠标悬停事件：

<template>
  <div>
    <h1 v-custom>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  directives: {
    custom: {
      // 局部自定义指令
      inserted: function (el) {
        el.addEventListener('mouseover', function () {
          el.style.color = 'red';
        });
      }
    }
  },
  data() {
    return {
      message: 'Hello World!'
    }
  }
};
</script>

使用 directive 方法定义一个全局指令，可以直接在 Vue 实例化之前进行定义。

在实例化之后，应用自定义指令的范围会限制在当前实例中，这时候需要在组件的声明周期中引入对应的指定。上述例子就是一个局部自定义指令。