<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input v-model="firstName">
名:<input v-model="lastName">
<!--用一个fullName的计算属性-->
<div>{{fullName}}</div>
<!--监听变化的次数-->
<div>{{count}}</div>
</div>
<!--计算属性:一个属性fullName的值是根据其它的数据项计算出来的一个新的结果。-->
<!--watch监听器:监测某一个数据或者计算属性发生了变化,一旦发生变化,我们就可以在监听器里面做一些业务逻辑。-->
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
// 计算变化初始值
count:"0"
},
// 计算方法
computed:{
fullName:function () {
// 通过下面计算
return this.firstName+''+this.lastName
}
},
// 监听器
watch:{
// 监听fullName的变化
fullName:function () {
// 变化则加一
this.count ++
}
// 监听firstName的变化
// firstName:function () {
// // 变化则加一
// this.count ++
// },
// lastName:function () {
// // 变化则加一
// this.count ++
// }
}
})
</script>
</body>
</html>