這篇文章將為大家詳細(xì)講解有關(guān)vue如何使用自定義指令，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)八宿,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

使用自定義指令的邏輯與使用事件修飾符的邏輯是一樣的，當(dāng)methods中存在操作DOM/BOM相關(guān)的邏輯的時候，就需要將其抽象成一個自定義指令，以便于業(yè)務(wù)邏輯與相關(guān)DOM操作解耦，并且使之更容易被單元測試。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

一. 怎么創(chuàng)建自定義指令

通過 Vue.directive 全局創(chuàng)建指令，Vue.directive 的第一個參數(shù)定義了指令的名稱，如下代碼創(chuàng)建了一個名為 resize 的指令。

Vue.directive("resize", {

});

在全局注冊這個指令之后，意味著可以任意組件中使用這個指令，可以直接在單文件組件的模板中直接使用指令，也可以在 JSX 中使用指令。按照約定，指令名字有 “v-” 前綴，前綴用于標(biāo)明這是一個前綴。

二.  什么時候用自定義指令

關(guān)于什么時候用自定義指令，其邏輯與使用事件修飾符的邏輯是一樣的。

使用事件修飾符很大程度上是為了讓我們的代碼顯得是數(shù)據(jù)驅(qū)動并且易于測試的，將 DOM 的邏輯單獨委托出來，約定成一些特定的修飾符。（事件修飾符相關(guān)筆記：https://www.cnblogs.com/xiaoxuStudy/p/13233379.html#oneone）

其實，自定義指令也是一樣的邏輯，當(dāng)我們的 methods 中存在操作 DOM/BOM 相關(guān)的邏輯的時候，就該思考是否可以將其抽象成一個自定義指令，以便于業(yè)務(wù)邏輯與相關(guān) DOM 操作解耦，并且使之更容易被單元測試。

三.  鉤子函數(shù)

Vue 在這里嚴(yán)格遵循了設(shè)計模式中的開閉原則，通過約定的鉤子函數(shù)來讓開發(fā)者可以在不同的時機中去操作組件。（Vue官網(wǎng)鉤子函數(shù)相關(guān)：https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0）

1. 鉤子函數(shù)

Vue.directive("resize", {
  //只調(diào)用一次，指令第一次綁定元素時調(diào)用
  //在這里可以進行一次性的初始化設(shè)置
  bind: function(el, binding, value){},
  //被綁定元素插入父節(jié)點時調(diào)用
  //（僅保證父節(jié)點存在，但不一定已被插入文檔中）
  inserted: function(el, binding, vnode){},
  //所在組件的 Vnode 更新時調(diào)用
  //但是可能發(fā)生在其子 VNode 更新之前
  //指令的值可能發(fā)生了變化，也可能沒有
  //但是可以通過比較更新前后的值來忽略不必要的模板更新
  update: function(el, binding, vnode, oldVnode){},
  //指令所在的 VNode 及其子 VNode 全部更新后調(diào)用
  componentUpdated: function(el, binding, vnode, oldVnode){},
  //只調(diào)用一次，指令與元素解綁時調(diào)用
  unbind: function(el, binding, vnode){},
});

鉤子函數(shù)例子

先來看第一對鉤子函數(shù) bind 與 unbind 函數(shù)，顧名思義，這兩個鉤子函數(shù)是在當(dāng)前這個指令聲明的元素綁定和解綁時被調(diào)用的，并且需要記住的是，bind 與 unbind 都只會被調(diào)用一次。

接下來看鉤子函數(shù) inserted。通常情況下，inserted 會在 bind 之后被調(diào)用。

bind 跟 inserted 的區(qū)別是：bind 中參數(shù) el.parentNode 為 null，inserted 中可以通過 el.parentNode 訪問當(dāng)前節(jié)點的父節(jié)點。當(dāng)有信息需要存放在父節(jié)點上、需要訪問父節(jié)點時，使用 inserted 的頻率高于 bind 。

接下來看最后一組鉤子函數(shù) update 跟 componentUpdate，這對鉤子函數(shù)會在 vnode 更新前后被調(diào)用。

與其他鉤子函數(shù)相比，update 跟 componentUpdate 傳入的參數(shù)多一個 oldVnode，oldVnode 代表之前的 Virtual DOM 節(jié)點信息，vnode代表當(dāng)前的Virtual DOM 節(jié)點信息。可以根據(jù)比較 oldVnode 和 vnode 之間的差異來判斷模板是否需要更新，以減少不必要的模板更新，從而一定程度提高組件性能。

2. 鉤子函數(shù)參數(shù)

function(
  // 指令所綁定的元素，可以用來直接操作 DOM
  el,
  // binding 一個對象，包含以下屬性
  {
    // 指令名，不包括 -v 前綴
    name,
    // 指令的綁定值，例如：v-my-directive="1+1"中，綁定值為 2
    value,
    // 指令綁定的前一個值
    // 僅在 update 和 componentUpdated 鉤子中可用
    oldValue,
    //字符串形式的指令表達式
    //例如 v-my-directive="1+1" 中，表達式為 "1+1"
    expression,
    //例如指令的參數(shù)，可選。
    //例如 v-my-directive:foo 中，參數(shù)為 "foo"
    arg,
    //一個包含修飾符的對象
    //例如：v-my-directive.foo.bar 中，
    //修飾符對象為 {foo: true, bar: true}
    modifiers
  },
  //Vue 編譯生成的虛擬節(jié)點
  vnode,
  //上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用
  oldVnode
)

鉤子函數(shù)參數(shù)

除了 el 之后，其它參數(shù)都應(yīng)該是只讀的，切勿進行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進行。

關(guān)于“vue如何使用自定義指令”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當(dāng)前文章：vue如何使用自定義指令
網(wǎng)站URL：http://aaarwkj.com/article24/igipce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站設(shè)計公司、云服務(wù)器、App設(shè)計、Google、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)