axios可以代替ajax（使用ajax需要频繁操作dom），vue中建议使用axios来实现通信。
axios中文文档http://axios-js.com/zh-cn/docs/
步骤：
要使用axios，先安装，我这里使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
准备一个本地json文件用来测试
{
"name":"wt",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "WoodStreet",
"city":"London",
"country": "UK"
}
}
拿文件，get然后得到response，把response的json送给data方法中的info，再在页面展示（注意点写在注释中了）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo02</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app1">
<p>------------anxios-测试------------</p>
<div>name:{{info.name}}</div>
<p>address:{{info.address.city}}</p>
</div>
<script>
var vm = new Vue({
el:"#app1",
data(){//这个方法用来拿axios得到的数据，注意要和vm中的data属性做区别
return{
info:{//info和拿来的json文件对应，info中的键值对的key必须要和json中的一样，value会被json中的取代，可以只写一部分数据
name:null,
address:{
street: null,
city:null,
country:null
}
}
}
},
mounted() { //钩子函数，用来使用axios，es6新特性
axios.get('data.json').then(response=>(this.info=response.data));//请求然后得到响应，将响应的数据response.data交给this.info
//这个请求被拦截，因为Access to XMLHttpRequest at 'file:///D:/codes/vue/vueStudy/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
//切换到fiefox，又被拦截，因为已拦截跨源请求：同源策略禁止读取位于 file:///D:/codes/vue/vueStudy/data.json 的远程资源。（原因：CORS 请求不是 http）。
}
});
</script>
</body>
</html>
关于浏览器拦截的问题，在网上找到的解决方案https://chrome-allow-file-access-from-file.com/windows.html
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
