VUE Axios异步通信

Wogna

已于 2022-05-30 13:11:30 修改

阅读量67

点赞数 1

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

于 2022-05-29 20:40:19 首次发布

本文链接：https://blog.csdn.net/weixin_44999951/article/details/125035895

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Axios异步通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios异步通信</title>
</head>
<style>
    <!--  自定义标签，避免闪烁问题  但是我的没有成功，希望有好心人能帮我解答一下-->
    [v-clock]{
        display: none
    }
</style>
<body>

<!--定义盒子-->
<div id="Axios" v-clock>
<!--    听说除了div标签不用v-bind以外，别的数据绑定都要用v-bind-->
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <hr/>
    <a v-bind:href="info.url">点我</a>
</div>


<!--导入组件-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!--创建Vue对象-->
<script>
    var vm = new Vue({
        el:"#Axios",
        data:{
            info:{
                //感觉这个name属性很鸡肋，写不写上边都能.出来
                name:null
            }
        },
        mounted(){  //钩子函数，链式编程 ES6的新特性

            //data里边创建一个info对象，把响应后的数据传给上边的info对象  ps：我和弹幕都是这样李姐的
            axios.get('a.json').then(response=>(this.info=response.data))
        }
    });

</script>
</body>
</html>

Json数据

{
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

ps:我的放闪烁不能防闪烁，希望好心人能给解救一下。

Wogna

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE Axios异步通信

Axios异步通信<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Axios异步通信</title></head><style>  [v-clock]{ display
复制链接

扫一扫