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

🎈个人公众号:🎈 :✨✨ 可为编程 ✨✨ 🍟🍟
🔑个人信条:🔑知足知不足 有为有不为 为与不为皆为可为🌵
🍉本篇简介:🍉 本片详细说明了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的写法嘛，所以是直接创建组
 件，然后数据渲染