Vue:Axios异步通信
- idea设置中查JavaScript,改为ES6
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": "https://www.cnblogs.com/zhangzhixi",
"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响应回来的数据格式匹配!