你不能不了解的Vue【模板语法下集】!

我是默，一个在CSDN分享笔记的博主。

在这里，我要推荐给大家我的专栏《Vue》。

无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。

让我们在Vue的世界里畅游吧！

如果感觉还不错的话请记得给我点赞哦！

期待你的加入，一起学习，一起进步！ 

一.事件处理器

1.什么是事件处理？

在 Vue 中，事件处理指的是将特定的DOM事件与对应的处理函数进行绑定，当事件触发时，相应的处理函数将被执行，从而实现对用户交互操作的响应。

Vue 通过 v-on 指令（或简写符号 @）来绑定事件处理函数到DOM元素上

2.事件冒泡

事件冒泡（Event Bubbling）是指在DOM结构中，当一个元素上的事件被触发时，该事件将会向父元素（包括祖先元素）逐级传播，直到根节点。这样设计的目的是为了简化事件的处理和管理。

具体来说，当一个元素触发某个事件时，比如点击事件（click），该事件首先在触发元素上被执行，然后事件会依次在其父元素上执行，再在父元素的父元素上执行，一直向上直到根节点。这种向上传播的过程就是事件冒泡

2.1基础代码 

效果图

这一次点击一个颜色就会弹出所有个下拉框

2.2解决办法（.stop）

效果图展示

这一次点击一个颜色就会弹出一个下拉框

3.限制次数点击（.once）

3.1代码

	
		
		
		 
	
		
	
	
			吱吱吱吱
			
		

效果图

3.2修改代码

  效果图

4.事件修饰符

事件修饰符

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

  .stop

  .prevent

  .capture

  .self

  .once

 

 

 

 

 

 

 

 

 

 

...

 

 

...

 

 

---

二.表单的综合案例 

1.取值，和绑定值

  
  
  
  


  

    姓名：

    密码：

    性别：
    

      {{sex.name}}
    
    籍贯：
    
      请选择
      {{addr.name}}
    

    爱好：
    
      {{hobby.name}}
    

    个人简介：

    同意：

    提交
  

  

2.展示效果

三.组件通信（主讲自定义事件）

1.组件通信共包括

1. Props & Events（父组件向子组件通信）：父组件通过props将数据传递给子组件，子组件通过events触发父组件的方法来实现通信。

2. 自定义事件（子组件向父组件通信）：子组件通过$emit触发自定义事件并传递数据，父组件通过监听子组件的自定义事件来接收数据。

3. 中央事件总线（非父子组件通信）：创建一个新的Vue实例作为中央事件总线，任何组件都可以通过该实例的emit和on方法进行通信。

4. Vuex（大规模应用状态管理）：Vuex是Vue官方提供的状态管理库，用于管理共享状态，可在多个组件之间进行通信。

自定义组件

	
		
		
		 
	
		
		
	
	
			
		

			
自定义组件
			刘兵是狗
			
		
		
		
	

 效果图

2.父传子通信

代码

	
		
		
		 
	
		
		
	
	
			
		

			
自定义组件
			刘兵是狗
			
----------------------------
			
			
组件通信---父传子
			
			刘兵是狗
			
			
组件通信---父传子(2)
			刘兵是狗
			
		
		
		
	

代码分析

Vue实例中的components选项定义了一个名为my-button的自定义组件。这个组件有一个template模板，包含一个按钮元素，按钮上显示了父组件传递过来的属性m和n的值。组件还定义了一个data函数，返回一个对象，包含一个属性n，初始化为1。组件还定义了一个方法onclikMe，用于处理按钮的点击事件，每次点击时将n的值加1

3.子传父通信

代码

    
        
        
         
        
        
    
    
        

            
组件通信---子传父
            刘兵是狗
        
        
        
    

分析

1. 在my-button组件的methods选项中，定义了onclickMe方法。当按钮被点击时，该方法将设置name为"刘兵土狗"， book为"如何才能成为舔狗"，price为"1688"，然后通过this.$emit方法触发名为xxx的自定义事件，并传递这三个参数。

2. 在Vue实例的methods选项中，定义了一个名为getParam的方法。该方法用于处理子组件传递的参数，并在控制台打印输出这三个参数的值。

总结：这段代码演示了子组件向父组件传递数据的通信方式。通过自定义组件my-button，当按钮被点击时，子组件会通过this.$emit方法触发一个自定义事件xxx，并向父组件传递参数name、book和price。父组件通过监听这个自定义事件@xxx，在事件处理函数getParam中获取传递的参数进行相应的处理。输出结果通过调用console.log()方法在浏览器控制台中显示。

效果展示

四.今天分享就到这里感谢阅读