Vue.js侦听器实战：数据验证与实时更新-优快云博客

本文链接：https://blog.youkuaiyun.com/PengK_aha/article/details/128081448

侦听器
   1.侦听器的应用场景
       数据变化时执行异步或开销比较大的操作
       数据一旦发生变化就通知侦听器所绑定的方法

   2.侦听器的使用方法
       watch: {
           firstName: function(val){
               this.fullName = val + ' ' + this.lastName;
           },
           lastName: function(val){
               this.fullName = this.firstName + ' ' + val;
           }
       },

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<span>名：</span>
				<span>
					<input type="text" v-model="firstName"/>
				</span>
			</div>
			<div>
				<span>姓：</span>
				<span>
					<input type="text" v-model="lastName"/>
				</span>
			</div>
			<div>
				{{fullName}}
			</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	5.5 侦听器
	1.侦听器的应用场景
		数据变化时执行异步或开销比较大的操作
		数据一旦发生变化就通知侦听器所绑定的方法
		
	2.侦听器的使用方法	
		watch: {
			firstName: function(val){
				this.fullName = val + ' ' + this.lastName;
			},
			lastName: function(val){
				this.fullName = this.firstName + ' ' + val;
			}
		},
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 firstName: 'Jim',
				 lastName: 'Green',
				 fullName: 'Jim Green',
			},
			computed: {
				// fullName: function(){
				// 	return this.firstName + ' ' + this.lastName;
				// }
			},
			watch: {
				firstName: function(val){
					this.fullName = val + ' ' + this.lastName;
				},
				lastName: function(val){
					this.fullName = this.firstName + ' ' + val;
				}
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

侦听器-验证输入的用户名是否合理
   1.采用侦听器监听用户名的变化
   2.调用后台接口进行验证
   3.根据验证结果调整提示信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<span>用户名：</span>
				<span>
					<input type="text" v-model.lazy="uname" />
				</span>
				<span>
					{{tip}}
				</span>
			</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	侦听器
	1.采用侦听器监听用户名的变化
	2.调用后台接口进行验证
	3.根据验证结果调整提示信息
	
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 uname: '',
				 tip: '',
			},
			watch: {
				uname: function(val){
					//调用后台接口验证用户名的合法性
					this.checkName(val)
					//修改提示信息
					this.tip = '正在验证...'
				}
			},
			methods: {
				checkName: function (uname) {
					//调用接口，但是可以使用定时任务的方式模拟接口调用
					var that = this;
					setTimeout(function(){
						if(uname === 'admin'){
							that.tip = '用户名已经存在，请更换';
						}else{
							that.tip = '用户名可用';
						}
					}, 2000);
				}
			}
		});
	</script>
</html>