vue基础知识(七)——侦听器

侦听器

1. 侦听器的应用场景

   数据变化时执行异步或开销较大的操作

2. 侦听器的用法
   
   侦听器watch和计算属性computed有点像，在下述中使用侦听器，当改变input框中的值时，div里面显示的值才会发生相应变化。注意：watch中方法名称要和data中属性名称一致！

template中：
           
           
           
{{fullName}}

script中：
var vm =new Vue({
			el:"#app",
			data:{
				firstName: 'Zhou',
				lastName: 'LiYing',
				fullName: 'Zhou LiYing'
			},
			watch: {
			    // 定义函数时函数名要和data中的数据名一致
				firstName: function(val){
					this.fullName = val + '' + this.lastName
				},
				lastName: function(val){
					this.fullName = this.firstName + '' + val
				}
			｝
		})

下述中使用计算属性，效果和使用侦听器效果一样，但是在这个案例中计算属性computed还要更简单一点。

template中：
           
           
           
{{totalName}}

script中：
var vm =new Vue({
			el:"#app",
			data:{
				firstName: 'Zhou',
				lastName: 'LiYing',
			},
			computed: {
				totalName: function(){
					return this.firstName + ' ' + this.lastName
				}
			}
		})

3. 侦听器的特定用法
   在有的特定场景下使用计算属性computed是解决不了问题的，只有用侦听器watch才行。
   比如当你输入一个用户名，失去焦点时要对用户名进行监听是否已经存在并给出相应的提示。

	


	

		

			
			{{tips}}
		
			
	
	
	

最终效果：