前言：初學vue時，看官方文檔覺得非常晦澀難懂，畢竟并沒有框架學習經驗，而通過幾個demo學習之后，雖然能夠結合mint-ui實現一個簡單的頁面，心中仍存在許多困惑。回頭再看官方文檔，便覺得有種溫故知新，醍醐灌頂之感。抱有帶著自己正正經經閱讀官方文檔的目的寫下此文以供后日翻閱，也正因如此，這里的例子均來源于官方文檔。可配合官方文檔讀。
一、v-bind、模板、props和data（對應官方教程的【介紹】章節）
打開介紹章節，沒看幾行，就已經遇到了這個雖然短小，但是居然出現了組件，props，父子組件傳參的例子，對于初學者已經兩眼一抹黑，不知其所云了。要看懂這個，得具備一些vue基礎知識。
1.??? data，這里的data就是一個對象，在這個例子里，他將提供app7實例中，v-for遍歷所用的數據。注意他出現在實例中，即new Vue()里面。跟之后的template模板定義中即將出現的data function是兩個東西。
2.??? v-if。這里的case，用v-if控制是否顯示標簽，他是怎么控制是否顯示的呢？這里從瀏覽器上觀察展示前后的Dom變化：
神奇的事情發生了，這個標簽變成了空的注釋符號。
3.??? v-for就是用于遍歷的，這里他遍歷了app7實例里提供的groceryList數組，有意思的是，v-for重復的是他自己所出現的那個標簽，而不是他的子標簽。這里就是，重復了todo-item。
如果不相信，在瀏覽器看看他的結構。證實了這個猜測，甚至，我們可以進一步地推測，他將這個todo-item標簽用template里的內容進行替換，即 `<li>XXX</li>`。
4.???? props 用于為組件提供一個能夠為外界傳值的機會去達到操控這個組件的目的，就像這樣（【組件-prop】章節）：
在使用這個組件的地方給message賦值，而不是在定義這個組件的時候，將message寫死。這樣，即使調用好幾個這樣的組件，都可以分別控制他顯示的是Hello還是Hello Kitty還是別的什么東西了。
5.???? v-bind
1)???? 再一看那個例子，這里的todo是todo-item這個組件的屬性，注意到，這里出現了一個v-bind。
在實際應用中，我們并不會將屬性直接寫死，不然需求方不喜歡hello了，改成了helloworld的時候，難道要全局搜一下這個屬性，一個個改成helloworld嗎。
在vue中，組件與組件之間是孤立的，這個v-bind的作用其實是將這個todo綁定到父組件的數據，也就是說，達到了組件間溝通的效果。
如果綁定聽起來很拗口，那么，不妨理解v-bind是可以讓這個todo接收一個變量的東西，todo的值能隨著等號后面所接收的變量的值改變而動態發生變化，是不是很酷。
這樣一來，我只需要在父組件里面去決定這個值是多少，那么，與其綁定的props就會改變，這個props控制的東西也會改變，就達到牽一發而動全身的效果啦。
2)??? 多說一句，這個v-bind還可以這么用：
希望傳遞的值不被解讀為字符串，比如數字，bool值，那么加上這個東西，就可以達到效果。
二、（對應官方教程的【Vue實例】章節）
1.???? 關于data，這里說明了，他就是實例中暴露的一個屬性，
我試了試：
，如果這么去給實例的data賦值的話，瀏覽器中就會出現
[Vue warn]: Avoid replacing instance root $data. Use nesteddata properties instead.
這樣的提示，說明并不提倡這么去賦值。可以在Chrome裝一個Vue
Devtools來幫助學習。這里我們看到，點擊Root，data是這樣的：
正常賦值data之后，data如愿出現了a這個值
2.???? 生命周期，這幅圖現在并不能帶來很直觀的感受，如果粗淺去看，只能看到前面所提到的，實例暴露的部分屬性和方法，諸如el,created,desotoryed等。通過操縱這些屬性和方法，能夠實際控制正處于某個生命周期的實例。
