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

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

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

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

內(nèi)置指令

指令名稱	描述	使用
v-model	綁定數(shù)據(jù)	<\input v-model="message">
v-text	輸出文本,不能解析標簽	<\p v-text="message">
v-html	輸出文本,可解析標簽	<\p v-html="message">/p>
v-once	只綁定一次數(shù)據(jù)	<\p v-once >{{message}}
v-bind	綁定屬性	<\img v-bind:src="imgurl"> 或 <\img :src="imgurl">
v-if	控制是否顯示容器值轉(zhuǎn)為布爾為false時注釋該容器，反之顯示	<\div v-if="true">
v-show	控制是否顯容器，改變的時display:none/block	<\div v-show="true">
v-for	循環(huán)遍歷數(shù)組、對象	<\li v-for="(val,key) in arr">{{val}}
v-cloak	在還沒有執(zhí)行到vue代碼的時候隱藏元素,可解決‘閃爍'問題	<\p v-cloak>{{message}}

自定義指令

在需要特殊功能時，使用自定義指令對 DOM 進行底層操作

注冊

自定義指令的注冊分為全局注冊和局部注冊，類似組件的注冊，只是方法名為 directive，寫法如下：

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

需要注意的是：Vue.directive( ) 注冊指令要在實例初始化 new Vue( ) 之前才能全局注冊指令。定義指令時駝峰式寫法會報錯，所以一般小寫。

指令選項

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

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

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

el：指令所綁定的元素，可以用來直接操作 DOM；
binding：包含指令信息的一個對象；
vnode：Vue 編譯的生成虛擬節(jié)點；
oldVnode：上一次的虛擬節(jié)點，僅在update和componentUpdated鉤子函數(shù)中可用。

示例

// 一個帶自定義指令的元素
MyDirective

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

控制臺輸出截圖：

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

其中對于 binding 對象輸出的屬性有：

rawName: "v-mytest:foo.m1.m2" // 自定義指令
name: "mytest" // 指令名稱
arg: "foo" // 指令的參數(shù)
modifiers: {m1: true, m2: true} // 指令的修飾符
expression: "1+1" // 指令綁定值的字符串形式
value: 2 // 指令的綁定值

v-bind || : 綁定屬性

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

基本用法

綁定單一的屬性值

鏈接

測試 data 如下：

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

元素渲染輸出：

鏈接

對象語法

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

當 isRed:true 時渲染輸出：

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

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

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

在 class 有多個條件時使用三元表達式比較繁瑣，可以在數(shù)組語法中使用對象語法：

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

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

對于在 HTML 元素上監(jiān)聽的事件，當 ViewModel 銷毀時，所有的事件處理器會自動刪除，無需自己清理。

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

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

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

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

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

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

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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