P8 Axios异步通信

最新推荐文章于 2024-09-03 13:55:21 发布

原创最新推荐文章于 2024-09-03 13:55:21 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

在这里插入图片描述

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>