The road to the Vue（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/csnz123123/article/details/118560981

一：什么是Axios

Axios 是一个开源的，可以用在浏览器端和NodeJs 的异步通信框架
主要作用就是实现Ajax的异步通信功能，特点如下：

从浏览器中创建 XMLHttpRequests

从node.js创建 http 请求

支持Promise API （JS中链式编程）

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换json数据

客户端支持防御XSRF（跨站请求伪装）

GitHub：https://github.com/axios/axios
中文文档：http://www.axios-js.com/

二：Axios用法

可根据官网查看
在这里插入图片描述

那么下面我们就来使用axios来获取json数据并展示在view层

1、手动创建一个json数据

{
  "name": "潮汕奴仔",
  "age": 21,
  "merit": [
    {
      "Sex": "男"
    },
    {
      "hobby": "女"
    },
    {
      "Url":"https://blog.youkuaiyun.com/csnz123123"
    }
  ]
}

2、创建一个html的demo来测试axios

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="demo">
    姓名：{{info.name}}<br>
    性别：{{info.merit[0].Sex}} <br>
    年龄：{{info.age}}<br>
    博客Link: <a v-bind:href="info.merit[2].Url">潮汕奴仔博客</a>
</div>


<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm = new Vue({
        el:"#demo",
        //data(),此时data不再是之前的那个属性 而是一个函数 用于返回ajax封装的数据
        data(){
            return {
                // 必须 和请求返回的参数合适，必须和json字符串一样
                info:{
                    name:null,
                    age:null,
                    merit:[
                        {Sex:null},
                        {Url:null}
                    ]
                }
            }
        },
        //钩子函数 ES6新特性
        mounted(){
            axios.get('data.json').then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>

注意要点

要点1、引入JS文件


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

要点2、根据官网文档的生命周期图例

在这里插入图片描述

我们使用mounted钩子函数获取json数据

//钩子函数 ES6新特性
        mounted(){
            axios.get('data.json').then(response => (this.info = response.data));
        }

要点3、data函数

data() 此时data不再是之前的那个属性而是一个函数用于返回ajax封装的数据
并且data中return的格式必须和请求返回的参数格式一致，必须和json字符串一样
(也可不写，但不能写错)

data(){
            return {
                // 必须 和请求返回的参数合适，必须和json字符串一样
                info:{
                    name:null,
                    age:null,
                    merit:[
                        {Sex:null},
                        {Url:null}
                    ]
                }
            }
        }

要点4、视图层(View层直接调用data()函数中的变量即可)

{{info.name}}

但是如果是a标签的话则需要使用 v-bind 绑定引号中也无需使用双花括号包裹

    博客Link: <a v-bind:href="info.merit[2].Url">潮汕奴仔博客</a>

要点5、解决闪烁问题(页面因网速原因先加载模板再替换数据)

使用样式解决

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

在对应的div上使用此样式

<div id="demo" v-clock>
    姓名：{{info.name}}<br>
    性别：{{info.merit[0].Sex}} <br>
    年龄：{{info.age}}<br>
    博客Link: <a v-bind:href="info.merit[2].Url">潮汕奴仔博客</a>
</div>