Vue3实战笔记（63）—解锁Vue 3的秘密武器：自定义指令全面掌握与创新应用

~山花~

于 2024-06-11 19:46:59 发布

阅读量452

点赞数 3

分类专栏： vue3 vue3实战笔记 vue 文章标签： vue.js 笔记 javascript vue3实战笔记前端

山花

本文链接：https://blog.csdn.net/loveshenhaitao/article/details/139607266

版权

vue 同时被 3 个专栏收录

63 篇文章 4 订阅

订阅专栏

62 篇文章 2 订阅

订阅专栏

vue3实战笔记

62 篇文章 2 订阅

订阅专栏

文章目录

前言
一、自定义指令
二、一个完整的 Vue 3 示例
总结

前言

昨天学了自定义指令的初级用法，今天来点高级的，讲讲它的钩子和参数。

一、自定义指令

一个指令的定义对象可以提供几种钩子函数 (都是可选的)：


const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

参数详解
el: 指令绑定的元素，可以用来直接操作 DOM。

binding: 一个对象，包含以下属性：

value: 指令的值，例如在 v-my-directive=“1 + 1” 中，值是 2。

oldValue: 指令旧值，仅在 updated 和 beforeUnmount 钩子中可用。

arg: 传给指令的参数，例如在 v-my-directive:foo 中，参数是 “foo”。

modifiers: 一个包含修饰符的对象，例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。

instance: 使用指令的组件实例。

dir: 指令的定义对象。

vnode: 当前的虚拟节点。

prevNode: 上一个虚拟节点，仅在 updated 钩子中可用。

通过这些参数，自定义指令可以灵活地响应元素的变化和用户的行为，实现各种高级功能。

假设我们想要创建一个自定义指令 v-color，用于改变元素的文本颜色。我们希望这个指令能够接收一个颜色值作为参数，并且有一个修饰符 bold，当这个修饰符存在时，文本还会加粗。

首先，我们定义这个自定义指令：

const app = Vue.createApp({
  // ...
});

app.directive('color', {
  mounted(el, binding) {
    // 设置文本颜色
    el.style.color = binding.value;
    // 检查修饰符
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold';
    }
  },
  updated(el, binding) {
    // 更新文本颜色
    el.style.color = binding.value;
    // 检查修饰符
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold';
    } else {
      el.style.fontWeight = 'normal';
    }
  }
});

然后，我们在模板中使用这个指令：

<div id="app">
  <p v-color="'green'">这是一段绿色文本</p>
  <p v-color="'blue'.bold>这是一段蓝色加粗文本</p>
</div>

在上面的例子中，我们传递了颜色值 ‘green’ 和 ‘blue’ 作为参数，并且对第二个 p 元素使用了 bold 修饰符。

二、一个完整的 Vue 3 示例

这里是一个完整的 Vue 3 示例，包括自定义指令的定义和用法：
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Custom Directive with Argument and Modifiers</title>
</head>
<body>
  <div id="app">
    <p v-color="'green'">这是一段绿色文本</p>
    <p v-color="'blue'.bold>这是一段蓝色加粗文本</p>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const { createApp } = Vue;

    const app = createApp({
      // ...
    });

    app.directive('color', {
      mounted(el, binding) {
        el.style.color = binding.value;
        if (binding.modifiers.bold) {
          el.style.fontWeight = 'bold';
        }
      },
      updated(el, binding) {
        el.style.color = binding.value;
        if (binding.modifiers.bold) {
          el.style.fontWeight = 'bold';
        } else {
          el.style.fontWeight = 'normal';
        }
      }
    });

    app.mount('#app');
  </script>
</body>
</html>