5.0、Vue-Axios异步通信
由于我们的Vue专注于前端视图层，所以通信层交给Axiox、Ajax去实现就好
首先创建一个data.json文件
{
"name": "java",
"url": "https://www.baidu.com/",
"page": 1,
"isNoProfit": true,
"address": {
"street":"临安",
"city": "中国",
"country": "杭州"
},
"links": [
{
"name": "bilibili",
"url": "http://space.bilibli.com"
},
{
"name": "百度",
"url": "http://space.baidu.com"
},
{
"name": "爱奇艺",
"url": "http://space.aiqiyi.com"
}
]
}
Vuetest.html文件
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vuetest5</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
{{info.name}}
<a v-bind:href="info.url">点击事件</a>
</div>
<script>
var vm = new Vue({
el: '#app',
//注意这里是data方法，不是data属性
data() {
return {
//请求返回的参数格式，必须和json字符串一样
info: {
name: null,
url: null,
page: null,
isNoProfit: 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>
我们可以类比Ajax来学习Axios：
首先Ajax接收数据，并且将数据渲染到视图时，需要将json格式的数据接收然后，操作Dom元素，完成数据与视图的拼接与渲染，相比之下比较繁琐。
而Axios先使用mounted()方法将json数据接收并且赋值给一个参数，然后去写data()方法，这里注意参数名字要和json数据里的参数名字一样。然后直接用{{}}去取值即可。
所以Axios和Ajax相比之下，他不需要去拼接，较为简便。
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
