摘要:自定義指令自定義指令如果需要多個值,自定義指令可以傳入一個對象字面量。總結(jié)在編寫自定義指令時,給綁定一次性事件等初始動作,建議在鉤子內(nèi)完成,同時要在內(nèi)解除相關(guān)綁定。
學習筆記:自定義指令自定義指令
自定義指令的注冊方法分為全局注冊和局部注冊,比如注冊一個v-focus指令,用于在、元素初始化時自動獲得焦點,兩種寫法分別是:
//全局注冊 Vue.directive("focus", {}); //局部注冊 new Vue({ el: "#app", directives: { focus: {} } });
自定義指令的選項是由幾個鉤子函數(shù)組成,每個都是可選的:
bind:只調(diào)用一次,指令第一次綁定到元素時調(diào)用,用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作。
inserted:被綁定元素插入父節(jié)點時調(diào)用(父節(jié)點存在即可調(diào)用,不必存在于document中)。
update:被綁定元素所在的模板更新時調(diào)用,而不論綁定值是否變化。通過比較更新前后的綁定值,可以忽略不必要的模板更新。
componentUpdate:被綁定元素所在模板完成一次更新周期時調(diào)用。
unbind:只調(diào)用一次,指令與元素解綁時調(diào)用。
可以根據(jù)需求在不同的鉤子函數(shù)內(nèi)完成邏輯代碼。在元素插入父節(jié)點時就調(diào)用,用到的最好是inserted。
Vue.directive("focus", { inserted(el) { el.focus(); } }); new Vue({ el: "#app", });
打開頁面,input輸入框自動獲得焦點,成為可輸入狀態(tài)。
每個鉤子函數(shù)都有幾個參數(shù)可用:
el 指令所綁定的元素,可以用來直接操作DOM
binding 一個對象,包含以下屬性:
name 指令名,不包括v-前綴
value 指令的綁定值
oldValue 指令綁定的前一個值,僅在update和componentUpdate鉤子中可用。無論值是否改變都可用。
expression 綁定值的字符串形式。
arg 傳給指令的參數(shù)。
modifiers 一個包含修飾符的對象。
vnode Vue編譯生成的虛擬節(jié)點。
oldVnode 上一個虛擬節(jié)點僅在update和componentUpdate鉤子中可用。
See the Pen Vue-自定義指令 by whjin (@whjin) on CodePen.
Time.getFormatTime()方法就是自定義指令v-time所需要的,入?yún)楹撩爰墪r間戳,返回已經(jīng)整理好時間格式的字符串。
在bind鉤子里,將指令v-time表達式的值binding.value作為參數(shù)傳入TimeFormatTime()方法得到格式化時間,再通過el.innerHTML寫入指令所在元素。定時器el.__timeout__每分鐘觸發(fā)一次,更新時間,并且在unbind鉤子里清除掉。
總結(jié):在編寫自定義指令時,給DOM綁定一次性事件等初始動作,建議在bind鉤子內(nèi)完成,同時要在unbind內(nèi)解除相關(guān)綁定。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102636.html
摘要:供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下,我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程,稱為生命周期,共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...
摘要:供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下,我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程,稱為生命周期,共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...
摘要:供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數(shù)情況下,我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創(chuàng)建到銷毀的過程,稱為生命周期,共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...
摘要:當組件和混合對象含有同名選項時,這些選項將以恰當?shù)姆绞交旌献远x指令除了默認設(shè)置的核心指令和也允許注冊自定義指令。 vue的復用性與組合 混合 混合 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時,所有混合對象的選項將被混入該組件本身的選項。 當組件和混合對象含有同名選項時,這些選項將以恰當?shù)姆绞交旌? ...
閱讀 3241·2021-11-24 10:43
閱讀 4203·2021-11-24 10:33
閱讀 3781·2021-11-22 09:34
閱讀 2131·2021-10-11 10:58
閱讀 3748·2021-10-11 10:58
閱讀 863·2021-09-27 13:36
閱讀 3583·2019-08-30 15:54
閱讀 2972·2019-08-29 18:41