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