在Vue使用Axios异步通信

为什么要使用Axios，因为Vue是专注于视图层的，所以在需要进行网络通信的时候，需要我们使用Axios进行通信，Axios就是Ajax。

如何使用？

在实例对象中使用mounted（）钩子函数。

     //钩子函数 链式编程 ES6新特性
        mounted(){
            //get就是get请求参数内容是请求的路径，then(response=>(这里是响应后的处理)）
            axios.get('../jiang.json').then(response=>(console.log(response.data)))
        }

如何获取返回的参数呢？

需要使用到data（）方法也在实例对象中使用。

里面写的返回类型和请求的json格式一样就可以了，最回在修改响应后做的事情，把这个响应回来的data数据赋值给user对象，user对象里面的属性就被填满了。

  data(){
            return{
                //请求的返回参数合适，必须和json字符串一样
                user :{
                    name : null,
                    address : {
                        street: null,
                        city: null,
                        country: null
                    },
                    links:[
                        {name:null,url:null},
                    ]

                }
            }
        },


   mounted(){
            //get就是get请求参数内容是请求的路径，then(response=>(这里是响应后的处理)）
            axios.get('../jiang.json').then(response=>(this.user=response.data))
        }

还有三种访问对象属性的格式

第一个是访问普通的属性，第二个是访问对象里面的属性，第三个是访问属性里面的属性

   <h1>{{user.name}}</h1>
    <h1>{{user.address.street}}</h1>
    <h1 v-for="item in user.links">{{item.name}}</h1>

解决闪烁问题

<!--v-cloak 解决闪烁问题-->
<style>
    [v-cloak]{
        display: none;
    }
</style>

1.定义样式

2.在div里添加 v-cloak属性