Vue如何自定義指令回顧v-內(nèi)置指令

這篇文章主要介紹了Vue如何自定義指令回顧v-內(nèi)置指令，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Vue.js 的各種指令（Directives）更加方便我們?nèi)?shù)據(jù)驅(qū)動(dòng) DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等內(nèi)置指令，這些指令的職責(zé)就是當(dāng)表達(dá)式改變時(shí)將某些行為應(yīng)用到 DOM 上，盡量不去操作增刪改 DOM。通過(guò)了解如何去自定義指令，可以想象內(nèi)置指令是如何完成的。

內(nèi)置指令

自定義指令

在需要特殊功能時(shí)，使用自定義指令對(duì) DOM 進(jìn)行底層操作

注冊(cè)

自定義指令的注冊(cè)分為全局注冊(cè)和局部注冊(cè)，類(lèi)似組件的注冊(cè)，只是方法名為 directive，寫(xiě)法如下：

// 全局注冊(cè) 自定義指令
Vue.directive(‘mydir',{
  // 指令選項(xiàng)
});
// 全局注冊(cè) 自定義指令函數(shù)
Vue.directive('mydir', function () {
 // 這里將會(huì)被 `bind` 和 `update` 調(diào)用
})
// 局部注冊(cè)（只針對(duì)組件內(nèi)元素）
export default {
  directives: {
    mydir: {
      // 指令選項(xiàng)
    }
  }
}

需要注意的是：Vue.directive( ) 注冊(cè)指令要在實(shí)例初始化 new Vue( ) 之前才能全局注冊(cè)指令。定義指令時(shí)駝峰式寫(xiě)法會(huì)報(bào)錯(cuò)，所以一般小寫(xiě)。

指令選項(xiàng)

自定義指令的選項(xiàng)是由幾個(gè)鉤子函數(shù)（可選）組成，可以根據(jù)需求選擇不同的鉤子，例如使用全局注冊(cè)一個(gè)指令時(shí)：

Vue.directive('mydir', {
 bind: function () {
  // 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用于在綁定元素時(shí)執(zhí)行一次的初始化動(dòng)作。
  },
 update: function () {
  // 第一次是緊跟在 bind 之后調(diào)用，獲得的參數(shù)是綁定的初始值，
  // 之后被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化，可以忽略不必要的模板更新。  
  }, 
 inserted: function () {
  // 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
  },
 componentUpdated: function () {
  // 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
  },
 unbind: function () {
  // 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。
  }
})

以上每個(gè)鉤子函數(shù)都有幾個(gè)參數(shù)可用：

1. el：指令所綁定的元素，可以用來(lái)直接操作 DOM；

2. binding：包含指令信息的一個(gè)對(duì)象；

3. vnode：Vue 編譯的生成虛擬節(jié)點(diǎn)；

4. oldVnode：上一次的虛擬節(jié)點(diǎn)，僅在update和componentUpdated鉤子函數(shù)中可用。

示例

// 一個(gè)帶自定義指令的元素
<div v-mytest:foo.m1.m2="1+1">MyDirective</div>

// 部分 JS 代碼
export default {
  directives:{
   mytest: {
    bind: function (el, binding, vnode) {
     console.log(el)
     console.log(binding)
     console.log(vnode)
    }
   }
  }
}

控制臺(tái)輸出截圖：

其中對(duì)于 binding 對(duì)象輸出的屬性有：

1. rawName: "v-mytest:foo.m1.m2" // 自定義指令

2. name: "mytest" // 指令名稱(chēng)

3. arg: "foo" // 指令的參數(shù)

4. modifiers: {m1: true, m2: true} // 指令的修飾符

5. expression: "1+1" // 指令綁定值的字符串形式

6. value: 2 // 指令的綁定值

v-bind || : 綁定屬性

