學(xué)習(xí)心得,
自定義指令,
直接上代碼了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--自定義指令-->
<!--簡(jiǎn)介-->
<!--除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)辑畦，Vue 也允許注冊(cè)自定義指令馅闽。注意，在 Vue2.0 中毅往，代碼復(fù)用和抽象的主要形式是組件。-->
<!--然而械馆，有的情況下师坎，你仍然需要對(duì)普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。-->
<!--舉個(gè)聚焦輸入框的例子畔勤，如下：-->
<!--當(dāng)頁(yè)面加載時(shí)蕾各，該元素將獲得焦點(diǎn) (注意：autofocus 在移動(dòng)版 Safari 上不工作)。-->
<!--事實(shí)上庆揪，只要你在打開(kāi)這個(gè)頁(yè)面后還沒(méi)點(diǎn)擊過(guò)任何內(nèi)容式曲，這個(gè)輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)。-->
<!--現(xiàn)在讓我們用指令來(lái)實(shí)現(xiàn)這個(gè)功能：-->
<script>
// // 注冊(cè)一個(gè)全局自定義指令 `v-focus`
// Vue.directive('focus', {
// // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
// inserted: function (el) {
// // 聚焦元素
// el.focus()
// }
// })
//// 如果想注冊(cè)局部指令缸榛，組件中也接受一個(gè) directives 的選項(xiàng)：
//directives: {
// focus: {
// // 指令的定義
// inserted: function (el) {
// el.focus()
// }
// }
//}
//// 然后你可以在模板中任何元素上使用新的 v-focus 屬性吝羞，如下：
//// <input v-focus>
</script>
<script>
// 鉤子函數(shù)
//
// 一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：
//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ā)生了改變找前，也可能沒(méi)有糟袁。
// 但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。
//componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用纸厉。
//unbind：只調(diào)用一次系吭，指令與元素解綁時(shí)調(diào)用。
//接下來(lái)我們來(lái)看一下鉤子函數(shù)的參數(shù) (即 el颗品、binding肯尺、vnode 和 oldVnode)。
</script>
<!--鉤子函數(shù)參數(shù)-->
<!--指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：-->
<!--el：指令所綁定的元素躯枢，可以用來(lái)直接操作 DOM 则吟。-->
<!--binding：一個(gè)對(duì)象，包含以下屬性：-->
<!--name：指令名锄蹂，不包括 v- 前綴氓仲。-->
<!--value：指令的綁定值，例如：v-my-directive="1 + 1" 中得糜，綁定值為 2敬扛。-->
<!--oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用朝抖。無(wú)論值是否改變都可用啥箭。-->
<!--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 來(lái)了解更多詳情鹏秋。-->
<!--oldVnode：上一個(gè)虛擬節(jié)點(diǎn)胧卤，僅在 update 和 componentUpdated 鉤子中可用。-->
<!--除了 el 之外拼岳，其它參數(shù)都應(yīng)該是只讀的，切勿進(jìn)行修改况芒。如果需要在鉤子之間共享數(shù)據(jù)惜纸，建議通過(guò)元素的 dataset 來(lái)進(jìn)行。-->
<!--這是一個(gè)使用了這些屬性的自定義鉤子樣例：-->
<div id="app-1" v-demo:foo.a.b="message"></div>
<hr>
<script>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
console.log(el);
console.log(binding);
console.log(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-1',
data: {
message: 'hello!'
}
})
</script>
<script>
// 函數(shù)簡(jiǎn)寫(xiě)
//
// 在很多時(shí)候绝骚，你可能想在 bind 和 update 時(shí)觸發(fā)相同行為耐版，而不關(guān)心其它的鉤子。比如這樣寫(xiě):
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
</script>
<!--對(duì)象字面量-->
<!--如果指令需要多個(gè)值压汪，可以傳入一個(gè) JavaScript 對(duì)象字面量粪牲。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達(dá)式止剖。-->
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<hr>
<script>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
</script>
</body>
</html>
