P8 Axios异步通信

最新推荐文章于 2024-03-01 17:25:35 发布

蝶衣_疯魔

最新推荐文章于 2024-03-01 17:25:35 发布

阅读量116

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/shujuku____/article/details/105322738

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在这里插入图片描述

vue中cdn引入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!DOCTYPE html>

<meta charset="UTF-8" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<title>Title</title>
<style>
<!--解决闪烁问题    属性选择器、在没有加载之前 白屏-->
[v-cloak] {
    display: none;
}
</style>
</head>
<body>
<!--view层 模板-->
<div id="app" v-cloak>
<p>{{info.code}}</p>
<p>{{info.date}}</p>
<p>{{info.ciba}}</p>
<img v-bind:src="info.imgurl">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    var vm = new Vue({

        el:"#app",
        //data: 属性 ----是属于vm的
        data(){
            return{
                //请求的返回参数格式，必须和json字符串一样
                info:{
                    code: null,
                    date: null,
                    ciba: null,
                    imgurl: null
                }
            }
        },
        mounted(){//钩子函数，链式编程，ES6新特性
            axios.get('https://api.ooopn.com/ciba/api.php').then(respones=>(this.info=respones.data))
        }
    });

</script>

</body>
</html>

在这里插入图片描述

网页测试更改网络速度
在这里插入图片描述

蝶衣_疯魔

关注

0
点赞
踩
0

收藏

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

vue中cdn引入axios<script src="https://unpkg.com/axios/dist/axios.min.js"></script><!DOCTYPE html><meta charset="UTF-8" xmlns:v-bind="http://www.w3.org/1999/xhtml" x...
复制链接

扫一扫

专栏目录