vue常用9个事件修饰符

第075个

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

总结

Vue.js 提供了一些事件修饰符，用于处理 DOM 事件的细节。事件修饰符是由点号（.）表示的后缀，放在事件名后面。例如 v-on:click.stop 或 @click.stop。

常用的事件修饰符9个

• .stop：阻止事件冒泡。
• .prevent：阻止默认行为。
• .capture：使用事件捕获模式。
• .self：只有当事件是从触发元素本身触发时才调用事件处理器。
• .once：只触发一次事件处理器。
• .passive：使用事件的被动模式。
• .left、.right、.middle：只在鼠标左键、右键或中键按下时触发事件处理器。
• .ctrl、.alt、.shift、.meta：只有在按下相应的键时才触发事件处理器。
• .exact：只有当事件是从精确的目标元素触发时才调用事件处理器。

代码示例，演示了如何使用事件修饰符：

<template>
  <div>
    <button @click.stop="handleClick">点击我</button>
    <a href="#" @click.prevent="handleLinkClick">点击链接</a>
    <input type="text" @keyup.enter="handleEnterKey">
    <div @click.self="handleDivClick">点击这个 div</div>
    <button @click.once="handleOnceClick">只点击一次</button>
    <div @mousedown.left="handleLeftClick">点击鼠标左键</div>
    <div @mousedown.ctrl="handleCtrlClick">按住 Ctrl 键点击</div>
  </div>
</template>

<script>
export default {
    
    
  methods: {
    
    
    handleClick() {
    
    
      console.log('按钮被点击');
    },
    handleLinkClick() {
    
    
      console.log('链接被点击');
    },
    handleEnterKey() {
    
    
      console.log('回车键被按下');
    },
    handleDivClick() {
    
    
      console.log('div 被点击');
    },
    handleOnceClick() {
    
    
      console.log('按钮被点击一次');
    },
    handleLeftClick() {
    
    
      console.log('鼠标左键被点击');
    },
    handleCtrlClick() {
    
    
      console.log('按住 Ctrl 键点击');
    }
  }
};
</script>

在这个示例中，我们使用了不同的事件修饰符来处理不同的事件。例如，@click.stop 会阻止事件冒泡，@click.prevent 会阻止默认行为，@click.self 只会在事件从触发元素本身触发时调用事件处理器，等等。