VueJS 之自定义指令

参考

项目	描述
搜索引擎	Bing
哔哩哔哩	黑马程序员
VueJS 官方教程	自定义指令
VueJS 深度指南（官方）	自定义指令

描述

项目	描述
Edge	109.0.1518.70 (正式版本) (64 位)
操作系统	Windows 10 专业版
@vue/cli	5.0.8
npm	8.19.3
VueJS	2.6.14

自定义指令

VueJS 允许你注册自定义指令，以便封装对 DOM 元素的重复处理行为，提高代码的复用率。

VueJS 中的自定义指令分为两类，即全局自定义指令及私有自定义指令。
其中，私有自定义指令仅允许当前组件（定义该指令的组件）使用，而全局自定义指令允许当前项目中的任何组件使用。

私有自定义指令

你可以通过 exprot default {} 终端 directives 节点来定义私有自定义指令。

<template>
  <div class="container">
    <!-- 为 .box 元素绑定自定义指令 color -->
    <div class="box" v-color></div>
  </div>
</template>

<script>
export default {
  // 定义私有自定义指令
  directives: {
    // 定义自定义指令 color
    color: {
      // 当元素绑定指令后将立即调用 bind 函数
      bind(el) {
        // 生成随机 RGB 颜色
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        // 为绑定该指令的元素更换颜色
        el.style.backgroundColor = 'rgb(' + r + ' ,' + g + ' ,' + b + ')'
      }
    }
  }
}
</script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
  }
</style>

执行效果：

每次刷新该页面，.box 元素的背景颜色都将随机生成。

注：

1. 当你定义的自定义指令的名称为 color 时，如果你需要为某个元素绑定该指令，那么你需要为指令添加前缀 v- 。
2. 提交给自定义指令的对象中存在 bind() 函数，你可以向该函数提供一个形参用以接收绑定该指令的元素对应的 DOM 对象。

全局自定义指令

你可以使用 Vue.directive() 函数定义全局自定义指令，该函数接收两个实参，第一个参数用以指定指令的名称，第二个参数用以为该指令提供配置对象。

举个栗子：

请向 Vue 项目 中的 main.js 文件中添加如下内容

// 定义全局自定义指令
Vue.directive('color', {
  // 当元素绑定指令后将立即调用 bind 函数
  bind(el) {
    // 生成随机 RGB 色值
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    // 为绑定该指令的元素更换颜色
    el.style.backgroundColor = 'rgb(' + r + ' ,' + g + ' ,' + b + ')';
    }
  }
)

App.vue

<template>
  <div class="container">
    <!-- 为 .box 元素绑定自定义指令 color -->
    <div class="box" v-color></div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
  }
</style>

执行效果：

每次刷新该页面，.box 元素的背景颜色都将随机生成。

细节

指令周期

钩子

你可以在定义自定义属性时所用到的配置对象中使用如下钩子函数，这些钩子函数将在特定的时机被执行。

项目	描述
bind	该钩子函数仅在指令第一次绑定元素的时候被调用。
update	当指令绑定的数据发生变化时都将触发该函数。
unbind	该钩子函数仅在元素第一次解绑元素时被调用。

注：

你可以向上述钩子函数提供两个形参，第一个形参用于接收绑定该指令的 DOM 元素，而第二个形参用于接收该指令对应的实例对象。

指令的实例对象

<template>
  <div class="container">
    <!-- 你可以为指令绑定值 -->
    <div class="box" v-color:Param="'dodgerblue'"></div>
  </div>
</template>

<script>
export default {
  // 定义私有自定义指令
  directives: {
    // 定义自定义指令 color
    color: {
      bind(el, binding) {
        // 将指令对应的实例对象打印在控制台中
        console.log(binding);
      }
    }
  }
}
</script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
  }
</style>

执行效果：

在执行上述代码后，你将在浏览器中的控制台中观察到如下内容：

其中：

项目	描述
arg	传递给指令的参数。
expression	传递给指令的 JavaScript 表达式。
value	传递给指令的表达式的执行结果。
modifiers	一个包含修饰符的对象 。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。

update 钩子函数

当指令绑定的数据发生变化时都将触发 update 钩子函数。

举个栗子

<template>
  <div class="container">
    <!-- 为 .box 元素绑定 color 指令并为该指令绑定数据 -->
    <div class="box" v-color="color"></div>
    <!-- 为按钮绑定点击事件 -->
    <button @click="randomColor()">Random</button>
  </div>
</template>

<script>
export default {
  // 定义数据
  data() {
    return {
      // 定义 .box 元素的初始颜色
      color: 'dodgerblue'
    }
  },
  // 定义指令
  directives: {
    color: {
      bind(el, binding) {
        // binding 即该指令所绑定的数据
        el.style.backgroundColor = binding.value;
      },
      // 在当前指令绑定的数据发生变化时执行 update 钩子函数
      update(el, binding) {
        el.style.backgroundColor = binding.value;
        // 在控制台中打印当前指令的实例对象
        console.log(binding);
      }
    }
  },
  // 定义事件
  methods: {
    randomColor() {
      // 生成随机 RGB 色值
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);      
      this.color = 'rgb(' + r + ' ,' + g + ' ,' + b + ')';
    }
  }
}
</script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
    border-radius: 3px;
  }
</style>

执行效果：

注：

使用 update 周期函数时，指针的实例对象将增加 oldValue 属性，用于表示指令发生变化前传递给指令的表达式的结果值。

简写

当 bind 及 update 函数中的代码逻辑相同时，我们可以将对象格式的自定义指令转换为函数格式的对象指令。

举个栗子

<template>
  <div class="container">
    <!-- 为 .box 元素绑定 color 指令并为该指令绑定数据 -->
    <div class="box" v-color="color"></div>
    <!-- 为按钮绑定点击事件 -->
    <button @click="randomColor()">Random</button>
  </div>
</template>

<script>
export default {
  // 定义数据
  data() {
    return {
      // 定义 .box 元素的初始颜色
      color: 'dodgerblue'
    }
  },
  // 定义指令
  directives: {
    color(el, binding) {
      // binding 即该指令所绑定的数据
      el.style.backgroundColor = binding.value;
      console.log(binding.oldValue)
    }
  },
  // 定义事件
  methods: {
    randomColor() {
      // 生成随机 RGB 色值
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);      
      this.color = 'rgb(' + r + ' ,' + g + ' ,' + b + ')';
    }
  }
}
</script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
    border-radius: 3px;
  }
</style>

上述代码的执行效果与上个示例的执行效果相同。