Vue的模板语法（下）

一.事件处理

事件修饰符

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

1. .stop：阻止事件冒泡。当一个元素触发了事件，并且该元素包含嵌套的父元素时，使用.stop修饰符可以防止事件被传递到祖先元素。

2. .prevent：阻止默认事件。当一个元素上触发了某个事件，使用.prevent修饰符可以阻止浏览器执行默认的事件行为。

3. .capture：使用事件捕获模式。默认情况下，Vue中的事件监听器是通过事件冒泡模式处理的，即从子元素冒泡到父元素。但是使用.capture修饰符可以将事件监听器绑定到捕获阶段，即从父元素捕获到子元素。

4. .self：只当事件在指定元素自身触发时触发。当一个元素包含子元素，并且绑定了相同的事件处理函数时，使用.self修饰符可以确保事件只在元素自身触发时才执行处理函数。

5. .once：只触发一次事件。当绑定了.once修饰符的事件被触发后，监听器将自动解绑，以确保处理函数只执行一次。

 代码演示：

	
		
		
		
		
		
	
	
		

	

		

			

				

			
		
		
	
	
	点我
	 

	    提交
	  
 

    点击我
  
  

      点击我
    
		
		
	

效果：

 二.表单的综合案例

代码：

	
		
		
		
		
	
	
		

			姓名：

			密码：

			性别：
				{{s.name}}
			

			籍贯：
				{{a.name}}
			

			爱好：
			
				{{h.name}}
			

			个人简介：
			

			同意：

			提交
		
			
	

 效果：

三.组件通信 

1 组件介绍及定义

        Vue组件是Vue.js框架中的核心概念之一，它允许开发者将页面拆分为可重用、独立的模块。组件可以包含自己的模板、样式和逻辑，使得代码更加模块化、可维护和可复用。

      除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令，根据作用范围又分为：全局指令/局部指令

组件的定义：组件可以通过Vue.component()方法或Vue实例的components选项进行定义。组件的定义包括组件的名称、模板、数据、方法等。

局部定义
 

全局定义
 

Vue.component('my-button', {
 
    //用来传值的自定义属性
    props:['title'],
    
    //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    template: '{{title}}: 全局组件',
 
    //注意：在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            xxx: 0
        }
})

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

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

组件传参

父 传 子

注意：props定义属性时采用的是驼峰命名法，而在html中使用时需要对应的变为短横线命名法！！

!DOCTYPE html>

	
		
		
		
		
	
	
		

			

				

					
					
vue组件
					
					
				
			
		
	
	
 

子 传 父 

	
		
		
		
		
	
	
		

			

				

					
					
vue组件