重慶分公司
重慶分公司
Vue如何自定義指令回顧v-內(nèi)置指令-創(chuàng)新互聯(lián)
這篇文章主要介紹了Vue如何自定義指令回顧v-內(nèi)置指令，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
遂川ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為
成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
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。通過了解如何去自定義指令，可以想象內(nèi)置指令是如何完成的。
內(nèi)置指令
| 指令名稱 | 描述 | 使用 |
|---|
| v-model | 綁定數(shù)據(jù) | <\input v-model="message"> |
| v-text | 輸出文本,不能解析標(biāo)簽 | <\p v-text="message"> |
| v-html | 輸出文本,可解析標(biāo)簽 | <\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時(shí) 注釋該容器，反之顯示 | <\div v-if="true"> |
| v-show | 控制是否顯容器，改變的時(shí)display:none/block | <\div v-show="true"> |
| v-for | 循環(huán)遍歷數(shù)組、對(duì)象 | <\li v-for="(val,key) in arr">{{val}} |
| v-cloak | 在還沒有執(zhí)行到vue代碼的時(shí)候隱藏元素,可解決‘閃爍'問題 | <\p v-cloak>{{message}} |
自定義指令
在需要特殊功能時(shí)，使用自定義指令對(duì) DOM 進(jìn)行底層操作
注冊(cè)
自定義指令的注冊(cè)分為全局注冊(cè)和局部注冊(cè)，類似組件的注冊(cè)，只是方法名為 directive，寫法如下：
// 全局注冊(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í)駝峰式寫法會(huì)報(bào)錯(cuò)，所以一般小寫。
指令選項(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ù)可用：
el：指令所綁定的元素，可以用來直接操作 DOM；
binding：包含指令信息的一個(gè)對(duì)象；
vnode：Vue 編譯的生成虛擬節(jié)點(diǎn)；
oldVnode：上一次的虛擬節(jié)點(diǎn)，僅在update和componentUpdated鉤子函數(shù)中可用。
示例
// 一個(gè)帶自定義指令的元素
MyDirective
// 部分 JS 代碼
export default {
directives:{
mytest: {
bind: function (el, binding, vnode) {
console.log(el)
console.log(binding)
console.log(vnode)
}
}
}
}
控制臺(tái)輸出截圖：
其中對(duì)于 binding 對(duì)象輸出的屬性有：
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 用于動(dòng)態(tài)更新 HTML 元素屬性，使用 v-bind:someAttr = "someData"或者語法糖 :someAttr = "someData"就可以在 someData 改變時(shí)更新綁定的 someAttr 屬性。
基本用法
綁定單一的屬性值
鏈接
測試 data 如下：
// js
data : {
url: 'https://www.baidu.com/',
linkID : 'myid'
}元素渲染輸出：
鏈接
對(duì)象語法
v-bind 最常用的是綁定 class 或 style 屬性來動(dòng)態(tài)改變樣式。例如可以給 :class 設(shè)置一個(gè)對(duì)象來動(dòng)態(tài)切換 class 的值：
當(dāng) isRed:true 時(shí)渲染輸出：
對(duì)象中可以傳入多個(gè)屬性值來動(dòng)態(tài)切換 class：
當(dāng) isA、isB 變化時(shí) classA、classB 會(huì)動(dòng)態(tài)更新，當(dāng)都為 true 時(shí)顯然渲染結(jié)果為：
同理對(duì)于 style 可以傳入對(duì)象屬性，并且可以使用字符串拼接：
對(duì)于元素中的各個(gè)對(duì)象可以統(tǒng)一用 v-bind 綁定：
數(shù)組語法
class 可以傳入多值，給 :class 綁定一個(gè)數(shù)組就可以使用 class 列表
例如當(dāng) {activeA: 'class1', activeB: 'class2'} 時(shí)渲染結(jié)果為：
還可以在數(shù)組語法中使用三元表達(dá)式切換 class，例如：
在 class 有多個(gè)條件時(shí)使用三元表達(dá)式比較繁瑣，可以在數(shù)組語法中使用對(duì)象語法：
修飾符
v-bind 的修飾符很少，API 中只提供.prop、.camel和.sync，并且多用于組件，使用方式示例：
v-on || @ 監(jiān)聽事件
v-on 用于動(dòng)態(tài)綁定事件監(jiān)聽器，使用 v-on:someEvent = "someFunction"或者語法糖 @someEvent = "someFunction"就可以監(jiān)聽 someEvent 進(jìn)行交互。
基本用法
@someEvent 調(diào)用的方法名后面可以不跟（），例如：
鏈接
change button
可以在 methods 中添加函數(shù)：
// 部分 JS 代碼
methods :{
changeFun : function () {
this.linkID = 'changeID' // 指向當(dāng)前組件本身
}
}點(diǎn)擊 button 按鈕后 a 元素的 id 改變：
鏈接
當(dāng)然 v-on 還可以使用對(duì)象語法監(jiān)聽多個(gè)事件：
對(duì)于在 HTML 元素上監(jiān)聽的事件，當(dāng) ViewModel 銷毀時(shí)，所有的事件處理器會(huì)自動(dòng)刪除，無需自己清理。
修飾符
Vue 可以將原生事件對(duì)象參數(shù) event 傳入事件方法中，并提供了特殊變量$event用來訪問元素 DOM 事件。此外可以通過一些事件修飾符來實(shí)現(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、v-show 條件渲染
條件渲染 v-if 根據(jù)表達(dá)式的值的真假條件渲染元素，在表達(dá)式為真時(shí)渲染，為假時(shí)移除。
當(dāng) status 為 1 時(shí)顯示此行
當(dāng) status 為 2 時(shí)顯示此行
其它情況默認(rèn)顯示此行
v-show 也是條件渲染，但只切換元素的 CSS 屬性 display，無論條件真假都會(huì)被編譯，相比于 v-if 更適用于頻繁切換場景。
當(dāng) status 為 1 時(shí)顯示此行
當(dāng) data: {status: 2} 時(shí)隱藏，但依舊會(huì)被編譯，渲染結(jié)果為：
當(dāng) status 為 1 時(shí)顯示此行
顯然在 Vue.js 內(nèi)置的 元素上可以使用 v-if，但不能使用 v-show，可以思考下為什么。
v-for 列表渲染
列表渲染指令 v-for 常用于數(shù)組遍歷或枚舉一個(gè)對(duì)象的循環(huán)顯示，必須結(jié)合 in 使用特定語法 alias in expression 為當(dāng)前遍歷的元素提供別名：
{{ item.text }}
{{ index }} - {{ item.text }}
{{ value }}
{{ key }}: {{ value }}
{{ index }}. {{ key }}: {{ value }}
可以用 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è)特殊的語法糖，其實(shí)實(shí)現(xiàn)的數(shù)據(jù)雙向綁定也可用v-bind和v-on實(shí)現(xiàn)，但v-model在不同表單上會(huì)有更加智能的處理。
文本框
經(jīng)典的使用案例是對(duì)、
Message is: {{ message }}
動(dòng)態(tài)選擇
對(duì)于單選按鈕，復(fù)選框及選擇框的選項(xiàng)，v-model配合 Vue 實(shí)例的數(shù)據(jù)作為value屬性值實(shí)現(xiàn)不同效果，即會(huì)忽略所有表單元素的 value、checked、selected 特性的值。
One
Two
Picked: {{ picked }}
Jack
John
Checked: {{ checkedNames }}
修飾符
v-model的修飾符的使用限制在、
