11_07_第六阶段：大前端进阶||07-Vue详解||P9：Axios异步通信【观看狂神随笔】
原创
©著作权归作者所有：来自51CTO博客作者狂野小白兔的原创作品，请联系作者获取转载授权，否则将追究法律责任
Vue：Axios异步通信
1. 什么是Axios
GitHub中文文档
在线CDN导入Axios【好处是不用在网上下载了】：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2. 第一个Axios应用程序
基本流程：
- 准备或者以及有的json数据
- 使用mounted()勾子函数，然后里面写对应的方法（ajax,JQuary也可以写到这里面）
- 使用data(){return{}}固定格式来写json中需要的数据（什么格式就返回什么）
{
"name": "zhixi的博客",
"url":
"page": 1,
"isNonProfit": true,
"address": {
"street": "单台村",
"city": "河南信阳",
"country": "中国"
}
}测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-clock，解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="vue" v-clock>
<div>{{info.name}}</div>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#vue",
//data：vm属性
//data()：是一个方法
data(){
return{
//请求的返回参数必须和json字符一样
//这里只是格式，可以不写一些属性，但是不能写错
info:{
name: null,
address: {
street: null,
city: null,
country: null
}
}
}
},
mounted(){ //钩子函数（链式），ES6新特性||../这个表示上一层文件夹中
axios.get('../data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
说明:
- 在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
- 使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
- 我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！
3. Vue的生命周期
官方文档
