Difference between @click and v-on:click Vuejs

user_5630506 0
Viewed 172058

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)

vue-directives vue.js
4 Answers

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'

Hope it helps!

user_39365360

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.

user_73603260

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>
user_98187040
Related