Frontend Academy · 课时

自定义指令

Q: 「自定义指令」这节课中我会学到什么？

使用 mounted 和 updated 等生命周期钩子注册全局和局部指令，将 DOM 操作逻辑封装在组件之外。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 mounted 和 updated 等生命周期钩子注册全局和局部指令，将 DOM 操作逻辑封装在组件之外。

自定义指令 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是指令

指令是通过 v- 前缀附加到元素上的可复用 DOM 操作逻辑。内置示例：v-if、v-for、v-model、v-show。自定义指令可以让您构建自己的指令。

使用场景：自动聚焦

指令可以封装一些无需使用包装组件的小型 DOM 操作。

<template>
  <input v-focus>
</template>

<script setup>
const vFocus = {
  mounted: (el) => el.focus()
};
</script>

本地注册指令

在 <script setup> 中，使用 v 前缀声明指令，Vue 会自动在本地注册它们。

<script setup>
const vColor = {
  mounted: (el, binding) => {
    el.style.color = binding.value;
  }
};
</script>

<template>
  <p v-color="'red'">Hello</p>
</template>

全局注册指令

使用 app.directive(name, definition)，即可让指令在任何地方可用。

// main.ts
const app = createApp(App);

app.directive('focus', {
  mounted: (el) => el.focus()
});

app.mount('#app');

指令生命周期钩子

指令拥有与组件生命周期相对应的钩子：created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。

const vColor = {
  beforeMount(el, binding) {
    el.style.color = binding.value;
  },
  updated(el, binding) {
    el.style.color = binding.value;
  }
};

binding 对象

钩子会接收一个绑定对象，其中包含：value、oldValue、arg、modifiers、instance。

<p v-pin:bottom.left="200">Pinned</p>

// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }

实际示例：v-click-outside

一种常见的指令：当用户点击元素外部时调用处理程序。

const vClickOutside = {
  mounted(el, binding) {
    el._handler = (e) => {
      if (!el.contains(e.target)) binding.value(e);
    };
    document.addEventListener('click', el._handler);
  },
  unmounted(el) {
    document.removeEventListener('click', el._handler);
  }
};

// Usage:
<div v-click-outside="closeMenu">...</div>

实际示例：v-tooltip

通过指令附加 Tippy/Popper 工具提示，从而保持模板整洁。

import tippy from 'tippy.js';

const vTooltip = {
  mounted(el, binding) {
    el._tippy = tippy(el, { content: binding.value });
  },
  updated(el, binding) {
    el._tippy?.setContent(binding.value);
  },
  unmounted(el) {
    el._tippy?.destroy();
  }
};

v-debounce：节流输入事件

使用自定义指令为输入的 @input 处理程序添加去抖功能。

const vDebounce = {
  mounted(el, binding) {
    let timer;
    el.addEventListener('input', () => {
      clearTimeout(timer);
      timer = setTimeout(() => binding.value(el.value), 300);
    });
  }
};

<input v-debounce="search">

指令、组件与组合式函数

组合式函数：有状态逻辑（数据、引用）。组件：带有自己模板的可复用 UI 结构。指令：现有元素上的纯 DOM 行为。无需模板或标记时，请选择指令。

性能注意事项

指令会在每次更新时运行。请保持其轻量。对于开销较大的操作，请以 binding.value !== binding.oldValue 为条件，以跳过不必要的工作。

快速检查

使用 Vue 指令与使用 Vue 组件来添加行为，有什么区别？

回顾：自定义指令

带有 v- 前缀的可复用 DOM 逻辑。在本地注册（script setup 中的 vName 常量），或全局注册（app.directive）。生命周期钩子：mounted、updated、unmounted。binding 提供 value、oldValue、arg、modifiers。用于纯 DOM 行为（focus、click-outside、tooltip、debounce）。组件用于标记；组合式函数用于有状态逻辑；指令用于扩展 DOM。

常见问题解答

「自定义指令」课时是免费的吗？

是的 — 「自定义指令」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「自定义指令」这节课中我会学到什么？

使用 mounted 和 updated 等生命周期钩子注册全局和局部指令，将 DOM 操作逻辑封装在组件之外。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「自定义指令」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy