Vue-Axios

张小驰出没

发布于 2021-04-22 14:53:19

8110

发布于 2021-04-22 14:53:19

文章被收录于专栏：用户8506532的专栏

Vue-Axios

什么是Axios

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

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

GitHub：https://github.com/gxios/axios

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

第一个Axios实例

1.创建data.json

{
  "name":"MoYu",
  "url":"https://www.moyuzc.cn/",
  "page":1,
  "isNonProfit":true,
  "address": {
    "street":"含光门",
    "city":"陕西西安",
    "country":"中国"
  },
  "links":[
      {
        "name": "bilibili",
        "url": "https://space.bilibili.com/84493733"
      },
      {
        "name": "MoYu",
        "url": "https://moyu-zc.gitee.io/"
      }
    ]
}

2.Vue绑定

<div id="vue">div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue'
    });
script>

3.钩子函数

<script type="text/javascript">
    var vm = new Vue({
        el:'#vue',
        mounted(){   //钩子函数   链式编程  ES6新特性
            axios.get('../data.json').then(response=>(console.log(this.info=response.data)));
        }
    });
script>

成功获取

注意：response=> 该表达式为ES6新特性，如果出错，可以这样解决：

4.页面显示信息

<div id="vue">
    <div>
        {{info.name}}
        <br>
        {{info.address}}
    div>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue',
        data(){
            return{
                //请求的返回参数，必须和 json 字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                }
            }
        },
        mounted(){   //钩子函数   链式编程  ES6新特性
            axios.get('../data.json').then(response=>(console.log(this.info=response.data)));
        }
    });
script>

Vue-呼吸问题

在刚进入页面时，可能会出现如下情况：

显示的是html文件中的信息，而不是调用出的文字

过一会才会变为调用出的文字，这个就是Vue呼吸问题

解决方法

<div id="vue" v-clock>
div>

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        [v-clock]{
            display: none;
        }
    style>
head>

这个就可以啦

5.a标签绑定

<div id="vue" v-clock>
    <div>
        {{info.name}}
        <br>
        {{info.address}}
        <br>
        <a v-bind:href="info.url">点击a>
    div>
div>

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

点击 a 标签，就会进入你在 data.json ，设置好的 url