11_07_第六阶段：大前端进阶||07-Vue详解||P9：Axios异步通信【观看狂神随笔】

狂野小白兔

已于 2022-05-20 10:17:14 修改

阅读量123

点赞数 1

分类专栏：笔记文章标签： vue.js javascript ajax Axios异步通信

于 2021-09-27 15:18:29 首次发布

本文链接：https://blog.csdn.net/qq_40572023/article/details/120491510

版权

笔记专栏收录该内容

159 篇文章 3 订阅

订阅专栏

Vue：Axios异步通信

idea设置中查JavaScript，改为ES6

1. 什么是Axios

在这里插入图片描述
GitHub
中文文档
在线CDN导入Axios【好处是不用在网上下载了】：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 第一个Axios应用程序

在这里插入图片描述
基本流程：

准备或者以及有的json数据
使用mounted()勾子函数，然后里面写对应的方法（ajax,JQuary也可以写到这里面）
使用data(){return{}}固定格式来写json中需要的数据（什么格式就返回什么）

{
  "name": "zhixi的博客",
  "url": "https://www.cnblogs.com/zhangzhixi",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "单台村",
    "city": "河南信阳",
    "country": "中国"
  }
}

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


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

<div id="vue" v-clock>
    <div>{{info.name}}</div>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        //data：vm属性
        //data()：是一个方法
        data(){
          return{
              //请求的返回参数必须和json字符一样
              //这里只是格式，可以不写一些属性，但是不能写错
              info:{
                  name: null,
                  address: {
                      street: null,
                      city: null,
                      country: null
                  }
              }
          }
        },
        mounted(){  //钩子函数（链式），ES6新特性||../这个表示上一层文件夹中
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>

</body>
</html>

在这里插入图片描述
说明:

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！

3. Vue的生命周期

在这里插入图片描述
官方文档

狂野小白兔

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
11_07_第六阶段：大前端进阶||07-Vue详解||P9：Axios异步通信【观看狂神随笔】

Vue：Axios异步通信idea设置中查JavaScript，改为ES61. 什么是AxiosGitHub中文文档在线CDN导入Axios【好处是不用在网上下载了】：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>2. 第一个Axios应用程序{ "name": "zhixi的博客", "url": "https://www.cnblogs.com/zhangzhix
复制链接

扫一扫