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

唐成勇發表於2018-01-24
VueJSON

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

一、 傳送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])

練習程式碼：百度搜尋列表

二、Vue生命週期

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

程式碼：例項的屬性和方法01
例項的屬性和方法02
例項的屬性和方法03

五、自定義指令

分類：全域性指令、區域性指令

1. 自定義全域性指令

使用全域性方法Vue.directive(指令ID,定義物件)

2. 自定義區域性指令

程式碼：自定義指令

3. 練習

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

程式碼：練習

六、過渡(動畫)

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）

相關文章