计算机系统应用教程网站

网站首页 > 技术文章 正文

Vue3实战笔记(63)—自定义指令全面掌握与创新应用

btikc 2024-10-21 04:22:46 技术文章 6 ℃ 0 评论

前言

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

一、自定义指令

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


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>

在这个例子中，我们定义了一个 v-color 指令，它接受一个颜色值作为参数，并且有一个 bold 修饰符用于加粗文本。我们然后在两个 p 元素上使用了这个指令，传递了不同的颜色值作为参数，并且在第二个元素上使用了 bold 修饰符。

总结

掌握了这些，我们可以轻松的定义自己的指令了！

不要因为结束而哭泣，要为曾经发生而微笑。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表