Welcome back! Did someone say shorthands? Yes, that is what we will be focusing on today. We have been working with Vue directives for quite some time now. The v- prefix helps in more than one way. It visually represents that we are dealing with Vue related attributes in our code (the most important reason).
By now you should have understood that v-bind and v-on are the two most frequently used directives in our templates. Why? Because we deal with events (especially click) and data binding all the time! So, for these two most often used directives, Vue gives us shorthands or a short way of writing them.
Starting code
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue!</title>
<!-- including Vue with development version CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>Welcome</h2>
</div>
<!-- including index.js file -->
<script src="index.js"></script>
</body>
</html>Index.js
new Vue({
el: "#app",
data: {
},
// define all custom methods within the 'methods' object
methods: {
}
});Shorthand for v-bind
Let us bind href attribute of the HTML <a> tag to ‘https://www.google.com’ URL using the v-bind attribute like so,
Index.html (snippet)
<a v-bind:href="url" target="_blank">Google</a>And defining the “url” in the Vue instance’s data object,
Index.js (snippet)
data: {
url: "https://www.google.com"
}This code works perfectly fine. Clicking on the link, “Google”, a new tab opens and navigates to Google page. But we want to look cool. Don’t we? So, the short way of writing v-bind directive is to remove the word v-bind once for all and just use the colon alone.
<!— Cool way of writing v-bind -->
<a :href="url" target="_blank">Google</a>
Might look a little confusing in the beginning but you will be appreciating in no time as you get a hang of it. Both these code snippets (with and without shorthands) work exactly the same. The difference is just a few lesser characters and a more readable code.
As you can see in the image below, even with the shorthand, all Vue.js supported browsers (Chrome in our case) parse it correctly and bind the value of ‘url’ to the href attribute. Note that the colon (shorthand syntax for v-bind) did not appear in the final rendered HTML which can be clearly seen in the ‘Elements’ pane of the Chrome DevTools dock.
Shorthand for v-on
To understand the shorthand syntax of the v-on directive, let us have a button. Upon clicking on it, we will trigger a method named “greet” to toggle between the messages, Hi and Hello.
The full syntax for this would be,
Index.html (snippet)
<button v-on:click="greet">Click for a different greeting</button>Index.js (snippet)
data: {
message: "Hi",
url: "https://www.google.com"
},
methods: {
greet() {
this.message === "Hi" ? this.message = "Hello" : this.message = "Hi";
}
}Okay. The shorthand here is to replace the word v-on and the colon with an @ symbol. That’s all! It is as simple as that!!
Index.html (snippet)
<!-- Using v-on shorthand -->
<button @click="greet">Click for a different greeting</button>
Final Code
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue!</title>
<!-- including Vue with development version CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>Welcome</h2>
<!-- Using v-on shorthand -->
<button @click="greet">Click for a different greeting</button>
<p> {{ message }} </p>
<!-- Using v-bind shorthand -->
<a :href="url" target="_blank">Google</a>
</div>
<!-- including index.js file -->
<script src="index.js"></script>
</body>
</html>Index.js
new Vue({
el: "#app",
data: {
message: "Hi",
url: "https://www.google.com"
},
// define all custom methods within the 'methods' object
methods: {
greet() {
// 'this' keyword refers to the current Vue instance
this.message === "Hi" ? this.message = "Hello" : this.message = "Hi";
}
}
});Code looks so much more clean, elegant and less verbose (obviously!). You will see it better in a real-world application where loads of events are handled. Remember that using shorthand syntax is completely optional and totally up to you. All the code discussed above along with comments is available in the GitHub repo.
Warning: I will be using these shorthands in all of my code samples going forward. The more you work with them, the more comfortable you become!
Why should we use shorthands?
Let us understand the reasons for using these shorthands to convince you a bit more,
- Code becomes verbose on frequent use of these directives in full form.
- In applications (like SPA) where Vue.js is used as the framework to manage all the front-end code, it becomes explicit that Vue is being used and the prefix
v-is not that important. - Clean and readable code is what every developer wants at the end of the day.
And that brings us to the end of this article. Have a nice day.