Différence entre @click et v-on:click Vuejs

Question

Les questions doivent être suffisamment claires.

Mais je vois que quelqu'un utilise:

appuyez

Quelqu'un utilise:

appuyez

Mais quelle est vraiment la différence entre les deux (si elle existe)

Answer 1

Il n'y a aucune différence entre les deux, l'un est juste un raccourci pour le second.

Le préfixe v- sert de repère visuel pour identifier les attributs spécifiques à Vue dans vos modèles. Cela est utile lorsque vous utilisez Vue.js pour appliquer un comportement dynamique à une balise existante, mais peut sembler verbeux pour certaines directives fréquemment utilisées. En même temps, le besoin du préfixe v- devient moins important lorsque vous construisez une application SPA où Vue.js gère chaque modèle.

Source: documentation officielle.

Answer 2

v-bind et v-on sont deux directives fréquemment utilisées dans le template html de vuejs. Donc ils fournissent une notation abrégée pour les deux comme suit :

Vous pouvez remplacer v-on: par @

v-on:click='someFunction'

comme :

@click='someFunction'

Un autre exemple :

v-on:keyup='someKeyUpFunction'

comme :

@keyup='someKeyUpFunction'

De même, v-bind avec :

v-bind:href='var1'

Peut être écrit comme :

:href='var1'

Answer 3

Il se peut qu'ils ressemblent un peu différent de HTML normal, mais : et @ sont des caractères valides pour les noms d'attribut et tous les navigateurs pris en charge par Vue.js peuvent les analyser correctement. De plus, ils n'apparaissent pas dans le balisage final rendu. La syntaxe abrégée est totalement facultative, mais vous l'apprécierez probablement lorsque vous en apprendrez davantage sur son utilisation ultérieurement.

Source: documentation officielle.

Answer 4

Source officielle

Le guide de style officiel de Vue.js recommande de rester avec une version et de la maintenir de manière cohérente.

Les raccourcis de directive (: pour v-bind:, @ pour v-on: et # pour v-slot) doivent être utilisés toujours ou jamais.

Cette règle est définie dans la section Fortement recommandée.

---

Elle peut être imposée avec eslint en utilisant le plugin eslint-plugin-vue et en définissant la règle vue/v-on-style.

La valeur par défaut est définie sur shorthand.

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

Exemple