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等

本文章目录

- 专栏目标
- 总结
- 常用的事件修饰符9个
- 代码示例，演示了如何使用事件修饰符：

总结

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>