Vue Academy · 课时

编写自定义指令

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

app.directive()、mounted/updated/unmounted 钩子、指令参数和修饰符。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

app.directive()、mounted/updated/unmounted 钩子、指令参数和修饰符。

第 4 / 4 课13 个步骤

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

组件无法满足需求时

Vue 中大多数复用都通过组件和可组合函数实现。但有些逻辑需要操作原始 DOM，例如自动聚焦输入框、集成非 Vue 库或测量元素。自定义指令正是为此而设计的。

最小指令示例

使用 app.directive 在应用上注册指令。mounted 钩子会接收元素，因此此指令会在输入框出现时将其聚焦。

const app = createApp(App)
app.directive('focus', {
  mounted(el) { el.focus() }
})

使用指令

在模板中使用 v- 前缀加上已注册的名称来应用指令。

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

script setup 中的局部指令

在 <script setup> 中，任何以 v 开头且采用 camelCase 命名的顶层变量，都会成为可用的指令。将其命名为 vFocus，然后以 v-focus 的形式使用。

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

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

绑定对象

每个钩子都会将 binding 对象作为第二个参数接收。它包含模板中传入的指令值、参数和修饰符。

app.directive('demo', {
  mounted(el, binding) {
    console.log(binding.value, binding.arg, binding.modifiers)
  }
})

传入值

等号后的表达式会成为 binding.value。这里传入一个颜色，并将其应用到元素上。

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

<!-- directive -->
app.directive('color', {
  mounted(el, binding) { el.style.color = binding.value }
})

传入参数

冒号后的部分会成为 binding.arg。这样，同一个指令就可以根据标签执行不同的行为。

<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>

使用修饰符

修饰符位于点号之后，并会以布尔值映射的形式存入 binding.modifiers。您可以使用它们来调整行为。

<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>

指令生命周期钩子

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

响应更新

updated 钩子会在元素重新渲染后运行。请比较 binding.value 和 binding.oldValue，仅在确实发生变化时执行操作，并在 unmounted 中完成清理。

app.directive('color', {
  mounted(el, binding) { el.style.color = binding.value },
  updated(el, binding) {
    if (binding.value !== binding.oldValue) el.style.color = binding.value
  }
})

指令与组件

凡是涉及结构或状态的功能，都应优先使用组件。只有在需要低级、直接访问 DOM，且功能不适合组件时，才应使用指令，例如管理焦点或操作第三方 DOM 小部件。

快速检查

请测试您对自定义指令的掌握情况。

在交互式课程中回答

回顾

您已经学会了构建自定义指令：

使用 app.directive 全局注册，或在 script setup 中以 vName 的形式局部注册。
binding.value、binding.arg 和 binding.modifiers 用于传入数据。
生命周期钩子：创建、beforeMount、挂载、beforeUpdate、更新、beforeUnmount、卸载。
使用指令处理低级 DOM 工作；其他情况应优先使用组件。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

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

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

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

app.directive()、mounted/updated/unmounted 钩子、指令参数和修饰符。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 Vue Academy