// 監(jiān)聽 類似于數(shù)據(jù)庫中的觸發(fā)器
watch:{
// name值修改后觸發(fā)
name:function(newValue,oldValue){
console.log("修改之前的數(shù)據(jù)："+oldValue+"修改之后的數(shù)據(jù)："+newValue);
},
// 對象屬性的監(jiān)聽
// "user.id":function(newValue,oldValue){
// console.log("修改之前的數(shù)據(jù)："+oldValue+"修改之后的數(shù)據(jù)："+newValue);
// },
// 對象的監(jiān)聽
user:{
handler:function(newValue,oldValue){
console.log("修改之前的數(shù)據(jù)："+oldValue.id+"修改之后的數(shù)據(jù)："+newValue.id);
},
// 深度監(jiān)聽 當對象中的屬性發(fā)生改變后也會監(jiān)聽
deep:true
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>watch vue事件監(jiān)聽</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,
}
},
// 監(jiān)聽 類似于數(shù)據(jù)庫中的觸發(fā)器
watch:{
// name值修改后觸發(fā)
name:function(newValue,oldValue){
console.log("修改之前的數(shù)據(jù)："+oldValue+"修改之后的數(shù)據(jù)："+newValue);
},
// 對象屬性的監(jiān)聽
// "user.id":function(newValue,oldValue){
// console.log("修改之前的數(shù)據(jù)："+oldValue+"修改之后的數(shù)據(jù)："+newValue);
// },
// 對象的監(jiān)聽
user:{
handler:function(newValue,oldValue){
console.log("修改之前的數(shù)據(jù)："+oldValue.id+"修改之后的數(shù)據(jù)："+newValue.id);
},
// 深度監(jiān)聽 當對象中的屬性發(fā)生改變后也會監(jiān)聽
deep:true
}
}
});
// 手動銷毀
// vm.$destroy();
vm.message="tom";
// 獲取元素的內(nèi)容 打印
console.log(vm.$refs.title.textContent);
// 打印內(nèi)容不一樣的原因
// 獲取內(nèi)容的時候，組件內(nèi)容dom元素還沒有更新完畢
// 組件更新完之后再顯示
vm.$nextTick(function(){
console.log(vm.$refs.title.textContent);
})
</script>
</body>
</html>
