Vue-Axios
Axios网络通信
Axios：主要作用是实现AJAX异步通信
data.json:
{
"name": "yuanyu",
"url": "https://www.cnblogs.com/yuanyu610/",
"page": 1,
"isNonProfit": true,
"address": {
"province": "江西",
"country": "中国"
},
"link": [
{
"name": "yuan",
"url": "https://www.cnblogs.com/yuanyu610/"
},
{
"name": "yu",
"url": "https://www.cnblogs.com/yuanyu610/"
}
]
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- v-clock:解决闪烁问题-->
<style>
[v-clock]{
display: none; /*白屏，不显示模板*/
}
</style>
<div id="vue" v-clock>
<div>{{info.name}}</div>
<div>{{info.address.province}}</div>
<a v-bind:href="info.url">点我</a>
</div>
<!--引入js、vue文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#vue",
data(){
// 请求的返回参数，必须和json的字符串一致
return{
info:{
name:null,
address:{
province:null,
country:null
},
url:null
}
}
},
mounted(){ //钩子函数，链式编程
axios.get("data.json").then(response=>(this.info=response.data))
}
});
</script>
</body>
</html>
