// 监听 类似于数据库中的触发器
watch:{
// name值修改后触发
name:function(newValue,oldValue){
console.log("修改之前的数据："+oldValue+"修改之后的数据："+newValue);
},
// 对象属性的监听
// "user.id":function(newValue,oldValue){
// console.log("修改之前的数据："+oldValue+"修改之后的数据："+newValue);
// },
// 对象的监听
user:{
handler:function(newValue,oldValue){
console.log("修改之前的数据："+oldValue.id+"修改之后的数据："+newValue.id);
},
// 深度监听 当对象中的属性发生改变后也会监听
deep:true
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>watch vue事件监听</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name"/>
<input type="text" v-model="user.id"/>
</div>
<script type="text/javascript">
// 挂载的两种方法
// var vm = new Vue({
// data:{
// }
// }).$mount("#app");
var vm = new Vue({
el:"#app",
data:{
name:"aaa",
user:{
id:001,
}
},
// 监听 类似于数据库中的触发器
watch:{
// name值修改后触发
name:function(newValue,oldValue){
console.log("修改之前的数据："+oldValue+"修改之后的数据："+newValue);
},
// 对象属性的监听
// "user.id":function(newValue,oldValue){
// console.log("修改之前的数据："+oldValue+"修改之后的数据："+newValue);
// },
// 对象的监听
user:{
handler:function(newValue,oldValue){
console.log("修改之前的数据："+oldValue.id+"修改之后的数据："+newValue.id);
},
// 深度监听 当对象中的属性发生改变后也会监听
deep:true
}
}
});
// 手动销毁
// vm.$destroy();
vm.message="tom";
// 获取元素的内容 打印
console.log(vm.$refs.title.textContent);
// 打印内容不一样的原因
// 获取内容的时候，组件内容dom元素还没有更新完毕
// 组件更新完之后再显示
vm.$nextTick(function(){
console.log(vm.$refs.title.textContent);
})
</script>
</body>
</html>
