Shulou(Shulou.com)06/02 Report--

This article will explain in detail the example analysis of Axios asynchronous communication in Vue. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. First of all, we create a .json file for interactive use. We list the json data format simulation passed to the front end to help friends understand.

{"name": "salted fish _ turn over", "url": "https://blog.csdn.net/aaa123_456aaa"," page ": 1," address ": {" street ":" Xiangqiao District "," city ":" Chaozhou "," country ":" China "}," links ": [{" name ":" salted fish _ turn over 1 " "url": "https://blog.csdn.net/aaa123_456aaa"}, {" name ":" salted fish _ turn over 2 "," url ":" https://blog.csdn.net/aaa123_456aaa"}, {"name": "salted fish _ turn over 3", "url": "https://blog.csdn.net/aaa123_456aaa"}]}

Remember to take a look at your environment, you have to choose to support ES6 here.

2. Next, we create an .html file and use Axios to communicate asynchronously to achieve data communication.

Title {{info.name}} {{info.address}} var vm = new Vue ({el: "# vue", / / Note: * data is global and easy to contaminate data in large projects * encapsulate data into a function. When we instantiate the component, we only call the copy of the data generated by this function to avoid data pollution. It will not be written here as an explanation. Data () {the format of the return parameter of the return {/ / request should be the same as the json string, a bit more standard, of course, it is OK to be empty directly. Info: {name: null, address: {street: null, city: null, country: null},}, mounted () {/ / hook function That is, when the program is executed, it can be inserted into the middle of the program to perform / / chain programming. Remember to use the ES6 supported version axios.get ('.. / data.json'). Then (response= > (this.info=response.data))}})

Running result:

3. Of course, the above is a relatively standard way of writing, we might as well abbreviate it:

Title {{info.name}} {{info.address}} var vm = new Vue ({el: "# vue", / / Note: here is data: {}, but there must be an original parameter info, and then the data obtained by axios is bound to the info / / data is an attribute, the attribute value can be an object or a function, and the function is essentially an object. Vue will type the data attribute in a different way: data: {info: {}}, mounted () {axios.get ('.. / data.json'). Then (response= > (this.info=response.data))}})

Running result:

4. We should pay attention to the interaction of url, because this uses v-bind to bind the value.

{{info.name}} {{info.address}} Click to enter my blog

Click will jump, interested partners can click on the attention ah!

5. Hint

Some friends may not have a good network, and you will see that a template will be loaded first during the page loading process, which is related to the life cycle of their Vue:

Some buddies may feel ugly, so here is a solution to turn his moment white instead of showing up the template first:

Title / * * / [v-clock] {display: none } {{info.name}} {{info.address}} this is the end of the article on "sample Analysis of Axios Asynchronous Communication in Vue". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.