1.什么是Axios
Axios 是一個開源的可以用在瀏覽器端和 NodeJS 的異步通信框架，主要作用就是實現 AJAX 異步通信，其功能特點如下：
- 從瀏覽器中創建
XMLHttpRequests - 從 node.js 創建 http 請求
- 支持 Promise API [JS中鏈式編程]
- 攔截請求和響應
- 轉換請求數據和響應數據
- 取消請求
- 自動轉換 JSON 數據
- 客戶端支持防御 XSRF（跨站請求偽造）
GitHub：https://github.com/axios/axios
2.為什么要使用Axios
由於 Vue.js 是一個 視圖層框架 並且作者（尤雨溪）嚴格准守 SoC （關注度分離原則），所以 Vue.js 並不包含 AJAX 的通信功能，為了解決通信問題，作者單獨開發了一個名為 vue-resource的插件，不過在進入 2.0 版本以后停止了對該插件的維護並推薦了 Axios 框架。少用jQuery，因為它操作Dom太頻繁！
3.第一個Axios應用程序
1.模擬JSON數據：創建data.json
1 { 2 "name": "第一個Axios程序", 3 "url": "https://www.cnblogs.com/zhihaospace/p/12078861.html", 4 "page": 1, 5 "isNonProfit": true, 6 "address": { 7 "street": "包河", 8 "city": "安徽", 9 "country": "中國" 10 }, 11 "links": [ 12 { 13 "name": "海戀天", 14 "url": "https://www.cnblogs.com/zhihaospace/" 15 }, 16 { 17 "name": "Vue的組件", 18 "url": "https://www.cnblogs.com/zhihaospace/p/12078835.html" 19 }, 20 { 21 "name": "Vue的雙向綁定", 22 "url": "https://www.cnblogs.com/zhihaospace/p/12078708.html" 23 } 24 ] 25 }
2.導入axios.js
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3.代碼
說明：
- data函數：與data屬性不同，返回數據給視圖。注意：data函數返回的數據結構必須要和Ajax響應回來的數據格式相匹配，也就是名字相同
- mounted函數：鈎子函數
- axios：使用axios框架的get方法請求AJAX並自動將數據封裝進Vue實例的數據對象中
- v-cloak：讓渲染時顯示模版改為顯示空白頁面，解決頁面閃爍問題
- v-text：本身沒有閃爍問題
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--v-cloak 解決閃爍問題--> 7 <style> 8 [v-cloak] { 9 display: none; 10 } 11 </style> 12 </head> 13 <body> 14 <!--view層模塊--> 15 <div id="vue"> 16 17 <!--默認v-text 是沒有閃爍問題的，會覆蓋標簽的元素中原本的內容，插值表達式只會替換占位符的內容，不會覆蓋原來的內容--> 18 <div v-text="info.url"></div> 19 20 <!--v-cloak：防止閃爍--> 21 <div v-cloak>名稱：{{info.name}}</div> 22 <div v-cloak>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div> 23 <div v-cloak>鏈接：<a v-bind:href="info.url" target="_blank" v-cloak>{{info.url}}</a></div> 24 25 </div> 26 27 <!--導入Vue.js--> 28 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 29 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 30 <script type="text/javascript"> 31 32 //定義一個Vue組件 33 Vue.component("first_component", { 34 props: ["com"], 35 template: "<li>{{com}}</li>" 36 }) 37 38 let vm = new Vue({ 39 el: '#vue', 40 41 //此處是data函數和data屬性不同 42 data() { 43 return { 44 info: { 45 name: null, 46 address: { 47 country: null, 48 city: null, 49 street: null 50 }, 51 url: null 52 } 53 } 54 }, 55 mounted() { //鈎子函數，鏈式編程，ES6的lambda 56 axios 57 .get('../data.json') 58 .then(response => (this.info = response.data)); 59 } 60 61 }); 62 </script> 63 </body> 64 </html>
4.Vue的生命周期
- 官方文檔：https://cn.vuejs.org/v2/guide/instance.html#生命周期圖示
- Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載 DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創建到銷毀的過程，就是生命周期。
- 在 Vue 的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊 JS 方法，可以讓我們用自己注冊的 JS 方法控制整個大局，在這些事件響應方法中的 this 直接指向的是 Vue 的實例。
