一、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起步/創建項目