当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue利用Axios实现异步通信原理

Vue利用Axios实现异步通信原理

2020年07月08日  | 移动技术网IT编程  | 我要评论

利用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的写法嘛，所以是直接创建组
 件，然后数据渲染

本文地址：https://blog.csdn.net/weixin_42103983/article/details/107166031

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网