vue页面和axios请求数据的结合

最新推荐文章于 2024-07-03 08:00:00 发布

春风霓裳

最新推荐文章于 2024-07-03 08:00:00 发布

阅读量818

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43470725/article/details/122526170

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

参考：https://cn.vuejs.org/v2/guide/components.html?
http://www.axios-js.com/

https://blog.csdn.net/weixin_49731633/article/details/114893700

使用idea编写环境：

1、下载vue.js插件

在这里插入图片描述

2、idea选择es6和以上的

在这里插入图片描述

3、创建json测试数据：

在这里插入图片描述

{
  "name": "李白",
  "age": "5000",
  "url": "https://www.bilibili.com/",
  "address": {
    "street": "寒光吗",
    "city": "陕西西安",
    "country": "中国"
  },
  "links":[
    {
      "name" : "bibibiibli",
      "url" : "https://www.bilibili.com/"
    },
    {
      "name" : "春风霓裳",
      "url" : "https://www.bilibili.com/"
    },
    {
      "name" : "百度",
      "url" : "https://www.baidu.com/"
    }
  ]

}

4、创建html:

<!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>{{info.address.city}}</div>

    <a v-bind:href="info.url">b站</a>

</div>

<!--1、导入axiose-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--1、导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">

    var vm = new Vue({

       el: '#vue',
        //data属性
        data: {

        },
        //data()方法 用于获取axios里面返回的数据
        data(){
            return{
                //请求的返回参数格式，必须和axios所得到的json字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted(){//钩子函数  链式编程  ES6新特性
           axios.get('../data.json').then(response=>(this.info=response.data));
        }

    });

</script>


</body>
</html>

结果：
在这里插入图片描述

分析：

vue双向数据原则：
视图和模型的数据双向影响
1、{{取值}}
2、v-bind: 绑定名= “绑定值”

mvvm模式：
vue是一个试图层的框架，不包含通信功能；

这个为view层模板：

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

    <a v-bind:href="info.url">b站</a>

</div>

网络通信：jqury.ajax通用的,要用真实dom,和vue用虚拟dom的思想相左
专门适用于虚拟dom高性能的异步通信：axios
axios:
在这里插入图片描述

通过查看vue的生命周期dom渲染，可以知道，使用mounted钩子函数，可以在渲染页面前将数据加载进去，所以就用mounted函数去得到axios请求数据，然后得到的数据，通过data()方法，绑定vue的data方法中的return里面的返回值里面，这里的info就是vue的值，所以axios在这里调用该vue对象中的info传值给他，然后我们就可以在绑定了该vue组件的标签里面获得该info的值了！！！！

<script type="text/javascript">

    var vm = new Vue({

       el: '#vue',
        //data属性
        data: {

        },
        //data()方法 用于获取axios里面返回的数据
        data(){
            return{
                //请求的返回参数格式，必须和axios所得到的json字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted(){//钩子函数  链式编程  ES6新特性
           axios.get('../data.json').then(response=>(this.info=response.data));
        }

    });

</script>

在这里插入图片描述

vue生命周期图：https://juejin.cn/post/6844904110190231560?utm_campaign=sembaidu&utm_medium=sem_baidu_jj_pc_dc01&utm_source=bdpcjjwz04933
在这里插入图片描述

春风霓裳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue页面和axios请求数据的结合

参考：https://cn.vuejs.org/v2/guide/components.html?http://www.axios-js.com/https://blog.csdn.net/weixin_49731633/article/details/114893700使用idea编写环境：1、下载vue.js插件2、idea选择es6和以上的3、创建json测试数据：{ "name": "李白", "age": "5000", "url": "https://www.bi
复制链接

扫一扫

专栏目录