Vue.js is an easy to use web app framework that we can use to develop interactive front-end apps.
In this article, we’ll look at modifiers for directives and some useful template shorthands.
Modifiers
Modifiers are used for binding a directive in a special way.
Event modifiers
For example, the .prevent modifier for the v-on directive will automatically run event.preventDefault on the event handler function that’s set as the value.
The .prevent modifier can be used as follows:
<form v-on:submit.prevent="onSubmit"> ... </form>
Then, event.preventDefault() will be run when the onSubmit handler is run, before the rest of the code for onSubmit is run.
Other event modifiers include:
.stop.capture.self.once.passive
.stop runs event.stopPropagation() before the rest of the event handler code is run.
.capture lets us capture the event. That is, when we run the event handler in an inner element, then the same event handler will also run in the outside elements.
For example, if we have the following in src/index.js:
And the following in index.html:
Then, when we click Click Me, we’ll see the “clicked” alert box since the onClick handler is called on the parent div element.
.self will only trigger the event handler if the event.target is the element itself.
.once will trigger an event handler at most once.
For example, if we have the following in src/index.js:
And the following in index.html:
Then we only see the “clicked” alert box once even though we click “Click me” multiple times.
.passive will set the addEventListener’s passive option to true. passive set to true means that preventDefault() will never be called.
It’s used for improving performance on mobile devices.
Model modifiers
v-model has modifiers. They’re:
.lazy.number.trim
The .lazy modifier will make the model sync after the change event instead of the input event.
For example, when we have src/index.js:
new Vue({
el: "#app",
data: { msg: "" }
});
And write the following in index.html:
Then we only see msg rendered when we move focus away from the input.
The .number modifier will automatically cast whatever is inputted in an input to a number.
For instance, if we have the following in src/index.js:
new Vue({
el: "#app",
data: { num: 0 }
});
And the following in index.html:
Then we’ll get a number for num.
The .trim modifier will trim whitespace from whatever is inputted.
We can use it as follows:
<input v-model.trim="msg" type="number" />
Shorthands
There are shorthands for some directives.
v-bind
We can shorten v-bind: to :. For example, we can rewrite:
<a v-bind:href="url">Link</a>
To:
<a :href="url">Link</a>
We can also put in a dynamic argument if we use Vue 2.6.0 or later:
<a :[key]="url">Link</a>
v-on
We can shorten v-on: to @.
For example, we can shorten:
<a v-on:click="onClick">Click me</a>
To:
<a @click="onClick">Click me</a>
Since Vue 2.6.0, we can also use dynamic arguments as follows:
<a @[event]="onClick">Click me</a>
: and @ are valid characters. Also, they won’t appear in the final markup. Shorthands are totally optional. But we’ll appreciate them when we have to type them in a lot.
Conclusion
Some directives have modifiers that are associated with them.
The v-on directive has multiple modifiers for controlling how event handlers are called.
Also, the v-model directive has some modifiers to let us convert input to numbers automatically or trim whitespace from inputs.
v-on and v-bind also have shorthands. v-on: can be shortened to @, and v-bind: can be shortened to :.
Directive arguments also work with shorthands.
