241

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)

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
LorenzoBerti
  • 6,704
  • 8
  • 47
  • 89

4 Answers4

279

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
FitzFish
  • 8,557
  • 2
  • 30
  • 39
  • 2
    Is there Vue community preference towards @ or is it just JetBrains preference to complain about the use of v-on? – Kimmo Hintikka May 01 '18 at 21:56
  • 15
    @KimmoHintikka Yes, there is somehow a preference toward the shortcut (@). The rule is included in `strongly-recommended` and `recommended` of the eslint-plugin-vue presets. https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/v-on-style.md – FitzFish Jun 05 '18 at 08:09
109

v-bind and v-on are two frequently used directives in vuejs html template. So they provided a shorthand notation for the both of them as follows:

You can replace v-on: with @

v-on:click='someFunction'

as:

@click='someFunction'

Another example:

v-on:keyup='someKeyUpFunction'

as:

@keyup='someKeyUpFunction'

Similarly, v-bind with :

v-bind:href='var1'

Can be written as:

:href='var1'
starball
  • 20,030
  • 7
  • 43
  • 238
Nitin Kumar
  • 1,448
  • 2
  • 13
  • 19
  • @LorenzoBerti how about this answer. Did it helped you to understand more? – Nitin Kumar Nov 25 '17 at 11:42
  • The answer does not explain anything, just gives examples 1/3 of which are inconsistent with the question asked. sorry. – Jakub Strebeyko Mar 16 '18 at 08:52
  • v-bind and v-on are two frequently used directives in vuejs html template. So they provided a shorthand notation for the both of them I think this explains the question. that is the reason provided in the cue js documentation as well :-) – Nitin Kumar Mar 21 '18 at 07:54
  • 1
    The thing is the answer has been posted 4 months later with no links, no citation, and throwing in the colon-shorthand for v-bind, that can actually add to the confusion. – Jakub Strebeyko Mar 22 '18 at 13:08
  • 5
    @JakubStrebeyko i dont know what you're btiching about but this is a pretty neat answer and also cleared my confusion regarding the plain colon which i didn't know stood for v-bind. – Hadi Pawar Sep 25 '20 at 17:48
  • 1
    If you want to use an argument in a function call, it still has to be a callable so use something like `@click="() => someFunction(argument)"` – s3c Oct 12 '22 at 05:53
3

They may look a bit different from normal HTML, but : and @ are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.

Source: official documentation.

tony19
  • 125,647
  • 18
  • 229
  • 307
dharma
  • 31
  • 2
2

Official source

The official Vue.js style guide recommends sticking with one version and keeping it consistent.

Directive shorthands (: for v-bind:, @ for v-on: and # for v-slot) should be used always or never.

This rule is defined in the Strongly Recommended section.

It can be enforced with eslint by using the eslint-plugin-vue plugin and setting the vue/v-on-style rule.

Default is set to shorthand.

{
  "vue/v-on-style": ["error", "shorthand" | "longform"]
}

Example

<template>
  <!-- ✓ GOOD -->
  <div @click="foo"/>

  <!-- ✗ BAD -->
  <div v-on:click="foo"/>
</template>
Quentin Veron
  • 3,079
  • 1
  • 14
  • 32