Vue 內(nèi)置指令 v-bind 用于動(dòng)態(tài)更新 HTML 元素屬性，使用 v-bind:someAttr = "someData"或者語(yǔ)法糖 :someAttr = "someData"就可以在 someData 改變時(shí)更新綁定的 someAttr 屬性。

基本用法

綁定單一的屬性值

<a :href="url" rel="external nofollow" rel="external nofollow" :id="linkID">鏈接</a>

測(cè)試 data 如下：

// js
data : {
  url: 'https://www.baidu.com/',
  linkID : 'myid'
}

元素渲染輸出：

<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" id="myid">鏈接</a>

對(duì)象語(yǔ)法

v-bind 最常用的是綁定 class 或 style 屬性來(lái)動(dòng)態(tài)改變樣式。例如可以給 :class 設(shè)置一個(gè)對(duì)象來(lái)動(dòng)態(tài)切換 class 的值：

<!-- class 綁定 -->
<div :class="{colorRed: isRed}"></div>

當(dāng) isRed:true 時(shí)渲染輸出：

<div class="colorRed"></div>

對(duì)象中可以傳入多個(gè)屬性值來(lái)動(dòng)態(tài)切換 class：

<!-- class 綁定，傳入多個(gè)屬性 -->
<div :class="{ classA: isA, classB: isB }">

當(dāng) isA、isB 變化時(shí) classA、classB 會(huì)動(dòng)態(tài)更新，當(dāng)都為 true 時(shí)顯然渲染結(jié)果為：

<div class="classA classB"></div>

同理對(duì)于 style 可以傳入對(duì)象屬性，并且可以使用字符串拼接：

<!-- style 綁定 -->
<div :></div>

對(duì)于元素中的各個(gè)對(duì)象可以統(tǒng)一用 v-bind 綁定：

<!-- 綁定一個(gè)有屬性的對(duì)象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

數(shù)組語(yǔ)法

class 可以傳入多值，給 :class 綁定一個(gè)數(shù)組就可以使用 class 列表

<div :class="[activeA, activeB]"></div>

例如當(dāng) {activeA: 'class1', activeB: 'class2'} 時(shí)渲染結(jié)果為：

<div class="class1 class2"></div>

還可以在數(shù)組語(yǔ)法中使用三元表達(dá)式切換 class，例如：

<div :class="[isA ? activeA : '', activeB]">

在 class 有多個(gè)條件時(shí)使用三元表達(dá)式比較繁瑣，可以在數(shù)組語(yǔ)法中使用對(duì)象語(yǔ)法：

<div :class="[{activeA: isA}, activeB]">

修飾符

v-bind 的修飾符很少，API 中只提供.prop、.camel和.sync，并且多用于組件，使用方式示例：

<!-- 通過(guò) prop 修飾符綁定 DOM 屬性 (property) -->
<div v-bind:text-content.prop="text"></div>

<!-- .camel 修飾符(2.1.0+)將 v-bind 屬性名稱(chēng) kebab-case 駝峰化為 camelCase -->
<svg :view-box.camel="viewBox"></svg>

<!-- .sync 修飾符(2.3.0+) 語(yǔ)法糖，會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的 v-on 偵聽(tīng)器-->
<text-document v-bind:title.sync="doc.title"></text-document>
<!-- 批量綁定，將 doc 對(duì)象中的每一個(gè)屬性 (如 title) 都作獨(dú)立的 prop ，各自添加 v-on 監(jiān)聽(tīng)器-->
<text-document v-bind.sync="doc"></text-document>

v-on || @ 監(jiān)聽(tīng)事件

v-on 用于動(dòng)態(tài)綁定事件監(jiān)聽(tīng)器，使用 v-on:someEvent = "someFunction"或者語(yǔ)法糖 @someEvent = "someFunction"就可以監(jiān)聽(tīng) someEvent 進(jìn)行交互。

基本用法

@someEvent 調(diào)用的方法名后面可以不跟（），例如：

