一讥蔽、什么是全局API
全局API并不在構(gòu)造器里，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內(nèi)置了一些全局API，比如我們今天要學(xué)習(xí)的指令Vue.directive泞歉。說的簡單些就是，在構(gòu)造器外部用Vue提供給我們的API函數(shù)來定義新的功能。
二腰耙、Vue.directive自定義指令
除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)榛丢，Vue 也允許注冊自定義指令。
三挺庞、自定義指令中傳遞的三個(gè)參數(shù)
- el: 指令所綁定的元素晰赞，可以用來直接操作DOM。
- binding: 一個(gè)對象挠阁，包含指令的很多信息宾肺。
- vnode: Vue編譯生成的虛擬節(jié)點(diǎn)溯饵。
Vue.directive('focus',function(el,binding,vnode){
el.style='color:'+binding.value;
});
四侵俗、自定義指令的生命周期
一個(gè)指令定義對象可以提供如下幾個(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ā)生了改變秩仆，也可能沒有码泛。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
- componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用澄耍。
- unbind：只調(diào)用一次噪珊，指令與元素解綁時(shí)調(diào)用。
五齐莲、鉤子函數(shù)的參數(shù)
指令鉤子函數(shù)會被傳入以下參數(shù)：
-
el：指令所綁定的元素痢站，可以用來直接操作 DOM 。 -
binding：一個(gè)對象选酗，包含以下屬性：-
name：指令名阵难，不包括v-前綴。 -
value：指令的綁定值芒填，例如：v-my-directive="1 + 1"中呜叫，綁定值為2菊匿。 -
oldValue：指令綁定的前一個(gè)值狼渊，僅在update和componentUpdated鉤子中可用燎窘。無論值是否改變都可用慢蜓。 -
expression：字符串形式的指令表達(dá)式谍椅。例如v-my-directive="1 + 1"中嫌佑，表達(dá)式為"1 + 1"冒冬。 -
arg：傳給指令的參數(shù)翘簇，可選。例如v-my-directive:foo中维蒙，參數(shù)為"foo"掰吕。 -
modifiers：一個(gè)包含修飾符的對象。例如：v-my-directive.foo.bar中颅痊，修飾符對象為{ foo: true, bar: true }殖熟。
-
-
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來了解更多詳情斑响。 -
oldVnode：上一個(gè)虛擬節(jié)點(diǎn)菱属，僅在update和componentUpdated鉤子中可用。
除了
el之外舰罚，其它參數(shù)都應(yīng)該是只讀的纽门，切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù)营罢，建議通過元素的 dataset來進(jìn)行赏陵。
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
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: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
image.png
今晚實(shí)在太累了，關(guān)于自定義指令饲漾，我覺得vue的官網(wǎng)已經(jīng)寫得很好了蝙搔，為了加深印象自己多寫一遍。加油考传，希望可以早點(diǎn)寫項(xiàng)目實(shí)戰(zhàn)
