1. 自定義全局指令
語法示例
下邊定義了一個 名為
v-指令名的自定義指令
Vue.directive('指令名', {操作})
全局指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>頁面載入時晾咪，input 元素自動獲取焦點(diǎn)：</p>
<input v-focus>
</div>
<script>
// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
// 當(dāng)綁定元素插入到 DOM 中收擦。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 創(chuàng)建根實(shí)例
new Vue({
el: '#app'
})
</script>
</body>
</html>
2. 自定義局部指令
語法示例
new Vue({
el: '#app',
directives: {
指令名: {操作}
}
})
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>頁面載入時，input 元素自動獲取焦點(diǎn)：</p>
<input v-focus>
</div>
<script>
// 創(chuàng)建根實(shí)例
new Vue({
el: '#app',
directives: {
// 注冊一個局部的自定義指令 v-focus
focus: {
// 指令的定義
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
</body>
</html>
3. 鉤子
3.1 鉤子函數(shù)
指令定義函數(shù)提供了幾個鉤子函數(shù)（可選）：
bind:
只調(diào)用一次谍倦，指令第一次綁定到元素時調(diào)用塞赂，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作。inserted:
被綁定元素插入父節(jié)點(diǎn)時調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用昼蛀，不必存在于 document 中）宴猾。update:
被綁定元素所在的模板更新時調(diào)用，而不論綁定值是否變化叼旋。通過比較更新前后的綁定值仇哆，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）。componentUpdated:
被綁定元素所在模板完成一次更新周期時調(diào)用夫植。unbind:
只調(diào)用一次讹剔， 指令與元素解綁時調(diào)用。
3.2 參數(shù)
-
el:
指令所綁定的元素，可以用來直接操作 DOM 辟拷。 -
binding: 一個對象撞羽，包含以下屬性：
name:
指令名，不包括 v- 前綴衫冻。value:
指令的綁定值诀紊， 例如： v-my-directive="1 + 1", value 的值是 2。oldValue:
指令綁定的前一個值隅俘，僅在 update 和 componentUpdated 鉤子中可用邻奠。無論值是否改變都可用。expression:
綁定值的表達(dá)式或變量名为居。 例如 v-my-directive="1 + 1" 碌宴， expression 的值是 "1 + 1"。arg:
傳給指令的參數(shù)蒙畴。例如 v-my-directive:foo贰镣， arg 的值是 "foo"。modifiers:
一個包含修飾符的對象膳凝。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }碑隆。
-
vnode:
Vue 編譯生成的虛擬節(jié)點(diǎn)。 -
oldVnode:
上一個虛擬節(jié)點(diǎn)蹬音，僅在 update 和 componentUpdated 鉤子中可用上煤。
3.3 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" v-xishu:hello.a.b="message">
</div>
<script>
Vue.directive('xishu', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#app',
data: {
message: '只是一個信息'
}
})
</script>
</body>
</html>
- 結(jié)果輸出
name: "xishu"
value: "只是一個信息"
expression: "message"
argument: "hello"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce
4. 簡寫函數(shù)
語法示例
Vue.directive('xiShu', function (el, binding) {
//簡寫函數(shù)
el.innerHTML = binding.value.text
})
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-xiShu="{ color: 'yellow', text: '重要通知!',backgroundColor: 'red' }"></div>
</div>
<script>
Vue.directive('xiShu', function (el, binding) {
el.innerHTML = binding.value.text
el.style.backgroundColor = binding.value.backgroundColor
el.style.color = binding.value.color
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
說明；
- directive 定義了一個自定義指令
v-xiShu著淆，需要 el和binding兩個參數(shù)劫狠。- 在 < div > 中定義
binding.value的一些屬性：color,text,backgroundColor
- 結(jié)果顯示
image.png
image.png
