<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
</head>
<body>
<div id='app'>
{{msg}}
<input type="text" v-model="msg">
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
msg: "abc"
},
// watch选项
// 作用: 监测data数据变化
// 特点: 被监测data数据变化时 自动触发函数
watch: {
// 被监测的数据:function(新值,old值){}
// msg:function(newVal,oldVal){
// }
msg(newV, oldV) {
console.log(newV, oldV);
// 异步操作 比如ajax 定时器等
}
},
watch: {
msg(newV, oldV) {
console.log('新值' + newV, '旧值' + oldV);
}
},
methods: {}
});
</script>
</body>
</html>
