基本用法
<body>
<!--
应用场景：数据变化时执行导步或开销较大的操作
-->
<div id="app">
名：<input type="text" v-model="ming">
姓：<input type="text" v-model="xing">
<div>{{name}}</div> 输入框输入值显示也发生变化
<div>{{name2}}</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
ming:'',
xing:'',
name:''
},
watch:{//侦听组件实现
ming:function(e){//参数表示变化之后的值
this.name=this.xing+''+e
},
xing:function(e){
this.name=e+''+this.ming
}
},
computed:{//计算属性实现
name2:function(){
return this.xing+''+this.ming
}
}
});
</script>
</body>
监听用户名是否被注册
<body>
<!--
1.v-model实现数据绑定
2.提示信息
3.侦听器监听输入信息
采用侦听器监听用户名的变化
调用后台接口进行验证
根据验证结果调整提示信息
4.失去焦点触发事件
-->
<div id="app">
用户名:<input type="text" v-model.lazy="name">
<!-- 调用name函数，失去焦点的时候触发事件 -->
<span>{{tip}}</span>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
name:'',
tip:''
},
methods:{
checkname:function(name){
//调用接口，但是可以使用定时任务的方式模拟接口调用
var that = this
setTimeout(function(){
if(name=='admin'){
that.tip='用户名已经存在，请更换一个'
}else{
that.tip='用户名可以使用'
}
},2000)
}
},
watch:{
name:function(a){
//调用后台接口验证
this.checkname(a)
//修改提示信息
this.tip='正在验证...'
}
}
});
</script>
</body>