VUE网络交互axios（网络请求库）

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
</head>
<body>
<div id="vue_click">
    <input type="button" value="Dom点击按钮" id="dom_get_click">
    <input type="button" value="Vue点击按钮" v-on:click="show">
    <div>{{message}}</div>

</div>

<!--开发云vue.js-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
<!--<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>-->
<script src="axios.js"></script>
<script>

    document.querySelector("#dom_get_click").onclick = function () {
        axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
            function (response) {
                console.log("get方法")
                console.log(response)
            },
            function (error) {
            }
        )
        axios.post("https://autumnfish.cn/api/user/reg", {"username": "张三"}).then(
            function (response) {
                console.log("post方法")
                console.log(response)
            },
            function (error) {
            }
        )

    }


    var vue_click = new Vue({
        el: "#vue_click",
        data: {
            message: "asdf",
        },
        methods: {
            show: function () {
                var that = this; //这个很重要
                axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
                    function (response) {
                        console.log("get方法")
                        console.log(response)
                        // console.log("message:", this.message)
                        // 注意，这时候，this.message虽然变了，但是上面的模板数据没变
                        // this.message = response.data.jokes[0]
                        // console.log("response.data:", response.data)
                        // console.log("message:", this.message)
                        // 那怎么解决这个问题呢, 在axios上面声明一个 var that = this;就行了
                        // 问题在于定义域，如果不理解，可以去看看定义域，就明白了
                        that.message = response.data.jokes[0];
                    },
                    function (error) {
                        console.log(error)
                    }
                )

            }
        }
    })
</script>
</body>
</html>

 

posted @ 2020-06-28 00:18  我当道士那儿些年  阅读(272)  评论(0)  编辑  收藏  举报