Vue.js 2.0 由淺入深，第二天 day02

標籤：vue.js   vue   vuex   axios   湯小洋   湯老師   

## 一、 發送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. 練習

    多元素動畫    

本文出自 “12392007” 部落格，請務必保留此出處http://12402007.blog.51cto.com/12392007/1950798

Vue.js 2.0 由淺入深，第二天 day02