三、帧听器
帧听器的基本使用
<div id="root">
<input type="text" v-model="username"/>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
username:''
},
watch:{
---1、帧听器的用法
//要监听谁，就把谁拿过来当方法名字
//oldval变化前的旧值，newval输入的新值
username:function(newval,oldval){
console.log(oldval,newval)
---2、实战使用帧听器通过Ajax发送Get请求
//调用jquery发起Ajax请求，判断username是否被占用
if (newval===''){
return
}else{
$.get('xxx.xxx.xxx/api/'+newval,function(result){
console.log(result)
})
}
}
}
})
</script>
帧听器immediate属性
<div id="root">
<input type="text" v-model="username"/>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
username:'admin'
},
watch:{
//01是方法格式帧听器
//以下是对象帧听器
username:{
//帧听器处理函数
handler(newval,oldval){
console.log(newval,oldval)
}
},
//immediate 控制是否自动触发,刷新加载 立马触发一次handler
immediate:true //默认为false
}
})
</script>
帧听器deep属性
<div id="root">
<input type="text" v-model="info.username"/>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
info:{
username:'zhangsan'
}
},
watch:{
info:{
//深度监听info对象中属性值的变化
deep:true,
headler(newval,oldval){
console.log(newval,oldval)
}
}
}
})
</script>
