1、 What is? Axios

Axios Is an open source, can be used in the browser side and Node JS Asynchronous communication framework of , Its main function is to realize AJAX asynchronous communication , Its functional features are as follows :

  • Created from the browser XMLHttpRequests

  • from node.js establish http request

  • Support Promise API[JS Middle chain programming ]

  • Intercept requests and responses

  • Transform request data and response data

  • Cancel the request

  • Automatic conversion JSON data

  • The client supports defense XSRF( Cross-site request forgery )

    Chinese document :http://www.axios-js.com/

1.1、 Why use Axios

because Vue.js It's a view level framework and the author ( Especially the rain creek ) Strictly abide by SoC( The separation principle of attention ) therefore Vue.js Does not contain AJAX Communication function , To solve the communication problem , The author has developed a separate program called vue-resource Plug in for , But entering 2.0 After the release, the maintenance of the plug-in was stopped and recommended Axios frame . To use less jQuery, Because it operates Dom Too often !

2、 first Axios Applications

Most of the interfaces we develop adopt JSON Format , You can simulate a period in the project first JSON data , The data content is as follows : Create a file called data.json And fill in the following , Put it in the root of the project

  "name": "The_Beacon",
  "url": "https://blog.csdn.net/The_Beacon",
  "page": 1,
  "isNonProfit": true,
  "address": {"street": " Jinshi Road ","city": " Dalian, Liaoning ","country": " China "
  "links": [{  "name": "BiliBili",  "url": "https://space.bilibili.com/300623241"},{  "name": "CSDN",  "url": "https://blog.csdn.net/The_Beacon"},{  "name": " Baidu ",  "url": "https://www.baidu.com/"}

Test code

<!DOCTYPE html><html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title><!--v-cloak  Solve the flicker problem --><style>[v-cloak]{display: none;}</style></head><body><div id="vue"  v-cloak><div> Place names :{{info.name}}</div><div> Address :{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div><div> link :<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div></div><!-- introduce js file --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#vue",//data: attribute :vmdata(){return{info:{name:null,address:{country:null,city:null,street:null},url:null}}},mounted(){// Hook function axios.get('../data.json')// It's important to note that you may not get , It needs to be written according to the directory structure .then(response=>(this.info=response.data));}});</script></body></html>

explain :

  1. v-cloak Solve the problem of page flicker ( There will be no {{message}} Such information , Instead, the page is blank )
  2. It's used here v-bind take a:href The property value of is the same as the Vue The data in the instance is bound
  3. Use axios Framework of the get Method request AJAX And automatically encapsulate the data into Vue In the data object of the instance
  4. We are data The data structure in must be the same as Ajax The data format returned from the response matches !

3、Vue Life cycle of

Official documents :https://cn.vuejs.org/v2/guide/instance.html# Lifecycle diagram
  Vue The instance has a complete life cycle , That is to say, from the beginning, we started to create the data of Taiwanese women 、 Compiling templates 、 mount DOM、 Render, update, render 、 Unloading and so on , We call it Vue Life cycle of . Generally speaking, it means Vue The process from creation to destruction of an instance , Life cycle .
   stay Vue For the entire life cycle of , It provides a series of events , It allows us to register when an event is triggered JS Method , We can use our own registered JS Methods control the whole situation , In these event response methods this The direct point is Vue Example .

 Insert picture description here