<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{ myMsg }}</p> <button @click="clickHandler">修改</button> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: "#app", data() { return { msg: "alex", age: 18, } }, //在methods屬性 和 computed屬性 里聲明的所有的方法里面的this指的都是vue, 里面不要用箭頭 *********** //箭頭函數 只用在定時器和ajax里面 methods: { //里面的每一個方法要掛載到 vm上 clickHandler() {//單體函數中的this就是當前對象vm console.log(this); this.msg = "wusir"; // 當msg的數據屬性 發生改變,下面的watch就會立馬監聽** this.age = 20; }, clickHandler2: function () {//這個里面的this也是當前對象vm console.log(this) //在聲明的函數內部 this指的是當前對象vue }, //箭頭函數 只用在定時器和ajax里面 clickHandler3: () => {//但是箭頭函數中的this是當前對象的父類window method里面不要用箭頭 console.log(this)//在聲明的函數內部 this指的是當前對象vm的父類 window }, }, computed: { //對應的是一個對象 里面放key-value 計算屬性默認只有getter方法 監聽的是msg和age myMsg: function () { //聲明一個方法 //寫業務邏輯 return `我的名字叫${this.msg},年齡是${this.age}`; } } }) </script> </body> </html>