VueJS 之自定义指令

文章目录

  • 参考
  • 描述
  • 自定义指令
      • 私有自定义指令
      • 全局自定义指令
  • 细节
      • 指令周期
          • 钩子
          • 指令的实例对象
      • update 钩子函数
      • 简写

参考

项目 描述
搜索引擎 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">
    
    <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 元素的背景颜色都将随机生成。

VueJS 之自定义指令_第1张图片

注:

  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">
    
    <div class="box" v-color>div>
  div>
template>

<script>
export default {

}
script>

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

执行效果:

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

VueJS 之自定义指令_第2张图片

细节

指令周期

钩子

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

项目 描述
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>

执行效果:

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

VueJS 之自定义指令_第3张图片

其中:

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

update 钩子函数

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

举个栗子

<template>
  <div class="container">
    
    <div class="box" v-color="color">div>
    
    <button @click="randomColor()">Randombutton>
  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>

执行效果:

VueJS 之自定义指令_第4张图片

注:

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

VueJS 之自定义指令_第5张图片

简写

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

举个栗子

<template>
  <div class="container">
    
    <div class="box" v-color="color">div>
    
    <button @click="randomColor()">Randombutton>
  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>

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

你可能感兴趣的:(JavaScript,Vue,前端,vue.js,前端,javascript,自定义指令,指令周期)