# 看案例的用法
# 1 把被监听的数据协作函数
<div id="app"> | |
<span>请输入你喜欢的城市名称</span> <input type="text" v-model="cityName" /> | |
</div> | |
var vm = new Vue({ | |
el: '#app', | |
data: { | |
cityName: "杏花林" | |
}, | |
watch: { | |
cityName(newName, oldName) { | |
console.log(this.cityName) | |
}, | |
deep:true, // 深度监听 | |
immediate: true,// 第一次加载就被监听 | |
}, | |
methods: { | |
} | |
}) |
# 2 写作方法的引用
<div id="app"> | |
<span>请输入你喜欢的城市名称</span> <input type="text" v-model="cityName" /> | |
</div> | |
var vm = new Vue({ | |
el: '#app', | |
data: { | |
cityName: "杏花林" | |
}, | |
watch: { | |
cityName: 'nameChange', //注意 要放在引号中 | |
deep:true, // 深度监听 | |
immediate: true,// 第一次加载就被监听 | |
}, | |
methods: { | |
nameChange() { | |
console.log("你改变文本了") | |
} | |
} | |
}) |
# 3 要监听的是一个对象的时候
<div id="app"> | |
<span>请输入你喜欢的城市名称</span> <input type="text" v-model="cityName.name" /> | |
</div> | |
var vm = new Vue({ | |
el: '#app', | |
data: { | |
cityName:{name:"杏花村","ids":1} | |
}, | |
watch: { | |
handler(newName, oldName) { | |
// 无论监听什么，无论以上三种哪个函数若有参数 第一个参数为需要监听的(cityName.name)改变后的新数据，第二个参数为需要监听的(cityName.name)之前的数据 newName 可以改为hhh 同理第二个参数。 | |
console.log(newName) // 只要鼠标进入输入框有所改变，就会触发 | |
}, | |
deep:true, // 深度监听 | |
immediate: true,// 第一次加载就被监听 | |
}, | |
methods: { | |
} | |
}) |
- 注意不知怎么回事，深度监听对象，没法实现其内部例如 4。
# 4 下面的例子，并不起作用，还在研究怎么回事。
<div id="app"> | |
<span>请输入你喜欢的城市名称</span> <input type="text" v-model="cityName.name" /> | |
</div> | |
var vm = new Vue({ | |
el: '#app', | |
data: { | |
cityName:{name:"杏花村","ids":1} | |
}, | |
watch: { | |
cityName: { | |
handler(newName, oldName) { | |
// ... | |
console.log(this.cityName.name) | |
}, | |
}, | |
deep:true, // 深度监听 | |
immediate: true,// 第一次加载就被监听 | |
}, | |
methods: { | |
} | |
}) |
