In this short tutorial, You will learn about v-on and v-bin directive and shorthand syntax with example
v-on directive in vuejs add the dynamic behaviour to html templates.
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 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.
The same can be trimmed with shorthand syntax