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