【Vue.js】009-事件处理

一、监听事件

1、概述

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

 

2、代码演示

	
		
		
		
	
	
		

			Add 1
			  
The button above has been clicked {{ counter }} times.
		
		
	

 

3、运行结果

 

二、事件处理方法

1、概述

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

 

2、代码演示

	
		
		
		
	
	
		

			
			Greet
		
		
	

 

3、运行结果

 

三、内联处理器中的方法

1、概述

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法；

 

2、代码演示

	
		
		
		
	
	
		

			
			Say hi
			Say what
			
			
			  Submit
			
		
		
	

 

3、运行结果

 

四、事件修饰符（官方）

 

五、按键修饰符

 

六、系统修饰符

1、系统修饰符

 

2、.exact 修饰符

 

3、鼠标按钮修饰符

 

4、为什么在 HTML 中监听事件？