2020-10-24
程序員節(jié)快樂(lè)哈洋腮!
因?yàn)橛邢喈?dāng)一部分內(nèi)容都是相互穿插的救赐,今天也就不寫那么多重復(fù)的Demo了谴古,直接寫一下對(duì)所學(xué)內(nèi)容的理解吧撞羽。
插值
關(guān)于插值這一塊其實(shí)也沒(méi)啥說(shuō)的,文本插值都是最熟悉不過(guò)的了,對(duì)于對(duì)象Data中的值,在HTML中直接用雙花括號(hào){{}}
包起了就可以了煤杀,不管里頭是什么花里胡哨的東西眷蜈,最終都被解釋成文本。而如果我們希望一些特殊情況下沈自,例如應(yīng)用一段HTML代碼酌儒,
而不是單純被解析成文本,這個(gè)時(shí)候就需要用到v-html指令枯途,這樣引用后的值就等價(jià)于真正的HTML元素了忌怎,而不是單純被輸出在頁(yè)面上
的文本。對(duì)于標(biāo)簽元素的屬性酪夷,例如id, name等等的值榴啸,就不能用{{}}來(lái)給它們賦值,這個(gè)時(shí)候需要使用到v-bind指令來(lái)給對(duì)應(yīng)的屬性
進(jìn)行賦值晚岭。關(guān)于賦值呢鸥印,其實(shí)也可以使用javaScript語(yǔ)句,如果邏輯不是太復(fù)雜的話坦报,太復(fù)雜的話就是用函數(shù)了库说。指令
指令后接參數(shù)的話通過(guò)冒號(hào)連接,例如v-bind:id="xxx", v-on:click="doSomeThing"片择。而動(dòng)態(tài)參數(shù)的話璃弄,是通過(guò)一對(duì)方括號(hào)括起來(lái)的
如v-bind[somAttr]="xxx", 這個(gè)someAttr可以是Data中的一個(gè)property,也可以是一段JS邏輯
。修飾符的話构回,就是以簡(jiǎn)單后綴了,針對(duì)某系特定情況下的綁定縮寫
v-bind: ==> :
v-on: ==> @
接著說(shuō)說(shuō)計(jì)算屬性 , 計(jì)算屬性本身其實(shí)還是函數(shù)嘛疏咐。不過(guò)這個(gè)函數(shù)有點(diǎn)意思就是纤掸,如果它的計(jì)算結(jié)果不變,那么它是不需要像method中定義的
方法一樣重新執(zhí)行一遍浑塞,它直接就從緩存中把結(jié)果取出來(lái)借跪。這樣的好處就是如果某一結(jié)果需要多次引用,但計(jì)算量比價(jià)大的話酌壕,用計(jì)算屬性是比較好的掏愁,
對(duì)于同一個(gè)結(jié)果,它只計(jì)算一下卵牍,剩下的引用都是從緩存中加載果港。計(jì)算熟悉的定義會(huì)用到關(guān)鍵字computed, 然后就是自己寫函數(shù)了,它的綁定其實(shí)和property一樣糊昙。
而監(jiān)聽(tīng)器watch就是為了更加靈活的來(lái)響應(yīng)數(shù)據(jù)的變化了辛掠,當(dāng)某一個(gè)propterty發(fā)生變化了,做什么樣的處理。對(duì)于這樣的情況
使用監(jiān)聽(tīng)器是比較舒服的萝衩,對(duì)回挽,舒服。就是這種處理方式很貼近人的思維猩谊,寫起來(lái)也是很順手的千劈,不用考慮復(fù)雜的邏輯關(guān)系。
Github: ?https://github.com/jvxiao/vue-road