在 Vue 中，指令是用來直接編輯 DOM 的一種好方法。你肯定熟悉 vue 中的 ， ， 這些指令。
vue 自定義指令是，正如你可能猜到的那樣，Vue的方式讓我們為我們的專案構建其他指令。它們是在專案中新增獨特和可重複使用的功能的好方法。
Vue 自定義指令是 Vue 讓我們為自己的專案構建附加指令的方式。它們用來在專案中新增獨特且可重用的功能。
Vue 自定義指令可以操縱元素以及 DOM 中的響應性處理。
什麼是自定義指令
自定義指令是一種能讓你的專案適合你需求的方法。你可能會注意到 vue 外掛經常使用自定義指令。
例如，在 V-Lazy Plugin 中用了 指令來新增自定義功能，使影象載入更有效。使用指令是最好的情況，因為我們要直接編輯DOM。
你可能會問：難道我不能只註冊 compute 和 watcher 之類的元件選項嗎？
可以。但是，儘管元件選項對於抽象和程式碼重用很有用，但自定義指令仍然是直接操作 DOM 元素的最好方法之一 。
一個指令有五個 hook
像元件及其生命週期 hook 一樣，每個VUE指令都有自己的 hook 觸發
Vue 2和 Vue 3 中，指令hook也有所不同。
以下是 Vue 2 指令 hook：
bind
– 當指令繫結到元素時呼叫一次
inserted
– 當繫結元素插入其父節點時
update
– 當元素更新時（但還沒有任何子元素）
componentUpdated
– 子元素也更新後
unbind
– 當指令與元素解除繫結時呼叫一次
以下是Vue 3指令 hook：
created
– 在應用元素的屬性或事件偵聽器之前呼叫。
beforeMount
– 與 vue2 的 bind 相同
mounted
– 與 vue2 的 inserted 相同
beforeUpdate
– 在元素本身更新之前呼叫（如生命週期 hook）
updated
– 與 vue2 的 ComponentUpdated 相同
beforeUnmount
– 在解除安裝元素之前呼叫（如生命週期 hook）
unmounted
–與 vue2 的 unbind 相同
在實現這些鉤子時，它們都有一些可以接受的引數。
el
– 指令繫結到此元素上，讓你可以修改它
binding
– 一個包含很多屬性的物件；後面詳細解釋
vnode
– 虛擬節點
prevVnode
– 上一個虛擬節點（僅在 update hook 中提供）
Vue 指令的文件 中說明，你應該將這些引數（除了 el）看作是隻讀的，切勿修改。
插播廣告，推薦一個有意思的公眾號
繫結物件（Binding Object）
繫結物件包含幾個屬性，可幫助你為 hook 新增功能。
name
– 指令的名稱（沒有 字首）
value
– 傳遞給指令的值
oldvalue
– 指令之前的值（僅在 update hook 中提供）
expression
– 繫結到字串的表示式（例如：， ）
arg
– 傳遞給字串的引數（例如：， ）
modifiers
– 作為物件傳遞的所有修飾符（例如：， ）
定義你的指令
在我們的 main。js 檔案或者任何你定義 Vue 例項的地方——只需要使用 Vue 2 中的 方法或 Vue 3 中的 方法
現在讓我們建立一個名為 v-font-size的指令，用來操縱元件的字型大小。
在 中新增一些偵聽 BeForeMount 和 update 的 hook 程式碼並調整字型大小。
然後在元件檔案中只需要新增以下兩行，就可以在操作中找我們的元件。每當我們宣告指令時，都可以使用字首 來訪問它。
還有另一種定義 Vue 指令的方法。也可以在main。js。中使用這種語法：
如果傳遞的是函式而不是物件，則它將在 bind 和 update hook 期間執行。
無論你用哪種方法，結果應該是這樣：
現在完成了第一個自定義指令，下面讓我們更進一步。
將引數傳遞給你的指令
有幾種方法可以增加對指令的控制。可以透過傳遞額外的值、引數或修飾符來完成。
對於前面的例子，假設我們希望更好地控制元素中的字型大小。
傳值 - 用於響應式資料
傳遞資料最直觀的方式就是簡單地給它一個值。這允許指令在值被更改時響應更新，同時也提供了最靈活的控制，因為可以接受各種值（任何字型大小）。
在你的元件中，宣告看起來像這樣：
在你的指令中，你需要修改方法以使用來自繫結物件的值。
向指令傳送引數
如果不需要任何響應性，只需要一種方法來為你的指令提供多個選項。那就是引數。
指令中的程式碼就是這樣：
然後在我們的模板中：
使用修飾器
修飾符類似於引數，因為它們不適合響應性。但是當與引數結合使用時，你可以建立一個高度自定義的系統。
這是因為你可以在指令上應用多個修飾器。
首先在我們的指令中實現它們。 和 的順序僅取決於你希望優先使用哪些修飾符。
然後可以在模板中使用：
效果如下：
強力推薦前端面試刷題神器