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