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.

Syntax

<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.

Example:

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

The same can be shorted with @ syntax event <button @click=“onSubmitEvent”>

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 can be trimmed with shorthand syntax.

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