一.初步認識MVVM模式：
MVVM設計模式：
-
M:數據層，對應Vue中data內容，
-
V:視圖層，對應Vue中的html標籤內容
-
VM:是Vue提供的功能，對應Vue中methods裏的內容
Vue更多的是通過去寫數據層代碼來實現功能
傳統的MVC模式：
更多的代碼時去寫C控制層的代碼改變DOM的結果來實現功能
二、Vue實例中的應用
Vue能做到響應式數據變年，即數據變時，視圖呈現的內容就會跟着變，同樣，當視圖上效果發生變化時，數據層面也會跟着變化，這就是組件做到的響應式開發 ；除非，對對象使用了Object.freeze()方法，他會阻止修改現有屬性，意味着系統無法追蹤數據變化；
Vue實例還會暴露一些屬性或者方法，使用前綴$；
實例生命週期鉤子：create mounted updated destroyed ；生命週期鉤子的this指向調用它的Vue實例，不要在選項屬性或者回調上使用箭頭函數，因爲箭頭函數並沒有this，和會導致this會作爲變量一直想上級作用域查找，沒找到會導致錯誤，下面是錯誤示範：
//Vue的實例中選項採用了箭頭函數的錯誤樣子
create：（）=》console.log(this.a)
//回調函數採用箭頭函數的錯誤樣子
v.$watch(ele,newValue=>this.myMethod())
生命週期圖示：
四、模板語法
Vue使用{{}} 雙大括號進行數據綁定，做響應式變化，v-once指令進行一次性插值，數據改變時，綁定到頁面的內容是不會更新的，和Object.freeze（）類似。{{}}裏面只能包含單個表達式，不能包含語句，控制流等。
模板中，指令以V-開頭，一個指令可以接受一個參數，使用“：”即可。可以用[]來接受一個動態參數，
修飾符，以“.”表示，代表指令以特殊方式綁定，
eg. ".prevent"表示指令對於觸發事件event.preventDefault()；的調用；
五、計算屬性
Vue實例中有一個計算屬性：computed，計算屬性是基於他們的響應式依賴進行緩存的，（他的依賴可以是其他計算屬性，也可以是其他Vue示例數據，不僅僅侷限於當前Vue實例的數據）只有數據發生改變時，纔會重新computed裏面定義的函數，如果依賴沒有發生改變，就不會執行函數，直接從緩存中拿數據渲染。緩存的作用節約了我們的開銷。
計算屬性默認只有getter，需要時磕頭添加setter、
偵聽器：watch（vm.$watch），用來響應數據變化，
六、可以用v-bind對class樣式進行綁定
在標籤裏寫入v-bind，在data寫入樣式的名稱，並給他們設定true或者false的值，true代表有此樣式，反之。
使用v-bind綁定一個數組，添加一個class列表；使用三元表達式可以切換class；
v-bind：style綁定內聯樣式；
七、渲染
key屬性可以決定是否要複用這個元素；
v-show：只切換元素的css屬性display；
v-for可以支持兩個參數，第一個是數組元素，第二個是索引；of可以代替in；v-for用在對象中時，他的參數是（value,key）,也可以加入第三個參數index;v-for的優先級比 v-if更高 ，二者可以一同使用；
數組更新：
pop（），push（），shift（），unshift（），splice（），sort（），reverse（）；
數組替換：
filter（），cancat（），slice（）；
直接修改數組內容不起效，可以使用Vue.set(vm.items，index，newValue)方法設置實例數組內容，
Vue.set(object, propertyName, value) 往對象中添加屬性；
Object.assign() 添加多個新屬性 ：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
八、修飾符
v-on：綁定的事件可以加上修飾符操作，
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
修飾符的順序也是很重要的：
v-on:click.prevent.self //會阻止所有的點擊，而
v-on:click.self.prevent //只會阻止對元素自身的點擊。
九、組件
組件用法：
組件需要註冊之後才能用，有全局組件和局部組件兩種方式。自定義標籤名稱儘量使用小寫加減號分割的形式命名。組件也可以嵌套使用。當組件掛載受到限制時，可以使用is來掛載組件，table標籤使用組件是無效的。
組建的複用：
data必須使用一個函數，return出數據對象，這樣每個實例可以維護一份被返回對象的獨立的拷貝；
通過prop向子組件傳遞數據：
props的值可以是兩種，一種是字符串數組，一種是對象；（父向子傳遞）
組件通信：
父組件通過prop傳遞數據給子組件，子組件通過用$emit()觸發事件，父組件用$on()來監聽子組件事件（.native表示監聽該組件的根元素）
可以通過中央事件總線解決跨級組件之間的問題；
在子組件中可以通過this.$parent直接訪問該組件的父實例和組件，父組件可以通過this.$children訪問他所有的子組，可以通過遞歸向上向下無線訪問。“ref”可以爲子組件指定一個索引名稱。
備註：上面寫到的vm是一個VUE的實例