前言:初學(xué)vue時闷沥,看官方文檔覺得非常晦澀難懂咐容,畢竟并沒有框架學(xué)習(xí)經(jīng)驗舆逃,而通過幾個demo學(xué)習(xí)之后,雖然能夠結(jié)合mint-ui實現(xiàn)一個簡單的頁面戳粒,心中仍存在許多困惑路狮。回頭再看官方文檔蔚约,便覺得有種溫故知新奄妨,醍醐灌頂之感。抱有帶著自己正正經(jīng)經(jīng)閱讀官方文檔的目的寫下此文以供后日翻閱苹祟,也正因如此砸抛,這里的例子均來源于官方文檔∈鞣悖可配合官方文檔讀直焙。
一、v-bind砂轻、模板奔誓、props和data(對應(yīng)官方教程的【介紹】章節(jié))
打開介紹章節(jié),沒看幾行搔涝,就已經(jīng)遇到了這個雖然短小厨喂,但是居然出現(xiàn)了組件,props庄呈,父子組件傳參的例子蜕煌,對于初學(xué)者已經(jīng)兩眼一抹黑,不知其所云了抒痒。要看懂這個幌绍,得具備一些vue基礎(chǔ)知識。
1.??? data故响,這里的data就是一個對象傀广,在這個例子里,他將提供app7實例中彩届,v-for遍歷所用的數(shù)據(jù)伪冰。注意他出現(xiàn)在實例中,即new Vue()里面樟蠕。跟之后的template模板定義中即將出現(xiàn)的data function是兩個東西贮聂。
2.??? v-if靠柑。這里的case,用v-if控制是否顯示標(biāo)簽吓懈,他是怎么控制是否顯示的呢歼冰?這里從瀏覽器上觀察展示前后的Dom變化:
神奇的事情發(fā)生了,這個標(biāo)簽變成了空的注釋符號耻警。
3.??? v-for就是用于遍歷的隔嫡,這里他遍歷了app7實例里提供的groceryList數(shù)組,有意思的是甘穿,v-for重復(fù)的是他自己所出現(xiàn)的那個標(biāo)簽腮恩,而不是他的子標(biāo)簽。這里就是温兼,重復(fù)了todo-item秸滴。
如果不相信,在瀏覽器看看他的結(jié)構(gòu)募判。證實了這個猜測荡含,甚至,我們可以進一步地推測兰伤,他將這個todo-item標(biāo)簽用template里的內(nèi)容進行替換内颗,即 `<li>XXX</li>`。
4.???? props 用于為組件提供一個能夠為外界傳值的機會去達到操控這個組件的目的敦腔,就像這樣(【組件-prop】章節(jié)):
在使用這個組件的地方給message賦值,而不是在定義這個組件的時候恨溜,將message寫死符衔。這樣,即使調(diào)用好幾個這樣的組件糟袁,都可以分別控制他顯示的是Hello還是Hello Kitty還是別的什么東西了判族。
5.???? v-bind
1)???? 再一看那個例子,這里的todo是todo-item這個組件的屬性项戴,注意到形帮,這里出現(xiàn)了一個v-bind。
在實際應(yīng)用中周叮,我們并不會將屬性直接寫死辩撑,不然需求方不喜歡hello了,改成了helloworld的時候仿耽,難道要全局搜一下這個屬性合冀,一個個改成helloworld嗎。
在vue中项贺,組件與組件之間是孤立的君躺,這個v-bind的作用其實是將這個todo綁定到父組件的數(shù)據(jù)峭判,也就是說,達到了組件間溝通的效果棕叫。
如果綁定聽起來很拗口林螃,那么,不妨理解v-bind是可以讓這個todo接收一個變量的東西俺泣,todo的值能隨著等號后面所接收的變量的值改變而動態(tài)發(fā)生變化疗认,是不是很酷。
這樣一來砌滞,我只需要在父組件里面去決定這個值是多少侮邀,那么,與其綁定的props就會改變贝润,這個props控制的東西也會改變绊茧,就達到牽一發(fā)而動全身的效果啦。
2)??? 多說一句打掘,這個v-bind還可以這么用:
希望傳遞的值不被解讀為字符串华畏,比如數(shù)字,bool值尊蚁,那么加上這個東西亡笑,就可以達到效果。
二横朋、(對應(yīng)官方教程的【Vue實例】章節(jié))
1.???? 關(guān)于data仑乌,這里說明了,他就是實例中暴露的一個屬性琴锭,
我試了試:
晰甚,如果這么去給實例的data賦值的話,瀏覽器中就會出現(xiàn)
[Vue warn]: Avoid replacing instance root $data. Use nesteddata properties instead.
這樣的提示决帖,說明并不提倡這么去賦值厕九。可以在Chrome裝一個Vue
Devtools來幫助學(xué)習(xí)地回。這里我們看到扁远,點擊Root,data是這樣的:
正常賦值data之后刻像,data如愿出現(xiàn)了a這個值
2.???? 生命周期畅买,這幅圖現(xiàn)在并不能帶來很直觀的感受,如果粗淺去看绎速,只能看到前面所提到的皮获,實例暴露的部分屬性和方法,諸如el,created,desotoryed等纹冤。通過操縱這些屬性和方法洒宝,能夠?qū)嶋H控制正處于某個生命周期的實例购公。