Vue 自定義指令

you_De 發(fā)布于2019-08-23 13:42 / 2163人閱讀

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

前言最近搞了畢設(shè)，需要實(shí)現(xiàn)一個(gè)場(chǎng)景，點(diǎn)擊一塊區(qū)域，彈出一個(gè)編輯區(qū)域，點(diǎn)擊頁面的其他地方的時(shí)候，這個(gè)編輯區(qū)域就隱藏，本想想之前寫模態(tài)框一樣寫個(gè)方法的時(shí)候，突然

覺得可以嘗試用 vue 相關(guān)的東西優(yōu)雅的解決這個(gè)事情，然后就學(xué)了下面的自定義指令了。

1 Vue 自定義指令 1.1 定義

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

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

1.2 基礎(chǔ)實(shí)現(xiàn)

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

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

要是你只是想定義一個(gè)局部的指令在某個(gè)組件內(nèi)部用的話，那么就在相應(yīng)的組件內(nèi)定義了

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

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

1.2 鉤子函數(shù)

當(dāng)然這個(gè)自定義指令不會(huì)就這么一點(diǎn)東西啦，為了解決一些現(xiàn)實(shí)中場(chǎng)景，Vue 給我們一堆鉤子函數(shù)用來實(shí)現(xiàn)我們的一些騷操作。具體如下 (均為可選)：

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

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

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

unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

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

當(dāng)然要想好好用用這寫鉤子函數(shù)，就要懂得用下面的這些參數(shù)

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

指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：

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

binding：一個(gè)對(duì)象，包含以下屬性：

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

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

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

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

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

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

vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來了解更多詳情。

oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

然后官網(wǎng)有話說

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

然后下面我們給一個(gè)簡(jiǎn)單的例子

// 在組件內(nèi)部定義一個(gè)局部指令
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(", ")}`
    }
  }
}
 // 綁定到組件中的一個(gè) div 中

然后我們?cè)诰W(wǎng)頁中就可以看到這么一堆文字了(當(dāng)然下面的注釋是我自己寫的)

name: "demo" 
// 指定名稱
value: "Welcome to Your Vue.js App" 
// 指令綁定值
expression: "message" 
// 字符串形式的指令表達(dá)式
argument: "foo" 
// 傳給指令的參數(shù)
modifiers: {"a":true,"b":true} 
// 修飾符的對(duì)象
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 編譯生成的虛擬節(jié)點(diǎn)

1.4 函數(shù)簡(jiǎn)寫

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

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

1.5 對(duì)象字面量

如果指令需要多個(gè)值，可以傳入一個(gè) JavaScript 對(duì)象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達(dá)式。

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

就差不多這樣吧，想看個(gè)實(shí)例的話就看一下我的另外一篇筆記《Vue 自定義指令實(shí)現(xiàn)點(diǎn)擊元素外觸發(fā)事件》吧

GPU云服務(wù)器云服務(wù)器自定義指令自定義指令實(shí)例大云軟件定義存儲(chǔ)支持的指令架構(gòu) 自定義

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99412.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

you_De

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

bazel編譯tensorflow

閱讀 1696·2023-04-26 01:54
酷銳云：國(guó)慶特惠，香港美國(guó)10M帶寬，月付19元，香港美國(guó)CN2GIA，月付27元起

閱讀 1704·2021-09-30 09:55
虛擬主機(jī)被攻擊怎么辦-服務(wù)器被黑客攻擊怎么辦？

閱讀 2721·2021-09-22 16:05
快快云-海外優(yōu)質(zhì)服務(wù)器商家！香港沙田CN2、美國(guó)Cera大寬帶、日本CN2均為三網(wǎng)直連CN2 GIA

閱讀 1955·2021-07-25 21:37
CSS實(shí)現(xiàn)模擬float: center文字左右環(huán)繞圖片的效果

閱讀 2697·2019-08-29 18:45
前端每日實(shí)戰(zhàn)：136# 視頻演示如何用 D3 和 GSAP 創(chuàng)作一個(gè)橫條 loader

閱讀 1951·2019-08-29 16:44
前端空間 - 收藏集 - 掘金

閱讀 1954·2019-08-29 12:34
實(shí)現(xiàn)菜單下拉伸展折疊效果demo

閱讀 1413·2019-08-23 14:02

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

Vue 自定義指令

相關(guān)文章

**每個(gè)人都能實(shí)現(xiàn)的vue自定義指令**

Vue 混合、自定義指令、插件

**使用vue自定義指令開發(fā)一個(gè)表單驗(yàn)證插件validate.js**