坐上幼兒園的車议蟆,一起讀Vue文檔——介紹章節(jié)

前言:初學(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變化:


before
after

神奇的事情發(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控制正處于某個生命周期的實例购公。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市雁歌,隨后出現(xiàn)的幾起案子宏浩,更是在濱河造成了極大的恐慌,老刑警劉巖靠瞎,帶你破解...
    沈念sama閱讀 212,080評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件比庄,死亡現(xiàn)場離奇詭異,居然都是意外死亡乏盐,警方通過查閱死者的電腦和手機佳窑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來父能,“玉大人神凑,你說我怎么就攤上這事『瘟撸” “怎么了溉委?”我有些...
    開封第一講書人閱讀 157,630評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長爱榕。 經(jīng)常有香客問我瓣喊,道長,這世上最難降的妖魔是什么黔酥? 我笑而不...
    開封第一講書人閱讀 56,554評論 1 284
  • 正文 為了忘掉前任藻三,我火速辦了婚禮,結(jié)果婚禮上跪者,老公的妹妹穿的比我還像新娘趴酣。我一直安慰自己,他們只是感情好坑夯,可當(dāng)我...
    茶點故事閱讀 65,662評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著抡四,像睡著了一般柜蜈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上指巡,一...
    開封第一講書人閱讀 49,856評論 1 290
  • 那天淑履,我揣著相機與錄音,去河邊找鬼藻雪。 笑死秘噪,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的勉耀。 我是一名探鬼主播指煎,決...
    沈念sama閱讀 39,014評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼蹋偏,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了至壤?” 一聲冷哼從身側(cè)響起威始,我...
    開封第一講書人閱讀 37,752評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎像街,沒想到半個月后黎棠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,212評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡镰绎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,541評論 2 327
  • 正文 我和宋清朗相戀三年脓斩,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片畴栖。...
    茶點故事閱讀 38,687評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡随静,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出驶臊,到底是詐尸還是另有隱情挪挤,我是刑警寧澤,帶...
    沈念sama閱讀 34,347評論 4 331
  • 正文 年R本政府宣布关翎,位于F島的核電站扛门,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏纵寝。R本人自食惡果不足惜论寨,卻給世界環(huán)境...
    茶點故事閱讀 39,973評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望爽茴。 院中可真熱鬧葬凳,春花似錦、人聲如沸室奏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽胧沫。三九已至昌简,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間绒怨,已是汗流浹背纯赎。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留南蹂,地道東北人犬金。 一個月前我還...
    沈念sama閱讀 46,406評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親晚顷。 傳聞我的和親對象是個殘疾皇子峰伙,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,576評論 2 349