一、Vue3 指令

Vue 3 指令是 Vue 模板中用于与 DOM 进行交互的特殊属性。指令以 v- 为前缀，后面跟着指令名称。Vue 3 提供了一系列内置指令，同时你也可以创建自定义指令。下面是一些 Vue 3 中常用的内置指令：

1. v-bind
   用于属性绑定，将表达式的结果绑定到一个元素的属性上。

<img v-bind:src="imageSrc" alt="Vue logo">

简写形式为 :：

<img :src="imageSrc" alt="Vue logo">

2. v-model
   用于在表单元素上创建双向数据绑定。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

3. v-on
   用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。

<button v-on:click="increment">Increment</button>

简写形式为 @：

<button @click="increment">Increment</button>

4. v-if、v-else-if、v-else
   用于条件渲染。根据表达式的值来决定是否渲染一个元素。

<div v-if="type === 'A'">Render A
</div>
<div v-else-if="type === 'B'">Render B
</div>
<div v-else>Render Others
</div>

5. v-for
   用于列表渲染。基于源数据多次渲染一个元素或模板块。

<div v-for="item in items" :key="item.id">{{ item.text }}
</div>

6. v-show
   根据表达式的值的真假，切换元素的 display CSS 属性。

<p v-show="isVisible">Hello when visible</p>

7. v-pre
   跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。

<div v-pre>{{ this will not be compiled }}
</div>

8. v-cloak
   这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<div v-cloak>{{ message }}
</div>

[v-cloak] {display: none;
}

9. v-once
   将元素和组件标记为只渲染一次。

<span v-once>This will only be rendered once.</span>

10. v-text
    更新元素的 textContent。

<span v-text="message"></span>

11. v-html
    更新元素的 innerHTML。

<div v-html="htmlContent"></div>

除了这些内置指令，Vue 3 还允许你注册自定义指令。自定义指令可以扩展 Vue 的基本功能，用于执行复杂的 DOM 操作或处理特定的业务逻辑。

二、注册-自定义指令

注册自定义指令有两种方式：全局注册和局部注册。全局注册的指令可以在任何 Vue 实例中使用，而局部注册的指令只能在特定的 Vue 实例或组件中使用。

注册自定义指令的基本语法如下：

// 全局注册
Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})// 局部注册
const app = Vue.createApp({})app.directive('focus', {// 定义指令
})app.mount('#app')

三、常见自定义指令

在 Vue 3 中，自定义指令允许你注册一些可以在模板中重复使用的行为。这些行为可以附加到任何元素上，并在元素的特定生命周期钩子中执行自定义逻辑。以下是一些 Vue 3 中常见的自定义指令及其案例代码：

1. 聚焦指令（v-focus）

当页面加载时，自动将焦点聚焦到指定的元素上。

// main.js 或其他初始化文件
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)// 全局注册自定义指令 v-focus
app.directive('focus', {mounted(el) {el.focus()}
})app.mount('#app')

<!-- App.vue -->
<template><div><input v-focus type="text" placeholder="自动聚焦到这个输入框"></div>
</template>

2. 高亮指令（v-highlight）

将匹配的文本在元素中进行高亮显示。

// main.js 或其他初始化文件
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)// 全局注册自定义指令 v-highlight
app.directive('highlight', {beforeMount(el, binding) {el.innerHTML = el.innerHTML.replace(new RegExp(binding.value, 'gi'), function(matched) {return `<span style="background-color: yellow;">${matched}</span>`})}
})app.mount('#app')

<!-- App.vue -->
<template><div><p v-highlight="'vue'">在这里，'vue' 会被高亮显示。</p></div>
</template>

3. 防抖指令（v-debounce）

对事件处理函数进行防抖处理，减少不必要的计算或请求。

// main.js 或其他初始化文件
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)// 全局注册自定义指令 v-debounce
app.directive('debounce', {beforeMount(el, binding) {let timer = nullel.addEventListener('input', function() {clearTimeout(timer)timer = setTimeout(() => {binding.value()}, binding.arg || 500)})}
})app.mount('#app')

<!-- App.vue -->
<template><div><input v-debounce="search" type="text" placeholder="防抖处理，输入后延迟500ms执行"></div>
</template><script>
export default {methods: {search() {console.log('执行搜索')}}
}
</script>

4. 限制输入指令（v-limit）

限制输入框中字符的数量。

// main.js 或其他初始化文件
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)// 全局注册自定义指令 v-limit
app.directive('limit', {mounted(el, binding) {el.addEventListener('input', function() {if (el.value.length > binding.value) {el.value = el.value.slice(0, binding.value)}})}
})app.mount('#app')

<!-- App.vue -->
<template><div><input v-limit="10" type="text" placeholder="最多输入10个字符"></div>
</template>

使用注意事项

• 在使用自定义指令时，要确保指令名称不与 Vue 的内置指令名称冲突。
• 在自定义指令的钩子函数中，el 参数是绑定指令的元素，binding 参数是一个对象，包含了一些有用的属性，如 name（指令名）、value（指令的绑定值）、oldValue（指令绑定的前一个值）、arg（指令的参数）、modifiers（包含修饰符的对象）。
• 如果需要监听多个事件或进行更复杂的 DOM 操作，可以考虑

四、相关链接

1. Vue3官方地址
2. Vue3中文文档
3. 「Vue3系列」Vue3简介及安装
4. 「Vue3系列」Vue3起步/创建项目