## 一、 發送AJAX請求
### 1. 簡介
vue本身不支持發送AJAX請求，需要使用vue-resource、axios等插件實現
axios是一個基於Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時不再對vue-resource進行更新和維護
參考：GitHub上搜索axios，查看API文檔
### 2. 使用axios發送AJAX請求
#### 2.1 安裝axios並引入
npm install axios -S
也可直接下載axios.min.js文件
#### 2.2 基本用法
axios([options])
axios.get(url[,options]);
傳參方式：
1.通過url傳參
2.通過params選項傳參
axios.post(url,data,[options]);
axios默認發送數據時，數據格式是Request Payload，並非我們常用的Form Data格式，
所以參數必須要以鍵值對形式傳遞，不能以json形式傳參
傳參方式：
1.自己拼接爲鍵值對
2.使用transformRequest，在請求發送前將請求數據進行轉換
3.如果使用模塊化開發，可以使用qs模塊進行轉換
axios本身並不支持發送跨域的請求，沒有提供相應的API，作者也暫沒計劃在axios添加支持發送跨域請求，所以只能使用第三方庫
### 3. 使用vue-resource發送跨域請求
#### 3.1 安裝vue-resource並引入
cnpm install vue-resource -S
#### 3.2 基本用法
使用this.$http發送請求
this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options])
### 4. 練習
百度搜索列表
課後作業：
1.只顯示4條
2.回車後在新頁面中顯示搜索結果
## 二、Vue生命週期
vue實例從創建到銷燬的過程，稱爲生命週期，共有八個階段
## 三、計算屬性
### 1. 基本用法
計算屬性也是用來存儲數據，但具有以下幾個特點：
a.數據可以進行邏輯處理操作
b.對計算屬性中的數據進行監視
### 2.計算屬性 vs 方法
將計算屬性的get函數定義爲一個方法也可以實現類似的功能
區別：
a.計算屬性是基於它的依賴進行更新的，只有在相關依賴發生改變時才能更新變化
b.計算屬性是緩存的，只要相關依賴沒有改變，多次訪問計算屬性得到的值是之前緩存的計算結果，不會多次執行
### 3. get和set
計算屬性由兩部分組成：get和set，分別用來獲取計算屬性和設置計算屬性
默認只有get，如果需要set，要自己添加
## 四、 vue實例的屬性和方法
### 1. 屬性
vm.$el
vm.$data
vm.$options
vm.$refs
### 2. 方法
vm.$mount()
vm.$destroy()
vm.$nextTick(callback)
vm.$set(object,key,value)
vm.$delete(object,key)
vm.$watch(data,callback[,options])
## 五、自定義指令
分類：全局指令、局部指令
### 1. 自定義全局指令
使用全局方法Vue.directive(指令ID,定義對象)
### 2. 自定義局部指令
### 3. 練習
拖動頁面中的元素
onmouseout
onmouseup
## 六、過渡(動畫)
### 1. 簡介
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果
本質上還是使用CSS3動畫：transition、animation
### 2. 基本用法
使用transition組件，將要執行動畫的元素包含在該組件內
<transition>
運動的元素
</transition>
過濾的CSS類名：6個
### 3. 鉤子函數
8個
### 4. 結合第三方動畫庫animate..css一起使用
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
<p v-show="flag">網博</p>
</transition>
### 5. 多元素動畫
<transition-group>
### 6. 練習
多元素動畫