本文共 1976 字，大约阅读时间需要 6 分钟。

1. 事件监听

在前端开发中，我们经常需要监听浏览器的时间，例如点击、拖拽、键盘等操作。那么在vue中是如何监听事件的呢？那就是使用v-on指令

1.1 介绍

• 作用：绑定事件监听器
• 缩写：@
• 预期：Function | Inline Statement | Object
• 参数：event

1.2 简单使用

• 我们可以在事件中写表达式
• 也可以将事件指向一个在methods中定义的函数

   
    
    
点击次数：{
   {
   count}}
     
    点击+1     
    点击+1 
   
  

1.3 参数问题

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

1. 如果该方法不需要额外参数，那么在调用该方法时可以不加()
2. 如果方法本身有一个参数，那么会默认将原生事件event参数传递进去
3. 如果需要传入某个参数时，同时还需要event,可以通过**$event**传入事件

   
    
    
点击次数：{
   {
   count}}
     
    点击+1     
    点击+10 
   
  

1.4 修饰符

在某些情况下，我们拿到事件的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件：

• .stop:阻止事件冒泡
• .self:当事件在该元素本身触发时才触发事件
• .capture:添加事件监听器，使用事件捕获模式
• .prevent:阻止默认事件
• .once:事件只触发一次

1.4.1 事件冒泡定义

要想搞明白上面这些修饰符功能，首先我们先了解一下什么是事件冒泡：

   
    
    
点击次数：{
   {
   count}}
     
    
         
     
             
      点击         
     
     
    
 
   
  

1. 当点击btn按钮时，会从里到外依次触发按钮点击事件、inner点击事件、outer点击事件

2. 当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件

3. 当点击outer div时，只触发outer点击事件

4. 这就是事件冒泡

1.4.2 阻止事件冒泡(.stop)

   
     
    
.stop可以实现点击按钮的时候，只触发按钮点击事件，阻止了事件冒泡
     
    
         
     
             
      点击         
     
     
    
 
   
  

如图所示：

当只点击btn按钮时，只触发了按钮的时间，没有触发div的事件，这就是阻止事件冒泡

1.4.3 当事件在该元素本身触发时才触发事件(.self)

.self当事件在该元素本身触发时触发回调（比如 不是子元素）
     
   
         
    
             
     点击         
    
 	
    
.self只能阻止自己身上冒泡行为，并不会真正的阻止冒泡行为
    
    
只给inner div 加.self，当点击按钮时，会从里到外依次触发按钮点击事件、outer点击事件
    
    
而不会触发inner点击事件，跳过了inner div冒泡
    
    
当点击inner div时，依然会从里到外依次触发inner点击事件、outer点击事件
     
   

1.4.4 阻止事件默认行为(.prevent)

   
         
    百度一下 
   
  

点击只会触发preventClick事件，不会跳转页面，阻止了a标签的默认跳转 。

1.4.5 只触发一次事件(.once)

   
     
    点击 
   
  

顾名思义，该点击事件就算多次点击，也只会触发一次。

1.4.6 按键修饰符

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

按键别名：

.enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta

注意：在Windows系统键盘上meta对应windows徽标键(⊞)。

   
            // Enter键触发submit事件  下面三种写法都对        
            
            
        
   
     

1.4.7 串联修饰符

   
     
    
         
     
             
      百度一下         
     
     
    
 
   
  

@click.stop.prevent:既阻止了事件的默认行为，又阻止了事件冒泡。

转载地址：http://cqmbi.baihongyu.com/