Vue.js 2.0 由淺入深

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

    多元素動畫