<a :href="url" rel="external nofollow" rel="external nofollow" :id="linkID">鏈接</a>
<!-- 監(jiān)聽(tīng)一個(gè)事件 -->
<button @click="changeFun">change button</button>

可以在 methods 中添加函數(shù)：

// 部分 JS 代碼
methods :{
 changeFun : function () {
  this.linkID = 'changeID' // 指向當(dāng)前組件本身
 }
}

點(diǎn)擊 button 按鈕后 a 元素的 id 改變：

<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" id="changeID">鏈接</a>

當(dāng)然 v-on 還可以使用對(duì)象語(yǔ)法監(jiān)聽(tīng)多個(gè)事件：

<!-- v2.4.0+ -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

對(duì)于在 HTML 元素上監(jiān)聽(tīng)的事件，當(dāng) ViewModel 銷(xiāo)毀時(shí)，所有的事件處理器會(huì)自動(dòng)刪除，無(wú)需自己清理。

修飾符

Vue 可以將原生事件對(duì)象參數(shù) event 傳入事件方法中，并提供了特殊變量$event用來(lái)訪問(wèn)元素 DOM 事件。此外可以通過(guò)一些事件修飾符來(lái)實(shí)現(xiàn)特定的事件，如 .stop、.prevent、.capture、.once 等，常用的使用示例：

<!-- 停止單擊事件冒泡，調(diào)用 event.stopPropagation()-->
<button @click.stop="doThis"></button>

<!-- 阻止默認(rèn)行為，調(diào)用 event.preventDefault() -->
<button @submit.prevent="doThis"></button>

<!-- 添加事件偵聽(tīng)器時(shí)使用 capture 事件捕獲模式 -->
<button @click.capture="doThis"></button>

<!-- 點(diǎn)擊回調(diào)只會(huì)觸發(fā)一次 -->
<button @click.once="doThis"></button>

<!-- 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)(2.2.0) -->
<button @click.left="doThis"></button>

<!-- 串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>

此外，v-on 還提供按鍵修飾符來(lái)監(jiān)聽(tīng)鍵盤(pán)事件，鍵值為 .keyCode，常用有.entry、.delete、.tab、.esc、.space、.down等，如下：

<!-- 只有在 `keyCode` 是 5 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.5="submit">

<!-- 為重要的 keyCode 如 enter 提供別名-->
<input v-on:keyup.enter="submit">

<!-- 縮寫(xiě)語(yǔ)法 -->
<input @keyup.enter="submit">

此外還有系統(tǒng)修飾符監(jiān)聽(tīng)鍵盤(pán)事件，不同的系統(tǒng)其鍵盤(pán)/系統(tǒng)修飾符不一樣。這些按鍵修飾符可以任意組合使用。

v-if、v-show 條件渲染

條件渲染 v-if 根據(jù)表達(dá)式的值的真假條件渲染元素，在表達(dá)式為真時(shí)渲染，為假時(shí)移除。

<p v-if="status === 1">當(dāng) status 為 1 時(shí)顯示此行</p>

<p v-else-if="status === 1">當(dāng) status 為 2 時(shí)顯示此行</p>

<p v-else>其它情況默認(rèn)顯示此行</p>

v-show 也是條件渲染，但只切換元素的 CSS 屬性 display，無(wú)論條件真假都會(huì)被編譯，相比于 v-if 更適用于頻繁切換場(chǎng)景。

<p v-show="status === 1">當(dāng) status 為 1 時(shí)顯示此行</p>

當(dāng) data: {status: 2} 時(shí)隱藏，但依舊會(huì)被編譯，渲染結(jié)果為：

<p >當(dāng) status 為 1 時(shí)顯示此行</p>

顯然在 Vue.js 內(nèi)置的 <template> 元素上可以使用 v-if，但不能使用 v-show，可以思考下為什么。

v-for 列表渲染

