宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

一、基础用法

Vue中双击事件的绑定和单击事件一样，在DOM元素上添加属性v-on:dblclick即可，其值为对应事件的处理函数，如下所示：

  
    <template>
      <div v-on:dblclick="handleDoubleClick">
        双击此处触发事件
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleDoubleClick() {
          console.log('触发双击事件')
        }
      }
    }
    </script>

当DOM元素双击时会触发handleDoubleClick函数，打印出“触发双击事件”的信息。

二、事件修饰符

Vue提供了多种事件修饰符来优化事件处理，可以通过在v-on后添加修饰符的方式来扩展事件的功能。

2.1 .stop

阻止事件冒泡，使用 stop 修饰符可以阻止事件继续传播，如下所示：

  
    <template>
      <div v-on:dblclick.stop="handleDoubleClick">
        双击此处阻止事件冒泡
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleDoubleClick() {
          console.log('触发双击事件')
        }
      }
    }
    </script>

当DOM元素双击时触发handleDoubleClick函数，同时阻止事件继续向上层元素传播。

2.2 .prevent

阻止默认行为，使用prevent修饰符可以阻止事件对应的默认行为，如下所示：

  
    <template>
      <a href="#" v-on:click.prevent="handleClick">
        点击此处阻止默认行为
      </a>
    </template>
    
    <script>
    export default {
      methods: {
        handleClick() {
          console.log('触发点击事件')
        }
      }
    }
    </script>

当a标签被单击时，触发handleClick函数，同时阻止跳转页面的默认行为。

2.3 .capture

使用capture修饰符可以让事件在捕获阶段触发，如下所示：

  
    <template>
      <div v-on:click.capture="handleClick">
        点击此处触发事件
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleClick() {
          console.log('触发点击事件')
        }
      }
    }
    </script>

当DOM元素被单击时，事件会在捕获阶段触发，即从上向下依次触发。

2.4 .self

使用self修饰符可以限制事件只在绑定事件的元素本身触发，如下所示：

  
    <template>
      <div v-on:click.self="handleClick">
        点击此处触发事件
        <div>
          <p>子元素</p>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleClick() {
          console.log('触发点击事件')
        }
      }
    }
    </script>

当DOM元素被单击时，只有点击元素本身才会触发事件，子元素点击不会触发事件。

2.5 .once

使用once修饰符可以让事件只触发一次，如下所示：

  
    <template>
      <div v-on:click.once="handleClick">
        点击此处只能触发一次
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleClick() {
          console.log('触发点击事件')
        }
      }
    }
    </script>

当DOM元素被单击时，事件只会被触发一次。

三、绑定参数

Vue提供了一种特殊的语法，可以在处理函数中访问原始DOM事件，并自动传入一个参数，我们可以通过v-on后加上参数的方式来访问DOM事件，在双括号里传入事件对象$event即可。

  
    <template>
      <div v-on:dblclick="handleDoubleClick($event)">
        双击此处触发事件
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleDoubleClick(event) {
          console.log(event.target)
        }
      }
    }
    </script>

当DOM元素双击时会触发handleDoubleClick函数，并打印出事件对应的目标元素。

四、按键修饰符

在绑定事件的时候，Vue也提供了按键修饰符的方式来扩展事件的功能，通过在事件名后加上按键修饰符的方式来限制只有特定键被按下才能触发事件。

4.1 .enter

使用enter修饰符可以限制只有回车键被按下时才能触发事件，如下所示：

  
    <template>
      <input v-on:keyup.enter="handleKeyUp">
    </template>
    
    <script>
    export default {
      methods: {
        handleKeyUp() {
          console.log('按下回车键触发事件')
        }
      }
    }
    </script>

当输入框被激活时，只有按下回车键才会触发handleKeyUp函数。

4.2 .ctrl

使用ctrl修饰符可以限制只有同时按下ctrl键才能触发事件，如下所示：

  
    <template>
      <input v-on:keydown.ctrl="handleKeyDown">
    </template>
    
    <script>
    export default {
      methods: {
        handleKeyDown() {
          console.log('同时按下ctrl键和其它键触发事件')
        }
      }
    }
    </script>

当输入框被激活时，只有同时按下ctrl键才会触发handleKeyDown函数。

五、小结

Vue的双击事件是通过在DOM元素上绑定v-on:dblclick属性，并传入相应的处理函数来实现的，同时Vue提供了多种事件修饰符和按键修饰符来优化事件处理过程。