<vue 基础知识 5、事件监听>

代码结构

一、     v-on基本使用

1、效果  

按钮点击一下数字增加1

2、代码

01-v-on基本使用.html

	
		
		
	
	

		

			
{{counter}}
			按钮1
			按钮2
			
			按钮3
			按钮4
		

		
		

	

二、     v-on参数使用

1、 效果

函数不传入参数、传入参数和event事件以及双击事件展示

2、代码

02-v-on参数问题.html

	
		
		
	
	

		

			
点击次数: {{counter}}
			
			
			按钮1
			
 
			
			按钮2
			
			
			按钮3

		

		
		

	

三、03-v-on修饰符

1、效果

（1）带了stop修饰符将阻止向上调用触发事件

（2）prevent修饰符阻止了跳转到百度网站的默认行为，而回掉了添加的函数

（3）once修饰符只调用一次回调函数，再次点击就触发回调函数

（4）点击回车后触发回调函数

2、 代码

03-v-on修饰符.html

	
		
		
	
	

		

			----------修饰符stop 停止冒泡------------
			

				不带stop修饰符按钮
			

			

				带stop修饰符按钮
			

			----------修饰符prevent 组织默认行为------ 
			

				百度一下
			
			

				百度一下
			
 
			-----------修饰符once 只触发一次回调函数--- 
			

				once按钮
			
			
			-----------点击回车时才触发回调-----------