Shorthands for Events and Bindings

Published on March 13, 2017 by

I’m sure you noticed by now that we use the v-on and v-bind directives quite a lot in Vue.js. Wouldn’t it be nice if we didn’t have to type that out explicitly every time? Fortunately Vue.js provides shorthand syntaxes for these two directives.

Let’s use a button with a click event listener as an example. Instead of prefixing click with v-on and a colon, we can simply replace the prefix with an @ sign. Therefore we can simply write @click=”expression”.

<button @click="hello">Hello (shorthand)</button>

Clicking both buttons will give the same result.

Similarly, we can shorten the v-bind directive’s syntax as well. The shorthand for this directive is simply a colon followed by the name of the attribute to bind to. In this case, we are binding to the title attribute, so we just write :title=”expression”.

<p :title="title">Hover me (shorthand)</p>

If I hover my cursor over both of these paragraphs, you will see that the result is the same.

While this syntax may look strange and unlike any other HTML markup you have seen before, these attribute names are actually valid HTML attributes, although they won’t actually do anything without Vue.js. Like I said, it may look a bit strange at first, but don’t worry, it is not going to appear in the markup that is rendered once Vue.js is bootstrapped. So if you were to inspect elements containing these attributes, you will not see any sign of them in your browser’s inspector.

So why didn’t I mention this before, you might ask? First of all, I apologize for keeping you in the dark until now, but instead of starting out by using this syntax, it’s good for you to keep in mind that when you are using these shorthand syntaxes, you are in fact using the v-on and v-bind directives. This makes it easier to understand what actually happens when using these shorthand syntaxes, instead of just using them and not knowing what actually happens behind the scenes.

That being said, these shorthand syntaxes are the most common way to use the two directives, so this is also the syntax that you will see me use for the rest of this course.

This completes the walkthrough of the fundamentals of Vue.js, and thereby this section of the series. Of course there are more fundamental concepts of Vue.js such as components and forms, but subjects like these are quite big and will therefore have their own dedicated sections.


Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

2 comments on »Shorthands for Events and Bindings«

  1. Darko

    I have to say that you are a really good teacher! There’s no many programmers who could so easily explain all of these things. I have been reading about Vue a lot but everything has become clear for me after listening to you course! Well done!

  2. Thanks so much, Darko! I am happy that you enjoyed the series, and thank you very much for the great feedback! :-)

Leave a Reply

Your e-mail address will not be published.