event modifier
.stop : stop bubbling
.captrue: Event capture
.self: The trigger event object is triggered only when it is itself.
.prevent: Prevent default behavior
.once: The event is triggered only once
.passive: Optimize mobile scrolling behavior
.native: Represents native events (removed in vue3)
.passive modifier description:
When scrolling on the mobile terminal, it will wait until onScroll is completed by default before executing the default behavior. Therefore, when there are time-consuming operations in onScroll, the scrolling will be stuck. However, after using the .passive modifier, the default behavior will be executed immediately.
Native modifier (removed in vue3):
When you bind events directly to child components, such as click. At this time, Vue will treat it as a custom event by default, so clicking will not trigger the method. Solution: Add native modifier to click to tell Vue that this is a native event
<Mycomponent @click.native="handleClick" ></Mycomponent> <!-- 给组件绑定事件 -->
key modifier
Use: event.key key (although event.key keycode is also allowed, it is not officially recommended)
For example:
按键 w ：<input @keydown.w="handleKeydown" /></p>
In order to support older browsers where necessary, Vue provides aliases for most commonly used keycodes:
.enter
.tab
.delete (captures "delete" and "backspace" keys)
.esc
.space
.up
.down
.left
.right
A combination of modifiers is used:
ctrl+w trigger event
<input @keydown.ctrl.w="handleKeydown" />
The .exact modifier allows you to control events triggered by an exact combination of system modifiers.
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
You can also customize key modifier aliases through the global config.keyCodes object:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
Multi-key trigger:
// 定义自定义修饰符 按下f1或enter键触发
Vue.config.keyCodes.f1_or_enter = [13,112]
system modifier keys
You can use the following modifiers to implement a listener that only triggers mouse or keyboard events when the corresponding key is pressed.
.ctrl
.alt
.shift
.meta
Please note that modifier keys are different from regular keys. When used with the keyup event, the modifier key must be pressed when the event is triggered. In other words, keyup.ctrl can only be triggered by releasing other keys while holding ctrl. And simply releasing ctrl will not trigger the event. If you want this behavior, use keyCode for ctrl: keyup.17.
mouse button modifier
These modifiers restrict the handler function to only respond to specific mouse buttons
.left: left mouse
button.right: right mouse
button.middle: mouse wheel button