Vuejs V-on and v-bind directives examples| Shorthand syntax

In this short tutorial, You will learn about v-on and v-bin directives and shorthand syntax with examples.

v-on directive in vuejs

v-on directive in vuejs adds dynamic behavior to HTML templates.

v-on is a vuejs directive that is the binding event handler for listening to javascript native events.

It adds an extra parameter to the HTML tag as seen below.


<htmltag v-on:Events:modifier="Eventhandler"></htmltag>
<htmltag @:Events:modifier="Eventhandler"></htmltag>

Events are click events, button clicks, or input keypress events are examples.

Modifiers are event modifiers to prevent not reloading the page, for v-on:submit.prevent is an event handling modifier for button submit.


It is the full long syntax for handling the events and handlers.

As per the documentation, the Button click handler can be handled with different syntax.

v:on click, the handler button can be declared as follows

<button v-on:click="onSubmitEvent"></button>

The same can be shorted with @ syntax event.

<button @click="onSubmitEvent"></button>

Both do the same functionality in handling. It is just a syntax change.

difference between @click and v-on:click directive

  • Both serve the same thing
  • Syntactically different in usage

Both do the same thing, @click is a shorthand version v-on:click directive.

v-bind directive in vuejs component

the v-bind directive in vuejs used to bind tag attributes syntax

<htmltag v-bind:attribute="" ></htmltag>
<htmltag :attribute=""></htmltag>

added v-bind attribute to HTML element. For example, binding Anchor with href attribute using long syntax.

<a v-bind:href="{{this.url}}"></a>

The same trimmed with shorthand syntax.

<a :href="{{this.url}}"></a>