<div id="app">
<input type="text" name="" id="" v-model="username">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
username: "admin"
},
// 所有的侦听器,都应该被定义到 watch 节点下
watch: {
// 侦听器本质上是一个函数,要监听哪个数据的变化,就把数据作为方法名即可
// 新值在前,旧值在后
username (newval) {
// console.log(newval);
if (newval == '') {
return
}
// 1.调用jquery中的Ajax发起请求,判断 newval 是否被占用!!
$.get("https://www.escook.cn/api/finduser/" + newval, function (result) {
console.log(result);
})
}
},
methods: {}
});
// 侦听器的格式
// 1.方法格式的侦听器
// 缺点:无法在刚进入页面的时候,自动触发
// 2.对象格式的侦听器
// 好处:可以通过 immediate选项,让侦听器自动触发
</script>
<div id="app">
<input type="text" name="" id="" v-model="username">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
username: "admin"
},
// 所有的侦听器,都应该被定义到 watch 节点下
watch: {
// 定义对象格式的侦听器
username: {
// 侦听器的处理函数
handler (newval, oldval) {
console.log(newval, oldval);
},
// immediate 选项的默认值是false
// Immediate 的作用是:控制侦听器是否自动触发一次
immediate: true
}
},
methods: {}
});
</script>
// 侦听器的格式
// 1.方法格式的侦听器
// 缺点:无法在刚进入页面的时候,自动触发
// 2.对象格式的侦听器
// 好处:可以通过 immediate选项,让侦听器自动触发
<div id="app">
<input type="text" name="" id="" v-model="info.username">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
// 用户信息的对象
info: {
username: "admin"
}
},
// 所有的侦听器,都应该被定义到 watch 节点下
watch: {
/* info (newval) {
console.log(newval);
} */
/* info: {
handler (newval) {
console.log(newval);
},
// 开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器
deep:true
} */
// 如果要侦听的是对象的子属性的变化,则必须包裹一层单引号
'info.username' (newval) {
console.log(newval);
}
},
methods: {}
});
// 侦听器的格式
// 1.方法格式的侦听器
// 缺点:无法在刚进入页面的时候,自动触发
// 缺点:如果侦听器是一个对象,如果对象中的属性发生了变化,不会触发侦听器
// 2.对象格式的侦听器
// 好处:可以通过 immediate选项,让侦听器自动触发
// 好处:可以通过 deep选项,让侦听器深度监听对象中每个属性的变化
</script>