1.學習vue的目標
通過盡可能簡單的API實現響應的數據綁定和數組的視圖組件
2.核心
一個響應的數據綁定系統沛鸵，它讓數據與DOM保持同步
3.理解MVC架構和MVVM開發(fā)方式
實現基于MVVM實現交互式的Web界面
掌握用vue.js實現網站開發(fā)
4.組件系統：一種抽象湿诊，提供小組件來構建大型應用讲竿，然后形成一個組件樹贴彼。
5.屬性和方法
每個vue實例都會代理data對象里的所有屬性
被代理的屬性是響應的。
6.vue.js數據綁定
插入值：文本
<span>Message:{{ msg }}</span>
原始的HTML
<div>{{{ raw_html }}}</div>
HTML特性
<div id="item-{{ id }}"></div>
綁定表達式:Javascript表達式 每個綁定只能包含單個表達式
過濾器(Filter):
{{ message|capitalize }} 過濾器只能在后面
過濾器可以串聯{{ message|filterA|filterB }}
過濾器也可以接受參數
指令：特殊的帶有前綴v-的特性
參數：有些指令可以在后面帶一個參數，用冒號隔開
<a v-bind:href = "url"></a>
修飾符：以半角句號開始的特殊后綴，用于表示指令應當以特殊方式綁定
<a v-bind:href.literal = "a/b/c"></a>
縮寫:最常用的v-bind和v-on提供縮寫
<a v-bind:href = "url"></a> <a :href = "url"></a>
<a v-on:click = "dosomething"></a> <a @click = "dosomething"></a>
在input中使用v-model來實現數據雙向綁定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'ABCDEFG!'
}
})
</script>
7.vue的計算屬性：computed
基礎例子：計算屬性的getter
$watch用于觀察vue實例上的數據變動,相比較于計算屬性吐葵，后者更好用一些
計算屬性默認的只有getter,需要時可以創(chuàng)建setter
8.vue.js與樣式綁定
綁定HTML Class class{{className}}和v-bind:class兩者不可混用规揪，推薦使用后者
//v-bind:class動態(tài)地切換class
<div v-bind:class="{'class1':class1 }">
Hello World
</div>
綁定內聯樣式：對象語法
vbind指令被用來響應地更新HTML屬性
<div v-bind:style = "{fontSize + 'px'}"></div>
數組語法
<div v-bind:style = "[ styleObjectA,styleObjectB ]"></div>
可以將多個樣式 對象應用到一個元素上
自動添加前綴
9.vue條件渲染
v-if
<h1 v-if = "ok">YES</h1>
template v-if
<template v-if = "ok">
<h1>Hello</h1>
<p>kkkkk</p>
</template> //切換多個元素桥氏，可以把<template>當作包裝
元素，并在上面使用v-if,渲染結果不包含它
v-show：簡單的切換元素的css display屬性猛铅，始終渲染并保存在啊DOM 中字支，不支持<template>
<h1 v-show = "ok">YES</h1>
v-else：必須跟在v-if或v-show后面，否則不能識別
v-if vs. v-show
v-if：真實的條件渲染奸忽，有更高的切換效率
v-show：簡單的基于css切換堕伪，有更高的初始切換消耗
需要頻繁切換用v-show，不太改變用v-if栗菜。
10.列表渲染
v-for：使用v-for指令基于一個數組渲染一個列表
template v-for：v-for用在<template>標簽上欠雌，用來渲染一個包含多個元素的塊
數組變動檢測：變異方法:
push()/pop() shift()/unshift() splice() sort()reverse()
替換數組:不會修改原始數組而是返回一個新數組的非變異方法，直接用新數組替換舊數組filter()/concat()/slice()
track-by:用全新對象替換數組
track-by $index
問題：擴展觀察數組疙筹，為它添加了$set()方法$remove()
需要一個空數組替換items
對象v-for:使用v-for遍歷對象富俄，除了$index之外禁炒，作用域內還可以訪問另外一個特殊變量$key
值域v-for:v-for也可以接收一個整數，此時它將重復模板數次
<div>
<span v-for = "n in 10">{{ n }} </span>
</div>
顯示過濾/排序的結果:創(chuàng)建一個計算屬性霍比，返回過濾/排序過的數組
使用內置的過濾器filterBy和orderBy
計算屬性有更好的控制力幕袱，也更靈活，因為它是全功能JavaScript悠瞬。但是通常過濾器更方便们豌。
