在Nuxt.js中建立自定義指令

將在多個頁面或組件中共同應用於DOM的功能

製作成自訂指令會比較方便。

想要製作捲動指令範例。

- 在首頁或詳細頁面等頁面捲動時載入數據、捲動時顯示吐司訊息等情況下非常有用。

1. 首先，建立檔案並註冊到Nuxt plugin。

Nuxt config plugins會在Nuxt應用程式初始化時執行已定義的檔案，以啟用特定動作。=可以在全域使用特定功能。

2. 實作捲動指令。

實作可以傳遞回呼函數到組件。

3. 現在在頁面中使用v-scroll。

其他

建立自訂指令時可以使用一些鉤子。

1. bind(el, binding, vnode)
說明：指令第一次繫結到元素時只呼叫一次。

可以在此設定已繫結元素的初始設定。

參數

el：指令繫結到的DOM元素
binding：包含指令的值、運算式、引數等的物件
vnode：Vue編譯器建立的虛擬節點

2. inserted(el, binding, vnode)

說明：繫結的元素插入DOM時呼叫。也就是說，當指令實際新增到DOM時使用。

* 在捲動事件繫結程式碼中，在inserted鉤子時間點執行DOM相關作業。

3. update(el, binding, vnode, oldVnode)

說明：每次繫結元素的屬性或值變更時呼叫。

但是，子組件仍處於更新前的狀態。

當需要在繫結值變更時執行DOM作業時使用。

參數

oldVnode：先前渲染的虛擬節點

4. componentUpdated(el, binding, vnode, oldVnode)

說明：繫結元素的屬性或值更新且子組件也全部更新後呼叫。

也就是說，在最終DOM狀態下執行。等待子組件的值變更後執行。

5. unbind(el, binding, vnode)

說明：指令不再套用於元素，且元素被銷毀時呼叫。

在此時間點移除事件監聽器或執行清理作業。

* 在scroll自訂範例中，在unbind時間點清理事件監聽器。