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的整个生命周期以及对应位置可以使用的钩子函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>