Vue结合Axios异步请求json 新手坑！

Vue结合Axios异步请求json

我在学习Vue的时候，由于官方不推荐使用jQuery因为jQuery需要频繁的改动Dom所以Vue官方推荐使用Axios，了解到Axios这个http库
下面来说一下使用Axios的一些基本流程

首先导入：Vue.js库 我这里使用的是cdn在线导入的方式：

	<!--axios cdn在线引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

首先目录结构：

然后，访问我本地的json数据。这里Axios的get我写在beforeMount这个方法里面

第一种写法，是网上目前看到最多的，但是我觉得对小白不太友好，我就自己写了一个

<script type="text/javascript">
			var myvue =new Vue({
				el:"#app",
				data(){
					return{
						info:{
							name:null,
							sites: [
								{
									name: null,
									url: null
								}
							]
						}
					}
				},
				beforeMount:function(){
					axios.get('data.json').then(response=>(this.info=response.data));	
				}
				
			})

第二种写法，我自己写了一个

<script type="text/javascript">
			var myvue =new Vue({
				el:"#app",
				data(){
					return{
						info:{
							name:null,
							sites: [
								{
									name: null,
									url: null
								}
							]
						}
					}
				},
				beforeMount:function(){
					axios.get('data.json').then(function(response){
						console.log(response)
						//这个myvue是我自己定义了一个 new Vue()的一个变量
						myvue.$data.info=response.data
						console.log("这是this.info")
						console.log(myvue.$data.info)
						console.log(myvue.$data.info.name) 
						
					});
				}
				
			})
		</script>

info里面是json的格式
这里为什么要

myvue.$data.info

这样写？为什么不this.info?
这里坑来了，使用箭头函数调用跟this.info不是同一个this，欸就很坑！在这里卡了半个多小时，明明数据都拿到了但是就传递不过去，可以说是灵异事件了，后来了解到
话不多说直接上图！


文章地址：https://www.cnblogs.com/xxcn/p/11056495.html
话又说回来了，为什么要用XXX.$data.info因为这样可以直接调用你创建的vue里面的data
好嘞，问题解决！