Vue基础语法【下】

目录

一、事件处理器

1.事件修饰符

   .stop

  .prevent

   .capture

  .self

  .once

2.按键修饰符

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

.ctrl、.alt、.shift、.meta

二、表单赋值与取值

三、自定义组件

1.组件介绍

2.局部组件

3.全局组件

4.组件通信

 组件传参【父传子】

组件传参【子传父】 

---

一、事件处理器

1.事件修饰符

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

   .stop

阻止单击事件冒泡,即停止事件在DOM树中的传播。

Click me

当按钮被点击时，事件不会继续向上冒泡，只会触发doSomething方法。

  .prevent

修饰符可以阻止事件的默认行为,提交事件不再重载页面

  
  Submit

当表单被提交时，事件的默认行为（刷新页面）会被阻止，而是会触发submitForm方法。

   .capture

修饰符可以将事件监听器添加到捕获阶段，而不是冒泡阶段。

Click me

当点击div元素时，事件会在捕获阶段触发doSomething方法。

  .self

只当事件在该元素本身（而不是子元素）触发时触发回调

  Click me

只有当点击div元素本身时，事件处理函数handleClick才会被触发。如果点击div内部的button元素，事件将不会被触发。

  .once

修饰符只能让事件只触发一次。

Click me

当按钮被点击时，doSomething方法只会被触发一次。

 注1：什么是事件冒泡?

案例

如何避免类似的冒泡呢？

我们可以在点击事件中添加我们的.stop阻止单击事件冒泡！！

2.按键修饰符

.enter

当用户按下回车键时触发事件。

当用户在输入框中按下回车键时，会触发submitForm方法。

.tab

当用户按下Tab键时触发事件。

当用户在输入框中按下Tab键时，会触发nextField方法。

.delete

当用户按下删除键或退格键时触发事件。

当用户在输入框中按下删除键或退格键时，会触发deleteItem方法。

.esc

当用户按下Esc键时触发事件。

当用户在输入框中按下Esc键时，会触发cancelAction方法。

.space

当用户按下空格键时触发事件。

Start

当用户在按钮上按下空格键时，会触发startGame方法。

.up

当用户按下上箭头键时触发事件。

当用户在输入框中按下上箭头键时，会触发increaseValue方法。

.down

当用户按下下箭头键时触发事件。

当用户在输入框中按下下箭头键时，会触发decreaseValue方法。

.left

当用户按下左箭头键时触发事件。

当用户在输入框中按下左箭头键时，会触发moveLeft方法。

.right

当用户按下右箭头键时触发事件。

当用户在输入框中按下右箭头键时，会触发moveRight方法。

.ctrl、.alt、.shift、.meta

当用户按下对应的修饰键时触发事件。

当用户在输入框中按下Ctrl键时，会触发saveData方法。

二、表单赋值与取值

表单赋值与取值综合案例

	
		
		
		
		
		
	
	
		

			
表单赋值与取值
			

				账号：
				
			
			

				密码：
				
			
			

				年龄：
				
			
			

				性别：
				男
				女
			
			

				爱好：
				

					{{h.name}}
				
			
			

				地区
				
					-- 请选择 --
					{{c.name}}
				
			
			

				备注：
				
			
			

				是否已阅读并同意协议
			
			

				提交
			
		
		
	

三、自定义组件

1.组件介绍

  组件(Component)是Vue最强大的功能之一

 组件可以扩展HTML元素，封装可重用的代码

 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

2.局部组件

在Vue实例中定义和使用局部组件非常简单。我们可以在Vue实例的components选项中定义组件，并在模板中使用它。

    点我
  

3.全局组件

全局组件可以在整个应用程序中使用，无需在每个Vue实例中重新定义。我们还可以在Vue实例之外定义全局组件，并在需要的地方使用它。

4.组件通信

        Vue自定义事件是为组件间通信设计  ，vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。

        不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称，建议使用“短横线分隔命名”

 父Vue实例->Vue实例，通过prop传递数据

 子Vue实例->父Vue实例，通过事件传递数据

 组件传参【父传子】

	 
		
		
		
		
		
		
	
	
		
		

			
			点我
			
组件通信---父传子
			点我
			
			
			
		
		
		
		
		
	

 

组件传参【子传父】 

	 
		
		
		
		
		
		
	
	
		
		

			
			
组件通信---子传父
			点我