Vue网络应用

axios基本使用

axios是一款易用、简洁且高效的http库，是一个可以用在浏览器和Node.js中的异步通信框架，其主要作用就是实现Ajax异步通信，由于Vue只关注视图层内容，所以作者推荐使用该框架完成网络通信内容

axios功能特点

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API（在JS中进行链式编程）
拦截请求和相应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

Vue实例的生命周期

每一个Vue实例都拥有完整的生命周期，即从开始船舰，初始化数据，编译模板，挂载DOM，渲染以及之后的不断更新渲染直到最后的卸载一系列过程，也就是一个Vue实例从创建到销毁的整个过程

在Vue实例的生命周期中，提供了一系列事件，可以让我们在事件触发时，注册相应的JS方法，利用我们注册的JS方法，更好的控制整个Vue实例（在这些事件响应方法中的this直接指向的是Vue实例），这些JS方法也被称为钩子，下面这幅图中展示了Vue的整个生命周期以及对应位置可以使用的钩子函数

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Vue Test</title>

    <!--解决标签闪烁问题--> 
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body> 
    <div id="vue" v-clock> 
        <!--将获取到的值在页面进行展示--> 
        <p>username: {{info.username}}</p> 
        <p>user's url: {{info.url}}</p> 
        <p>user's password: {{info.pwd}}</p> 
        <p>result boolean: {{info.boolean}}</p> 
        <p>user's school: {{info.sch}}</p> 
    </div>
    
    

    <!--利用cdn导入axios与vue--> 
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>


    <!--定义Vue实例--> 
    <script> 
        var app=new Vue({
            el: "#vue",
            data: {
            },
            //注意这里使用的是data(){}方法，用于获取返回值数据， 
            //与上面定义的data数据域并不相同 
            data(){
                return{
                    //请求的参数格式必须与数据格式一致才能正常获取 
                    info:{
                        "username": null,
                        "url": null,
                        "pwd": null,
                        "boolean": null,
                        "sch": null,
                        "List": []
                    }
                }
            },
            mounted(){ //钩子函数 支持链式变成 
                //通过axios进行网络操作，这里首先进行get操作请求相应数据，通过then方法获取相应结果， 
                //利用response将响应值赋给Vue实例中的相应对象
                axios.get("test.json").then(response=>(this.info=response.data))
            }
        })
    </script>
</body>
</html>

3-Vue网络应用

Vue网络应用

axios基本使用

axios功能特点

Vue实例的生命周期