{

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.

Current date timestamp year in vuejs example

v-on directive

v-on directive in vuejs adds the 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 click 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

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