1.概念
Axios是一个开源的可以用在浏览器和node.js的异步通信框架,他的主要功能是实现Ajax异步通信
2.Axios入门程序
2.1.准备json格式的文件
{"name": "小明","address": {"street": "雁塔","city": "西安","country": "中国"}
}
2.2.编写程序
<!--axios的CDN-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><div id="app"><div>{{info.name}}</div><div>{{info.address.street}}</div>
</div><script>var vm = new Vue({el: "#app",data(){return{//返回的数据,必须和json文件的格式一样info:{name: null,address: {street: null,city: null,country: null}}}},//钩子函数mounted(){//把得到的数据返回给infoaxios.get('./data.json').then(response=>(this.info=response.data));}});
</script>
- 在上面的程序,我们特别要关注mounted钩子函数部分,这里边写的就是Axios程序
- 表明从data.json文件里获取数据,然后将其返回给info
- 在vm对象的data方法中,封装了通过Axios框架获取的数据info
结果: