Axios中文文档地址：http://www.axios-js.com/zh-cn/docs/
所需要的的cdn
<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>
伪造一个后端传递的data.json数据
{
"name": "起名好难呀！",
"url": "https://blog.csdn.net/fgets__?spm=1000.2115.3001.5343",
"address": {
"street": "龙湖",
"city": "河南郑州",
"country": "中国"
},
"links": [
{
"name": "双向绑定",
"url": "https://blog.csdn.net/fgets__/article/details/121462597"
},
{
"name": "绑定事件",
"url": "https://blog.csdn.net/fgets__/article/details/121452913"
}
]
}
页面
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Axios学习</title>
</head>
<body>
<div id="app">
<span>name：{
{info.name}}</span>
<br/>
<a v-bind:href="info.url">博客连接</a>
<br/>
<div>street：{
{info.address.street}}<br/>
city：{
{info.address.city}}<br/>
country：{
{info.address.country}}
</div>
<div>
{
{info.links[0].name}}：
<a v-bind:href="info.links[0].url">链接</a>
</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>
var vm = new Vue({
el: "#app",
//通过data()方法，将从data.json响应回来的数据存到info中
data(){
return{
//info中接受数据的格式要和data.json中的格式完全一致，否则会接受不到数据
//想要那些数据就把那些数据的格式写对就可以了，不想要的可以不用写
info:{
name:null,
url:null,
address:{
street:null,
city:null,
country:null
},
links:[
{
name: null,
url: null
}
]
}
}
},
mounted(){
//钩子函数、链式编程，ES6新特性
axios.get("../data.json").then(response=>(this.info=response.data))
}
});
</script>
</body>
</html>
结果如下
Vue程序的生命周期
