v-on绑定事件复习

在前端开发中，我们需要经常和用户进行各种各样的交互：
 这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等
 在 Vue 中如何监听事件呢？使用 v-on 指令。

 参数： event
 修饰符：
 .stop - 调用 event.stopPropagation() 。
 .prevent - 调用 event.preventDefault() 。
 .capture - 添加事件侦听器时使用 capture 模式。
 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
 .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
 .once - 只触发一次回调。
 .left - 只当点击鼠标左键时触发。
 .right - 只当点击鼠标右键时触发。
 .middle - 只当点击鼠标中键时触发。
 .passive - { passive: true } 模式添加侦听器

1.绑定事件基本使用

  
    
    
    
    
  
  
    

      
Hello World

      
      
Hello Bind
    

    
    
  

2.v-on 参数传递

 当通过 methods 中定义方法，以供 @click 调用时，需要注意参数问题：
 情况一：如果该方法不需要额外参数，那么方法后的 () 可以不添加。
 但是注意：如果方法本身中有一个参数，那么会默认将原生事件 event 参数传递进去
 情况二：如果需要同时传入某个参数，同时需要 event 时，可以通过 $event 传入事件。

  
  
  
  


 
  

    
    按钮1
 
    
    按钮2
 
    
    
    按钮3
  
   
  
  

3.v-on 的修饰符

 v-on 支持修饰符，修饰符相当于对事件进行了一些特殊的处理：
 .stop - 调用 event.stopPropagation() 。阻止冒泡
 .prevent - 调用 event.preventDefault() 。阻止默认行为
 .capture - 添加事件侦听器时使用 capture 模式。事件捕获
 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
 .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
 .once - 只触发一次回调。
 .left - 只当点击鼠标左键时触发。
 .right - 只当点击鼠标右键时触发。
 .middle - 只当点击鼠标中键时触发。
 .passive - { passive: true } 模式添加侦听器

  
  
  
  
  


 
  

    

      按钮