实现Axios，需要先引用对应的Axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//导入Axios引用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Axios应用</title>
</head>
<body>
<div id="app">
<div >
名称：{{info.name}}
</div>
<div>
//利用a标签绑定href链接
url:<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
</div>
<ul>
<li v-for="link in info.links">
{{link.name}}---><a v-bind:href="link.url" target="_blank">{{link.url}}</a>
</li>
</ul>
</div>
<script>
var app=new Vue({
el:"#app",
data(){
return{
info:{
name:'',
url:'',
links:[]
}
}
},
//利用mounted钩子函数 发出ajax请求 返回json数据
mounted(){
axios
//获取json数据
.get("data.json")
//设置请求响应的数据
.then(response => this.info=response.data);
}
})
</script>
</body>
</html>
json数据
{
"name": "百度",
"url": "http://www.baidu.com",
"page": 66,
"isNonProfit": true,
"links": [
{"name": "Google",
"url": "http://www.google.com"
},
{"name": "Baidu",
"url": "http://www.baidu.com"
},
{"name": "Sougou",
"url": "http://www.sougou.com"
}
]
}