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(){
        //把得到的数据返回给info
      axios.get('./data.json').then(response=>(this.info=response.data));
    }
  });
</script>

• 在上面的程序，我们特别要关注mounted钩子函数部分，这里边写的就是Axios程序
• 表明从data.json文件里获取数据，然后将其返回给info
• 在vm对象的data方法中，封装了通过Axios框架获取的数据info

结果：