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

In this short tutorial, You will learn about v-on and v-bin directive and shorthand syntax with example

Current date timestamp year in vuejs example

v-on directive

v-on directive in vuejs add the dynamic behaviour to html templates.

v-on is an vuejs directive is binding event handler for listening javascript native events.

This will be added as an extra parameter to html tag as seen below


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

Events are click event , for example button click or input keypress event

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


It is full long syntax for handling the events and handlers

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

v:on click 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 syntax change

difference between @click and v-on:click directive

  • Both serve the same thing
  • Syntactically different in usage

Both does the same thing, @click is an short hand version v-on:click directive

v-bind directive

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>
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.