5.0、Vue-Axios异步通信

最新推荐文章于 2024-11-13 11:52:56 发布

澜色海湾

最新推荐文章于 2024-11-13 11:52:56 发布

阅读量157

点赞数

分类专栏： vue学习总结文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_52433668/article/details/123165452

版权

vue学习总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

5.0、Vue-Axios异步通信

由于我们的Vue专注于前端视图层，所以通信层交给Axiox、Ajax去实现就好

首先创建一个data.json文件

{
  "name": "java",
  "url": "https://www.baidu.com/",
  "page": 1,
  "isNoProfit": true,
  "address": {
    "street":"临安",
    "city": "中国",
    "country": "杭州"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "http://space.bilibli.com"
    },
    {
      "name": "百度",
      "url": "http://space.baidu.com"
    },
    {
      "name": "爱奇艺",
      "url": "http://space.aiqiyi.com"
    }
  ]

}

Vuetest.html文件

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vuetest5</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    {{info.name}}
    <a v-bind:href="info.url">点击事件</a>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        //注意这里是data方法，不是data属性
        data() {
            return {
                //请求返回的参数格式，必须和json字符串一样
                info: {
                    name: null,
                    url: null,
                    page: null,
                    isNoProfit: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    links: {
                        name: null,
                        url: null
                    }
                }
            }
        },
        mounted() {//钩子函数  链式编程  ES6新特性
            axios.get('../data.json').then(response=>(this.info = response.data));
        }
    });
</script>
</body>
</html>

我们可以类比Ajax来学习Axios：

首先Ajax接收数据，并且将数据渲染到视图时，需要将json格式的数据接收然后，操作Dom元素，完成数据与视图的拼接与渲染，相比之下比较繁琐。

而Axios先使用mounted()方法将json数据接收并且赋值给一个参数，然后去写data()方法，这里注意参数名字要和json数据里的参数名字一样。然后直接用{{}}去取值即可。

所以Axios和Ajax相比之下，他不需要去拼接，较为简便。