Detailed explanation of Axios asynchronous communication in Vue
|
1. First, we create a .json file for interactive use. We list the json data format and simulate passing it to the front end to help our friends understand.
{
"name": "Salted fish_turn over",
"url": "https://blog.csdn.net/aaa123_456aaa",
"page": 1,
"address": {
"street": "Xiangqiao District",
"city": "Chaozhou City",
"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 check your environment. You need to choose to support ES6 here.
2. Next, we create a .html file and use Axios asynchronous communication to realize data communication.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<div>
{{info.name}}
{{info.address}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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",
// Note: * data is global and it is easy to pollute data in large projects* Encapsulate data into a function. When instantiating the component, we just call the data copy generated by this function to avoid data pollution. I will not write it here as an explanation.
data(){
return {
// The format of the request return parameter should be the same as the json string, which is more standard. Of course, it can 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 execute //Chain programming, remember to use the ES6 support version axios.get('../data.json').then(response=>(this.info=response.data))
}
});
</script>
</body>
</html>
Running results:
3. Of course, the above is a relatively standard way of writing, so let’s abbreviate it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<div>
{{info.name}}
{{info.address}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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",
// Note: Here is data:{}, but there must be an original parameter info in it, and then the data obtained by axios is bound to info // data is an attribute, and the attribute value can be an object or a function. Functions are essentially objects. Vue will judge the type of data attributes and take different processing methods data: {
info:{}
},
mounted(){
axios.get('../data.json').then(response=>(this.info=response.data))
}
});
</script>
</body>
</html>
Running results:
4. We need to pay attention to the interaction with the URL, because v-bind is used to bind the value.
<div id="vue" v-clock>
<div>
{{info.name}}
{{info.address}}
<a v-bind:href="info.url">Click to enter my blog</a>
</div>
</div>
Click to jump, friends who are interested can follow us!
5. Tips Some friends may have a bad network, and you will see that a template will be loaded first during the page loading process. This is related to the life cycle of Vue:
Some of you may find it ugly, so here is a solution to make it turn white at that moment instead of showing the template first:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--v-clock: Solve the flickering problem-->*/
[v-clock]
display: none;
}
</style>
</head>
<body>
<!--Customize a v-clock-->
<div id="vue" v-clock>
<div>
{{info.name}}
{{info.address}}
</div>
</div>
SummarizeThis article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: How to store false or true in MySQL
>>: Summary of practical experience of HTML knowledge points
Recommend
Practice of dynamically creating dialog according to file name in vue+el-element
Table of contents background accomplish 1. Encaps...
Summary of Linux nc command
NC's full name is Netcat (Network Knife), and...
Troubleshooting process for Docker container suddenly failing to connect after port mapping
1. Background Generally, for Docker containers th...
Vue folding display multi-line text component implementation code
Folding display multi-line text component Fold an...
Basic ideas and codes for implementing video players in browsers
Table of contents Preface Summary of audio and vi...
vue3+ts+EsLint+Prettier standard code implementation
Table of contents use Use of EsLint Add a profile...
How to install MySQL database on Ubuntu
Ubuntu is a free and open source desktop PC opera...
Detailed explanation of the idea of achieving the point-earning effect with CSS animation
In the recent project, we need to create an effec...
Implementation process of row_number in MySQL
1. Background Generally, in a data warehouse envi...
Installation and use of mysql on Ubuntu (general version)
Regardless of which version of Ubuntu, installing...
Navicat connection MySQL error description analysis
Table of contents environment Virtual Machine Ver...
Centos 7.4 server time synchronization configuration method [based on NTP service]
This article describes how to configure time sync...
How to implement real-time polygon refraction with threejs
Table of contents Preface Step 1: Setup and front...
Example code for implementing the wavy water ball effect using CSS
Today I learned a new CSS special effect, the wav...
A brief introduction to the command line tool mycli for operating MySQL database
GitHub has all kinds of magic tools. Today I foun...