🎈个人公众号:🎈 :✨✨ 可为编程 ✨✨ 🍟🍟
🔑个人信条:🔑知足知不足 有为有不为 为与不为皆为可为🌵
🍉本篇简介:🍉 本片详细说明了Vue学习之利用Axios实现异步通信原理,并给出具体操作实例,如有出入还望指正。关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!
利用Axios实现异步通信原理
在前端工作的时候,大部分数据来源都是通过后台传递的json数据来进行前端的数据展示,所以接下来就进行一个模拟Ajax的异步通信。以后可能会用到。
<div id="app">
<!--用来获取json中的数据 对象名称为info-->
<div>名称:{{info.name}}</div>
<div>地址:{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
<div>链接:<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
info: {
name: null,
address: {
country: null,
city: null,
street: null
},
url: null
}
}
},
mounted() {
axios
.get('data.json')
.then(response => (this.info = response.data));
}
});
</script>
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我也不太明白这种**data(){}**写法,解释如下:
在new一个Vue的时候,data后面的参数必须是函数类型data:
function(){}而其他形式则类似于json数据,是有点懵的
写法,应该是双向绑定,MVVM的写法嘛,所以是直接创建组
件,然后数据渲染
欢迎大家关注【可为编程】,成长,进步,编程,技术、掌握更多知识!
这里是一个真诚的***青年技术交流QQ群:761374713***,不管你是大学生、社畜、想学习变成的其他人员,欢迎大家加入我们,一起成长,一起进步,真诚的欢迎你,不管是技术,还是人生,还是学习方法。有道无术,术亦可求,有术无道,止于术。