vue指令以及dom操作詳解
“AngularJS 通過(guò)被稱為 指令 的新屬性來(lái)擴(kuò)展 HTML。AngularJS 通過(guò)內(nèi)置的指令來(lái)為應(yīng)用添加功能。AngularJS 允許你自定義指令?!?/p>
這是我最初接觸“指令”這個(gè)詞。還記得那時(shí)候,ng大行其道的時(shí)候,我特別好奇怎么給一個(gè)div加一個(gè)"ng-app" 就能解決這么多問(wèn)題。
后來(lái)隨著前端工作的深入,我用了jq的data-attr并且學(xué)會(huì)了jq的插件使用。但,這這并不能讓我把它“指令”聯(lián)想到一塊,后來(lái)插件需要給節(jié)點(diǎn)加個(gè)標(biāo)示來(lái)顯示某種“狀態(tài)管理” 我用了class 例如:pending,loading-end.
但是感覺和樣式混在一塊總是感覺不自在,后來(lái)我直接添加一個(gè)自定義標(biāo)簽 例如:attr-pending,attr-loading-end,通過(guò)dom上的自定義標(biāo)簽來(lái)標(biāo)示某個(gè)狀態(tài)是否完成。
在這個(gè)時(shí)候,發(fā)現(xiàn)"attr-pending,attr-loading-end"與“ng-app,ng-html”什么的非常類似,才恍然大悟,其實(shí)“指令”也可以理解為"標(biāo)識(shí)",而具體的邏輯與它無(wú)關(guān),它只是一個(gè)“標(biāo)識(shí)”罷了。至于,ng-repeat,ng-click 同樣可以理解某個(gè)程序在dom上一個(gè)“標(biāo)識(shí)” 程序通過(guò)它來(lái)掛載某個(gè)功能。
現(xiàn)在接觸了vue,vue比ng在開發(fā)上來(lái)說(shuō)代碼量很明顯少了很多,“指令”一般開發(fā)人員不需要自己來(lái)實(shí)現(xiàn)。但是如果是開發(fā)一套u(yù)i交互的組件,還是很需要它。
bind: 僅調(diào)用一次,當(dāng)指令第一次綁定元素的時(shí)候。
update: 第一次是緊跟在 bind 之后調(diào)用,獲得的參數(shù)是綁定的初始值;以后每當(dāng)綁定的值發(fā)生變化就會(huì)被調(diào)用,獲得新值與舊值兩個(gè)參數(shù)。
unbind:僅調(diào)用一次,當(dāng)指令解綁元素的時(shí)候。
1.指令的注冊(cè)
指令跟組件一樣需要注冊(cè)才能使用,同樣有兩種方式,一種是全局注冊(cè):
Vue.directive('dirName',function(){ //定義指令 }); 另外一種是局部注冊(cè): new Vue({ directives:{ dirName:{ //定義指令 } } });
2.可在指令函數(shù)配置中直接修改DOM[支持?jǐn)?shù)據(jù)驅(qū)動(dòng)] input里面的值修改的時(shí)候#demo里面的vue也會(huì)自動(dòng)同步
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> </head> <body> <div> <p>展示vue指令----vue和元素dom操作的完美結(jié)合【拓展】</p> <p>{{msg}}</p> <input type="text" v-model="msg"> </div> <div id="demo" v-demo-directive="LightSlateGray : msg"></div> <script> Vue.directive('demoDirective', { bind: function () { this.el.style.color = '#fff' this.el.style.backgroundColor = this.arg }, update: function (value) { this.el.innerHTML = 'name - ' + this.name + '<br>' + 'raw - ' + this.raw + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'value - ' + value } }); var demo = new Vue({ el: 'body', data: { msg: 'hello!' } }) </script> </body> </html>
官網(wǎng)鏈接: http://v1-cn.vuejs.org/guide/custom-directive.html
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue?this.$refs.xxx報(bào)錯(cuò)undefined問(wèn)題及解決
這篇文章主要介紹了vue?this.$refs.xxx報(bào)錯(cuò)undefined問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue動(dòng)態(tài)添加行/刪除行的完整代碼示例
在開發(fā)中我們常常會(huì)碰到這種業(yè)務(wù),有一些數(shù)據(jù)需要在前端進(jìn)行刪除,這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)添加行/刪除行的相關(guān)資料,需要的朋友可以參考下2024-02-02詳解Vue3.0 前的 TypeScript 最佳入門實(shí)踐
這篇文章主要介紹了詳解Vue3.0 前的 TypeScript 最佳入門實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決
這篇文章主要介紹了在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01關(guān)于怎么在vue項(xiàng)目里寫react詳情
本篇文章是在vue項(xiàng)目里寫tsx的一篇介紹。其實(shí)vue里面寫jsx也挺有意思的,接下來(lái)小編九給大家詳細(xì)介紹吧,感興趣的小伙伴請(qǐng)參考下面的文章內(nèi)容2021-09-09淺談在Vue.js中如何實(shí)現(xiàn)時(shí)間轉(zhuǎn)換指令
這篇文章主要介紹了淺談在Vue.js中如何實(shí)現(xiàn)時(shí)間轉(zhuǎn)換指令,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01vue3基礎(chǔ)組件開發(fā)detePicker日期選擇組件示例
這篇文章主要為大家介紹了vue3基礎(chǔ)組件開發(fā)-detePicker(日期選擇組件)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03vue插件v-touch的坑及解決(不能上下滑動(dòng))
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動(dòng)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03