<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:111,
b:2
}
});
vm.$watch('a',function(){//监听器，a是监听哪个属性变化，
alert('发生变化了');
this.b=this.a+100;
});
document.onclick=function(){
vm.a=1;
};
};
</script>
</head>
<body>
<div id="box">
{{a}}
<br>
{{b}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
aajson:{name:'strive',age:16},
b:2
}
});
vm.$watch('aajson',function(){//不能监听json
alert('发生变化了');
});
document.onclick=function(){
vm.aajson.name='aaa';
};
};
</script>
</head>
<body>
<div id="box">
{{aajson | json}} <!-- 后面的json是解析成json字符串 -->
<br>
{{b}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
ajson:{name:'strive',age:16},
b:2
}
});
vm.$watch('ajson',function(){
alert('发生变化了');
},{deep:true});
document.onclick=function(){
vm.ajson.name='aaa';
};
};
</script>
</head>
<body>
<div id="box">
{{ajson | json}}
<br>
{{b}}
</div>
</body>
</html>
