zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    MD5
    第一阶段冲刺(十)
    团队作业进度报告
    第一阶段冲刺(九)
    团队作业进度报告
    第一阶段冲刺(八)
    第一阶段冲刺(七)
    团队作业进度报告
    第一阶段冲刺(六)
    团队作业进度报告
  • 原文地址:https://www.cnblogs.com/renfanzi/p/13200670.html
Copyright © 2011-2022 走看看