Vue 自定義指令

you_De 發布于2019-08-23 13:42 / 2116人閱讀

摘要：自定義指令定義直接看官網的介紹吧覺得官方文檔說的很清楚了，所以我基本都是抄他的了。除了核心功能默認內置的指令和，也允許注冊自定義指令。然而，有的情況下，你仍然需要對普通元素進行底層操作，這時候就會用到自定義指令。

前言最近搞了畢設，需要實現一個場景，點擊一塊區域，彈出一個編輯區域，點擊頁面的其他地方的時候，這個編輯區域就隱藏，本想想之前寫模態框一樣寫個方法的時候，突然

覺得可以嘗試用 vue 相關的東西優雅的解決這個事情，然后就學了下面的自定義指令了。

1 Vue 自定義指令 1.1 定義

直接看官網的介紹吧（覺得官方文檔說的很清楚了，所以我基本都是抄他的了）。

除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。

1.2 基礎實現

這個在分兩種情況，如果你想定義一個全局的自定義組件的話,那么就在項目中的 main.js 里面定義了，例如定義一個官網中的自動聚焦的指令

// 注冊一個全局自定義指令 `v-focus`
Vue.directive("focus", {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

要是你只是想定義一個局部的指令在某個組件內部用的話，那么就在相應的組件內定義了

// 跟 data(),methods:{} 那些同級寫了
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

定義完后我們就能愉快的使用了

1.2 鉤子函數

當然這個自定義指令不會就這么一點東西啦，為了解決一些現實中場景，Vue 給我們一堆鉤子函數用來實現我們的一些騷操作。具體如下 (均為可選)：

bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。

unbind：只調用一次，指令與元素解綁時調用。

接下來我們來看一下鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。

當然要想好好用用這寫鉤子函數，就要懂得用下面的這些參數

1.3 鉤子函數參數

指令鉤子函數會被傳入以下參數：

el：指令所綁定的元素，可以用來直接操作 DOM 。

binding：一個對象，包含以下屬性：

name：指令名，不包括 v- 前綴。

value：指令的綁定值，例如：- v-my-directive="1 + 1" 中，綁定值為 2。

oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。

arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。

modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { - foo: true, bar: true }。

vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。

oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

然后官網有話說

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

然后下面我們給一個簡單的例子

// 在組件內部定義一個局部指令
directives:{
  demo:{
    bind: function (el, binding, vnode) {
      var s = JSON.stringify;
      el.innerHTML = 
        `name: ${s(binding.name)} 

        value: ${s(binding.value)} 

        expression: ${s(binding.expression)} 

        argument: ${s(binding.arg)} 

        modifiers: ${s(binding.modifiers)} 

        vnode keys: ${Object.keys(vnode).join(", ")}`
    }
  }
}
 // 綁定到組件中的一個 div 中

然后我們在網頁中就可以看到這么一堆文字了(當然下面的注釋是我自己寫的)

name: "demo" 
// 指定名稱
value: "Welcome to Your Vue.js App" 
// 指令綁定值
expression: "message" 
// 字符串形式的指令表達式
argument: "foo" 
// 傳給指令的參數
modifiers: {"a":true,"b":true} 
// 修飾符的對象
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
// Vue 編譯生成的虛擬節點

1.4 函數簡寫

在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子。比如這樣寫:

colorSwatch: function colorSwitch(el, binding) {
  el.style.backgroundColor = binding.value
},

1.5 對象字面量

如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數能夠接受所有合法的 JavaScript 表達式。

Vue.directive("demo", function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

就差不多這樣吧，想看個實例的話就看一下我的另外一篇筆記《Vue 自定義指令實現點擊元素外觸發事件》吧

GPU云服務器云服務器自定義指令自定義指令實例大云軟件定義存儲支持的指令架構自定義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99412.html

每個人都能實現的vue自定義指令

摘要：指令綁定的前一個值，僅在和鉤子中可用。字符串形式的指令表達式。上一個虛擬節點在上可根據需要定義一些鉤子函數只調用一次，指令第一次綁定到元素時調用。指令的值可能發生了改變，也可能沒有。前文先來bb一堆廢話哈哈.. 用vue做項目也有一年多了.除了用別人的插件之外.自己也沒嘗試去封裝指令插件之類的東西來用. 剛好最近在項目中遇到一個問題.(快速點擊按鈕多次觸發多...

NickZhou 2019-08-21 18:23 評論0 收藏0
Vue 混合、自定義指令、插件

摘要：當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合自定義指令除了默認設置的核心指令和也允許注冊自定義指令。 vue的復用性與組合混合混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合 ...

whlong 2019-08-21 16:17 評論0 收藏0
使用vue自定義指令開發一個表單驗證插件validate.js

摘要：今天就來介紹一下如何利用的自定義指令來開發一個表單驗證插件的過程。按照這種方式就能夠使用自己開發的這個表單校驗插件。這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎組件我就直接自己開發了。今天就來介紹一下如何利用vue的自定義指令directive來開發一個表單驗證插件的過...

warnerwu 2019-05-23 17:26 評論0 收藏0
vue自定義指令升級2.0的坑

摘要：如今升級后，在自定義指令部分的全部變化了對于一個插件作者來說這簡直是崩潰的毫無兼容可言。本文我就講介紹下一個自定義指令從升級到所走的坑。吐槽我們知道，一個方法最重要的就是傳參，所以自定義指令最需要的也是這點。前言從1.0.X版本就開始使用vue了，應該也是vue很早的一批用戶。在我司使用vue這一年多以來（偏向移動端），我發現vue的插件真的是少之又少，這也是我當初一開始想寫v-...

jokester 2019-08-22 10:43 評論0 收藏0
vue 自定義指令

摘要：添加新指令只需在中加入模塊，并引入全局中通過綁定全部指令注冊指令業務組件中，加入指令名我們成功完成自定義指令的模塊化完整項目地址 vue 自定義指令篇對于vue的指令，有我們熟悉的v-model、v-show等，但我們也可以自己定義我們需要的指令，如比較常用的v-lazy懶加載官方詳細文檔：https://cn.vuejs.org/v2/guide...通過directive就可以在V...

geekzhou 2019-08-22 16:18 評論0 收藏0