axios -vue 网络应用，Vue结合网络数据开发应用

最新推荐文章于 2023-03-29 16:59:55 发布

Roam-G

最新推荐文章于 2023-03-29 16:59:55 发布

阅读量299

点赞数 2

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41290863/article/details/111461051

版权

VUE 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

网络应用，Vue结合网络数据开发应用

资料地址

http://https：//github.com/axios/axios

官网在线引用地址

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

<!DOCTYPE html>
<!-- axios-vue  -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1 .  axios 官网提供的在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 2. vue -->
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>

    <!--3. v  -->
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>

    <!-- 4.vm -->
    <script>
        /*
        接口：随机获取一个笑话
        请求地址：https://autumnfish.cn/api/joke
        请求方法：get
        请求参数：无
        响应内容：随机笑话
        */
       var app = new Vue({
            el:'#app',
            data:{
                joke:"很好笑的笑话！"
            },
            methods:{
                getJoke:function(){
                    // 保存当前this
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then
                    (function(response){
                        console.log(response.data);
                        that.joke = response.data;
                    },function(err){ })
                },
            }
       });
    </script>
</body>
</html>

获取笑话

Roam-G

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
axios -vue 网络应用，Vue结合网络数据开发应用

网络应用，Vue结合网络数据开发应用资料地址http://https：//github.com/axios/axios官网在线引用地址 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