<!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>