自定義指令適合在需要直接操作DOM 的場(chǎng)景使用，如輸入框自動(dòng)聚焦、權(quán)限控制、懶加載圖片等。常見(jiàn)場(chǎng)景包括：1. 輸入框自動(dòng)獲取焦點(diǎn)；2. 權(quán)限控制按鈕顯示或禁用；3. 實(shí)現(xiàn)懶加載或動(dòng)畫(huà)觸發(fā)；4. 數(shù)值格式化顯示。創(chuàng)建時(shí)可全局或局部註冊(cè)，常用鉤子為inserted 和update。例如權(quán)限指令v-permission 可根據(jù)用戶(hù)角色控制元素是否顯示。使用時(shí)應(yīng)注意結(jié)合binding.value 傳參並在合適鉤子中執(zhí)行邏輯，同時(shí)避免濫用以保持?jǐn)?shù)據(jù)驅(qū)動(dòng)原則。

直接上重點(diǎn)：Vue 的自定義指令是一個(gè)非常實(shí)用但常被忽視的功能，它能讓你在DOM 上執(zhí)行低層級(jí)操作，比如聚焦輸入框、權(quán)限控制顯示、懶加載圖片等。這篇文章會(huì)講清楚怎麼創(chuàng)建和使用Vue 自定義指令，不繞彎子。

什麼情況下適合用自定義指令？

Vue 推薦我們用組件化和響應(yīng)式數(shù)據(jù)來(lái)構(gòu)建應(yīng)用，但在某些場(chǎng)景下，你還是需要直接操作DOM。這時(shí)候自定義指令就派上用場(chǎng)了。

常見(jiàn)使用場(chǎng)景包括：

• 輸入框自動(dòng)獲取焦點(diǎn)
• 按鈕權(quán)限控制（比如沒(méi)有權(quán)限時(shí)禁用按鈕或隱藏）
• 實(shí)現(xiàn)懶加載圖片或動(dòng)畫(huà)觸發(fā)
• 數(shù)值格式化顯示（雖然可以用過(guò)濾器，但指令也可以）

如果你發(fā)現(xiàn)某個(gè)功能需要頻繁操作DOM，而且不適合放在組件邏輯里處理，那就可以考慮封裝成一個(gè)自定義指令。

如何創(chuàng)建一個(gè)基本的自定義指令？

在Vue 中創(chuàng)建自定義指令很簡(jiǎn)單，可以通過(guò)全局或者局部註冊(cè)的方式。

全局註冊(cè)示例：

 Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

然後在模板中這樣使用：

 <input v-focus />

局部註冊(cè)示例：

在組件內(nèi)部通過(guò)directives選項(xiàng)註冊(cè)：

 export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}

每個(gè)指令可以包含以下幾個(gè)鉤子函數(shù)：

• bind ：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用
• inserted ：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用
• update ：所在組件更新時(shí)調(diào)用，但可能在其子組件更新之前
• componentUpdated ：組件和子組件都完成更新後調(diào)用
• unbind ：指令與元素解綁時(shí)調(diào)用

一般最常用的是inserted和update 。

舉個(gè)實(shí)用例子：實(shí)現(xiàn)一個(gè)權(quán)限控制指令

假設(shè)你的系統(tǒng)有角色權(quán)限，有些按鈕只有特定用戶(hù)才能看到或點(diǎn)擊。

我們可以寫(xiě)一個(gè)v-permission指令，根據(jù)權(quán)限控制是否渲染或禁用元素。

 Vue.directive('permission', {
  bind(el, binding) {
    const { value } = binding
    const permissions = ['admin', 'editor'] // 假設(shè)這是從store 獲取的用戶(hù)權(quán)限if (value && Array.isArray(value)) {
      const hasPermission = value.some(role => permissions.includes(role))
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  }
})

使用方式：

 <button v-permission="[&#39;admin&#39;]">刪除</button>

這樣，非管理員用戶(hù)就不會(huì)看到這個(gè)按鈕。

注意：這種方式是“前端控制”，實(shí)際敏感操作還需要後端驗(yàn)證權(quán)限。

一些容易忽略的小細(xì)節(jié)

• 指令的參數(shù)可以通過(guò)binding.value獲取，類(lèi)型可以是字符串、數(shù)組、對(duì)像等。
• 如果希望指令在組件更新時(shí)也重新執(zhí)行邏輯，記得在update鉤子裡也寫(xiě)對(duì)應(yīng)處理。
• 在inserted階段操作DOM 是安全的，因?yàn)榇藭r(shí)元素已經(jīng)插入頁(yè)面。
• 刪除元素時(shí)，用el.remove()或者el.parentNode.removeChild(el) ，注意判斷是否存在父節(jié)點(diǎn)。

基本上就這些。自定義指令不是必須品，但在某些時(shí)候確實(shí)能簡(jiǎn)化邏輯，提高代碼可維護(hù)性。用的時(shí)候注意別濫用，優(yōu)先保持?jǐn)?shù)據(jù)驅(qū)動(dòng)的開(kāi)發(fā)習(xí)慣。

以上是VUE自定義指令創(chuàng)建教程的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！