Vue系列（二）：發送Ajax、JSONP請求、Vue生命週期及實例屬性和方法、自定義指令與過渡

上一篇：Vue系列（一）：簡介、起步、經常使用指令、事件和屬性、模板、過濾器

1、 發送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添加支持發送跨域請求，因此只能使用第三方庫

代碼：發送AJAX請求

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])

練習代碼：百度搜索列表

2、Vue生命週期

vue實例從建立到銷燬的過程，稱爲生命週期，共有八個階段

生命週期圖示
代碼：Vue生命週期

3、計算屬性

1. 基本用法

計算屬性也是用來存儲數據，但具備如下幾個特色：     
    a.數據能夠進行邏輯處理操做
    b.對計算屬性中的數據進行監視

2.計算屬性 vs 方法

將計算屬性的get函數定義爲一個方法也能夠實現相似的功能
區別：
    a.計算屬性是基於它的依賴進行更新的，只有在相關依賴發生改變時才能更新變化
    b.計算屬性是緩存的，只要相關依賴沒有改變，屢次訪問計算屬性獲得的值是以前緩存的計算結果，不會屢次執行

3. get和set

計算屬性由兩部分組成：get和set，分別用來獲取計算屬性和設置計算屬性
默認只有get，若是須要set，要本身添加

代碼：計算屬性

4、 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])

代碼：實例的屬性和方法01
實例的屬性和方法02
實例的屬性和方法03

5、自定義指令

分類：全局指令、局部指令

1. 自定義全局指令

使用全局方法Vue.directive(指令ID,定義對象)

2. 自定義局部指令

代碼：自定義指令

3. 練習

拖動頁面中的元素
onmouseover onmouseout 
onmousedown onmousemove  onmouseup

代碼：練習

6、過渡(動畫)

1. 簡介

Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果
本質上仍是使用CSS3動畫：transition、animation

2. 基本用法

使用transition組件，將要執行動畫的元素包含在該組件內
    <transition>
        運動的元素
    </transition>       
過濾的CSS類名：6個

3. 鉤子函數

8個

動畫01
動畫02

4. 結合第三方動畫庫animate.css一塊兒使用

<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <p v-show="flag">網博</p>
</transition>

5. 多元素動畫

<transition-group>

多元素動畫01
多元素動畫02

下一篇：Vue系列（三）：組件及數據傳遞、路由、單文件組件、vue-cli腳手架

參考Vue教學視頻：Vue.js 2.0之全家桶系列視頻課程（vue、vue-router、axios、vuex）