欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-04 16:22:45
...

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

axios -vue 网络应用，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>

获取笑话axios -vue 网络应用，Vue结合网络数据开发应用

相关标签： VUE vue.js

上一篇： jquery如何改变html标签的样式(两种实现方法)

下一篇： vue中axios的应用

推荐阅读