VueJS: Shorthands

v-bind shorthand

The shorthand for the v-bind directive is a colon followed by the attribute name that we have to bind to, meaning we can replace ‘v-bind:’ with just ’:’. Let’s take an example where we’ll use the v-bind directive to bind the href attribute in HTML to a URL:

Demo.html

<a v-bind:href="URL" target="_blank">Pinterest</a>

You can also try this code with Online Javascript Compiler

Run Code

Demo.js

data:
{
    URL: "https://www.pinterest.ca/"
}

You can also try this code with Online Javascript Compiler

Run Code

Now, to implement the shorthand, we will replace the v-bind directive with a colon:

<!-- Using the v-bind shorthand -->
<a :href="URL" target="_blank">Pinterest</a>

You can also try this code with Online Javascript Compiler

Run Code

Both these code snippets work in the same manner, i.e., the ‘Pinterest’ tab will open when we click on the link, in both cases. The shorthand syntax might look a little strange initially, and unlike the usual, the attribute names used here are valid HTML attributes. However, these attributes cannot do anything without Vue JS and appear in the rendered markup after Vue JS is bootstrapped. Therefore, the browser's inspector will have no sign of these attributes on inspecting elements that have these attributes.

If you have Vue 2.6.0 or later, you can also add a dynamic argument:

<a :[key]="URL">Pinterest</a>

You can also try this code with Online Javascript Compiler

Run Code

v-on shorthand

The shorthand for v-on replaces the ‘v-on:’ prefix with ‘@’. For example, if we are writing code for a ‘click here’ button:

Demo.html

<button v-on:click="Click here">clickButton</button>

You can also try this code with Online Javascript Compiler

Run Code

We can use the shorthand and write

<!-- Using the v-on shorthand -->
<button @click="Click here">clickButton</button>

You can also try this code with Online Javascript Compiler

Run Code

Dynamic arguments for Vue 2.6.0 or later:

<a @[event]="Click here">Click button</a>

You can also try this code with Online Javascript Compiler

Run Code

Shorthands are optional but appreciated when the code is lengthy, and we have to type these directives repeatedly. Therefore, they are the usual way these two directives are used. We have also learned that Dynamic arguments work with shorthands too.

Besides that, some directives have modifiers associated with them, such as the v-on directive having several modifiers to control calling the event handlers.

Moreover, the v-model directive also has modifiers that help convert the user input to numbers, trim any extra whitespace in these inputs, etc. Modifiers have been discussed more elaborately in the directives blog.

Frequently Asked Questions

Q1. Which two inbuilt directives in Vue JS have shorthands?

Ans. In Vue.js, the v-bind and v-on directives have shorthands that replace the directives with a colon (:) and the ‘@’ sign, respectively.

Q2. Do the shorthand characters ‘:’ and ‘@’ appear in the rendered markup?

Ans. The colon and ‘@’ are valid characters, and every Vue-supported browser can parse them. They do not appear in the final markup and are only used to provide convenience when writing lengthy code.

Q3. Is it necessary to use shorthands when using v-on and v-bind directives?

Ans. No, the shorthands in Vue Js are purely optional and provided for our convenience. They are usually preferred to using the directives because they make the code less lengthy and are thus also seen more often with seasoned coders. However, choosing to use shorthands or the directive itself is entirely up to you.

Key takeaways

We learned about shorthands and their syntax in Vue JS using several examples. Along with the types of directives and their respective shorthands, we learned how conveniently shorthands could be used with dynamic arguments with a simple syntax. Vue provides shorthands as an option to make developing even more convenient for us, and developers appreciate their use.

You can go to Coding Ninjas Studio to try and solve more problems for practice. Share this blog with your friends if you found it helpful! Until then, All the best for your future endeavours, and Keep Coding.