目录
一个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/vue.js"></script>
<title>Document</title>
<style>
.classdiv {
border: 1px solid green;
margin: 5px;
}
</style>
</head>
<body>
<div id="app">
<div class="classdiv">
<p>{
{count}}</p>
<p>{
{user.name}}</p>
<input type="button" value="增加count" @click="addCount">
<input type="button" value="修改user.name" @click="updateName">
</div>
</div>
</body>
<script>
var vue = new Vue({
el: '#app',
data: {
count : 1,
user : {
id : 1,
name : '博子妹妹'
}
},
methods: {
addCount() {
this.count ++;
},
updateName () {
this.user.name = '张三';
}
},
// 定义监听器
watch : {
count :{
handler(newValue, oldValue) {
console.log(newValue, oldValue);
}
},
'user.name' : function(newVal,oldVal) {
console.log(newVal,oldVal);
}
}
});
</script>
</html>
点击 '增加count', 上面的数字一次一次的在增加至9, 后台:
监听属性
想要监听上述的count的值的修改, 就要在vm中加入监听属性:
var vue = new Vue({
el: '#app',
data: {
count : 1,
user : {
id : 1,
name : '博子妹妹'
}
},
methods: {
addCount() {
this.count ++;
},