Difference between @click and v-on:click Vuejs

vue.js vue-directives
LorenzoBerti picture LorenzoBerti · Jul 28, 2017 · Viewed 121.1k times · Source

the questions should be enough clear :). But I can see that someone use:

<button @click="function()">press</button>

Someone use:

<button v-on:click="function()">press</button>

But really what is the difference between the two (if exists)

Answer

Cobaltway picture Cobaltway · Jul 28, 2017

There is no difference between the two, one is just a shorthand for the second.

The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the v- prefix becomes less important when you are building an SPA where Vue.js manages every template.

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

Source: official documentation.

Related questions

Vue JS - How to restrict special characters in an input field?

What's the best way to implement text-character restrictions in Vue JS ? I am looking to achieve with RegExp so that the user will not be allowed to type the symbols in the field.

Read More
Dynamically data doesn't update when changing v-model input value in Vuejs

I am building a weather app with this Weather API. I am trying to add an <input> field value that when it changes the city name, then updates the other values forecast. I have created the <input&…

Read More
Vue.js v-model with dynamic list of radio buttons

I am trying to make a reuseable vue radio-button component that will take a variable name, and an object containing labels and values, then render a list of radio buttons using v-for. I have had success with each half of …

Read More