列表渲染指令 v-for 常用于數(shù)組遍歷或枚舉一個(gè)對(duì)象的循環(huán)顯示，必須結(jié)合 in 使用特定語(yǔ)法 alias in expression 為當(dāng)前遍歷的元素提供別名：

<!-- 遍歷一個(gè)數(shù)組 -->
<div v-for="item in items">{{ item.text }}</div>

<!-- 提供第二個(gè)的參數(shù)為數(shù)組的索引 -->
<div v-for="(item, index) in items">{{ index }} - {{ item.text }}</div>

<!-- 遍歷對(duì)象屬性 -->
<div v-for="value in object">{{ value }}</div>

<!-- 提供第二個(gè)可選的參數(shù)：對(duì)象的鍵名 -->
<div v-for="(value, key) in object">{{ key }}: {{ value }}</div>

<!-- 提供第三個(gè)的可選參數(shù)：對(duì)象的索引 -->
<div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}</div>

可以用 of 替代 in 作為分隔符

當(dāng) v-for 和 v-if 在同一節(jié)點(diǎn)一起使用時(shí)，v-for 的優(yōu)先級(jí)比 v-if 更高。

v-model 表單控件雙向綁定

v-model 其實(shí)也是一個(gè)特殊的語(yǔ)法糖，其實(shí)實(shí)現(xiàn)的數(shù)據(jù)雙向綁定也可用v-bind和v-on實(shí)現(xiàn)，但v-model在不同表單上會(huì)有更加智能的處理。

文本框

經(jīng)典的使用案例是對(duì)<input>、<textarea>文本框的雙向數(shù)據(jù)綁定：

<!-- 輸入框 -->
<input type="text" v-model="message" placeholder="edit me">
<!-- 文本域 -->
<textarea v-model="message" placeholder="edit me"></textarea>
<!-- 實(shí)時(shí)更新 -->
<p>Message is: {{ message }}</p>

動(dòng)態(tài)選擇

對(duì)于單選按鈕，復(fù)選框及選擇框的選項(xiàng)，v-model配合 Vue 實(shí)例的數(shù)據(jù)作為value屬性值實(shí)現(xiàn)不同效果，即會(huì)忽略所有表單元素的 value、checked、selected 特性的值。

<!--單選按鈕的互斥效果-->
<div id="example-radio">
 <input type="radio" id="one" value="One" v-model="picked">
 <label for="one">One</label>
 
 <input type="radio" id="two" value="Two" v-model="picked">
 <label for="two">Two</label>
 
 <!-- picked 顯示的是 value 的值 -->
 <p>Picked: {{ picked }}</p>
</div>

<!--多選按鈕-->
<div id='example-checkbox'>
 <input type="checkbox" id="one" value="One" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="two" value="Two" v-model="checkedNames">
 <label for="john">John</label>

  <!-- Checked 顯示的是 value 組成的數(shù)組 -->
 <p>Checked: {{ checkedNames }}</p>
</div>

修飾符

v-model的修飾符的使用限制在<input>、<select>、<textarea> 和組件。

1. .lazy - 取代 input 監(jiān)聽(tīng) change 事件

2. .number - 輸入字符串轉(zhuǎn)為數(shù)字

3. .trim - 輸入首尾空格過(guò)濾

v-pre、v-cloak、v-once

這三個(gè)指令的共同點(diǎn)是無(wú)需表達(dá)式，用法如下：

<!-- 不顯示未編譯的標(biāo)簽直到實(shí)例初始化完 -->
<div v-cloak>{{ message }}</div>
<!-- 需要配合 CSS 隱藏樣式 [v-cloak]{ display: none;}-->

<!-- 只渲染一次，隨后的渲染將被視為靜態(tài)內(nèi)容并跳過(guò) -->
<div v-once>{{ message }}</div>

<!-- 不會(huì)被編譯，直接顯示顯示原始{{ }}標(biāo)簽 -->
<div v-pre>{{ message }}</div>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue如何自定義指令回顧v-內(nèi)置指令”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!