指令

關(guān)于指令的使用:

??????指令 (Directives) 是帶有 v- 前綴的特殊 attribute。
??????指令 attribute 的值預(yù)期是單個 JavaScript 表達(dá)式 (v-for 是例外情況)。
??????指令的職責(zé)是,當(dāng)表達(dá)式的值改變時,將其產(chǎn)生的連帶影響,響應(yīng)式地作用于 DOM。

??????指令可以接收參數(shù),用冒號連接,如:v-bind:href、v-on:click
??????參數(shù)也可是動態(tài)的,格式如v-bind[attributeName],所以v-bind:['href']等價于v-bind:href。

??????動態(tài)參數(shù)給入的參數(shù)值應(yīng)當(dāng)是String,如果給入null,可以用來移除綁定。給入其它類型的值都會報警告。
??????動態(tài)參數(shù)表達(dá)式有語法約束(具體得試試,它說表達(dá)式出現(xiàn)空格和引號會無效。。。而用計算屬性替代復(fù)雜表達(dá)式就行。。。感覺還不是很理解)

??????文檔提醒:“在 DOM 中使用模板時 (直接在一個 HTML 文件里撰寫模板),還需要避免使用大寫字符來命名鍵名,因為瀏覽器會把 attribute 名全部強制轉(zhuǎn)為小寫?!?br> ??????(發(fā)現(xiàn)自己沒注意過怎么樣直接在HTML文件里撰寫模板。)

??????指令可以有修飾符,用點號連接,用于指出一個指令應(yīng)該以特殊方式綁定。

??????v-on和v-bind有簡寫,這個平時開發(fā)中經(jīng)常用,就不多說了。


關(guān)于指令的定義:

??????Vue2.0中,代碼復(fù)用和抽象的主要形式是組件,但有時候仍然需要對普通DOM元素進行底層操作,此時就需要自定義指令。

??????定義Vue組件時,directives選項表示該組件實例可用哪些指令。
??????如果想注冊全局指令,可以用Vue.directive方法。

??????那么不管是全局注冊還是局部注冊,怎么定義指令內(nèi)容?
??????一個指令對象可以提供以下鉤子函數(shù):
??????bind 指令第一次綁定到元素時調(diào)用
??????inserted 被綁定元素插入父節(jié)點時調(diào)用(此時不一定已被插入dom中,只能保證父節(jié)點已存在)
??????update 所在組件的VNode更新時調(diào)用,但是可能發(fā)生在其子VNode更新之前。指令的值可能發(fā)生了改變,也可能沒有。
??????componentUpdated 指令所在組件的VNode及其子VNode全部更新后調(diào)用
??????unbind 只調(diào)用一次,指令與元素解綁時調(diào)用

??????這些鉤子函數(shù)接收參數(shù): el、binding、vnode、oldVnode。
??????除el外,其它參數(shù)都應(yīng)該只讀,注意不要對它們做改動。

??????鉤子簡寫:
??????如果只想在bind和update時觸發(fā)相同的行為,而不關(guān)心其它鉤子,可以寫成這樣:
??????Vue.directive('指令名', 回調(diào)函數(shù))



我自己的思與惑:

??????什么是指令?
??????一種長得像dom attribute,但實際上是對VNode做一些處理的Vue語法。

??????怎么對VNode進行處理?
??????寫一些鉤子回調(diào),在Vue提供的一些時刻——我把它按兩類來理解——特殊的時刻(bind、inserted、unbind)和更新的時刻(update、componentUpdated)做一些處理邏輯,并且鉤子函數(shù)會接收到參數(shù),基本上這個VNode、這個VNode所在組件、指令本身的信息都能拿到。

??????怎么理解這些鉤子?比如說一個自定義指令v-mydirective="val",當(dāng)VNode所在組件提供的val值變化,會觸發(fā)什么鉤子?bind?update?兩者都會觸發(fā)?
??????試驗后發(fā)現(xiàn),頁面加載后,bind和inserted觸發(fā)。指令所在組件的任意數(shù)據(jù)導(dǎo)致組件需要更新dom,會觸發(fā)update和componentUpdated。

??????為什么Vue提供的簡寫是觸發(fā)bind和update的,并且是忽略其它鉤子的?是否可以理解為這些鉤子中bind和update會最實用,其它鉤子較少用?能不能舉一些場景來說明?
??????暫無法回答

??????指令v-on和v-bind干的是什么事?假設(shè)它們也是自定義指令,那么它們的代碼內(nèi)容大概是??
??????v-bind大概是在update的時候,對傳入鉤子的VNode做數(shù)據(jù)更新,比如有個input虛擬節(jié)點,寫了v-bind:value=xxx,update鉤子里就去更新它的value。
??????自定義組件上加v-bind指令的話,會做什么操作???我去看了下Vue提供的VNode API,VNode有一條屬性context: Component | void; // rendered in this component's scope,好像可以根據(jù)這個判斷,如果context不為空,就更新那個component的prop。
??????v-on就更難猜了,我并不知道Vue怎么處理原生事件和組件的自定義事件?,F(xiàn)在只能瞎猜一下,深入了解才能知道Vue內(nèi)置指令都干了什么。

??????感覺雖然讀了指令相關(guān)文檔,但是對指令的用法還是不太能get。主要是這個自定義指令,鉤子函數(shù)給入的參數(shù)就是dom元素和VNode,所以想玩指令肯定就得了解VNode,而我不了解VNode??磥?,僅僅了解了指令本身那點API,是玩不動指令的。還得搭配上對Vue的更深入的了解。

??????我猜指令的意義是為了能復(fù)用一些dom操作的代碼,就像element里的v-loading,許多個不同的組件、不同的VNode如果都需要相同的dom操作,就可以提出來成為指令。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容