VueJs Modifiers
Introduction
There are some frequently used operations like event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
Examples
Event Modifiers
Vue provides event modifiers for v-on by calling directive postfixes denoted by a dot.
• .stop
• .prevent
• .capture
• .self
• .once
For examples:
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>Key Modifiers
When listening for keyboard events, we often need to check for common key codes. Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys:
• .enter
• .tab
• .delete (captures both “Delete” and “Backspace” keys)
• .esc
• .space
• .up
• .down
• .left
• .right
For examples:
<input v-on:keyup.enter="submit">Input Modifiers
• .trim
If you want user input to be trimmed automatically, you can add the trim modifier to your v-model
managed inputs:
<input v-model.trim="msg">• .number
If you want user input to be automatically typecast as a number, you can do as follow:
<input v-model.number="age" type="number">• .lazy
Generally, v-model syncs the input with the data after each input event, but you can add the lazy modifier to instead sync after change events:
<input v-model.lazy="msg" >