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

Syntax

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

Example:

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>
THE BEST NEWSLETTER ANYWHERE
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
Subscribe
You'll get a notification every time a post gets published here.