axios + vue实现接口调用

最新推荐文章于 2024-10-04 00:46:18 发布

Record growth...

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量130

点赞数

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

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128367567

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>
<head>
    <title>vue</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
<body>
    <div class="container mt-5">
        <div id="app">
            <button class="btn btn-primary mb-4" @click="getJoke"> 点我获取一条笑话</button>
            <div class="card card-body disabled" >{{joke}}</div>
        </div>
    </div>
</body>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    // 我自己的script
    var app = new Vue({
        el:'#app',
        data:{
            joke:"i am a joke.",
        },
        methods:{
            getJoke(){
                // this.joke = "hello";
                // 在axios里面的this识别不了
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then
                (function(response){
                    that.joke = response.data
                },function (err){})
            }
        }
    })




</script>


</html>