vue模板语法下集

目录

一、事件处理器

1、阻止冒泡

2、 事件修饰符

3、按键修饰符

二、组件及组件通信

1、简单组件 & 父组件 传参 给子组件

2、父组件 传参 给子组件

三、表单综合案例

---

一、事件处理器

1、阻止冒泡

 

	
		
		
		
		
	
	
		

			
阻止冒泡
			

				

					

						

					
				
			
		
	
	

 运行：

 

 

 

2、 事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符，

  .stop

  .prevent

  .capture

  .self

  

  

  

  

  

  

  

  

  

  

...

  

  

...

  

  

	
		
		
		
		
	
	
		

			
发送一次
			
			点我试试
			
		
	
	

点击只弹出一次，不会反复刷新：

 

3、按键修饰符

  

 Vue允许为v-on在监听键盘事件时添加按键修饰符：

  

  

  Vue为最常用的按键提供了别名

  

  

  全部的按键别名：

  .enter

  .tab

  .delete (捕获 "删除" 和 "退格" 键)

  .esc

  .space

  .up

  .down

  .left

  .right

  .ctrl

  .alt

  .shift

  .meta      

	
		
		
		
		
	
	
		

			
按键修饰符
			
			
			
		
	
	

 点击文本框直接回车就会弹出：

 

 

二、组件及组件通信

1、简单组件 & 父组件 传参 给子组件

	
		
		
		
		
	
	
		

			
简单组件
			
			
父组件 传参 给子组件
			
		
	
	

 

组件

定义：template

父传子：props

子传父：通过$emit注册事件名

this.$emit（'事件名',......）

2、父组件 传参 给子组件

	
		
		
		
		
	
	
		

			
父组件 传参 给子组件
			
		
	
	

 运行：

三、表单综合案例

	
		
		
		
	
	
		

			
表单综合案例
			

				

					
vue表单
					姓名：

					密码：

					
					年龄：

					性别：
					男
					女

					爱好：
					

						{{h.name}}
					
					类别：
					
						===请选择===
						{{t.name}}
					

					备注：
					

					确认
					
				
			
		
	
	

 

 

今日分享就到这啦！再会！