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

161

les questions doivent être suffisamment claires :). Mais je peux voir que quelqu'un utilise:

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

Quelqu'un utilise:

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

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

vue.js vuejs-directive LorenzoBerti
la source

Réponses:

190

Il n'y a pas de différence entre les deux, l'un n'est qu'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. Ceci est utile lorsque vous utilisez Vue.js pour appliquer un comportement dynamique à un balisage existant, mais peut sembler verbeux pour certaines directives fréquemment utilisées. Dans le même temps, le besoin du préfixe v devient moins important lorsque vous construisez un SPA où Vue.js gère chaque modèle.

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

Source: documentation officielle .

Cobaltway
la source
1
Y a-t-il une préférence de la communauté Vue envers @ ou est-ce juste la préférence de JetBrains de se plaindre de l'utilisation de v-on?
Kimmo Hintikka
5
@KimmoHintikka Oui, il y a en quelque sorte une préférence pour le raccourci (@). La règle est incluse dans strongly-recommendedet recommendeddes préréglages eslint-plugin-vue. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…
Cobaltway
64

v-bindet v-onsont deux directives fréquemment utilisées dans le modèle html vuejs. Ils ont donc fourni 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-bindavec:

v-bind:href='var1'

Peut s'écrire:

:href='var1'

J'espère que ça aide!

Nitin Kumar
la source
@LorenzoBerti que diriez-vous de cette réponse. Cela vous a-t-il aidé à mieux comprendre?
Nitin Kumar
La réponse n'explique rien, donne juste des exemples dont 1/3 est incompatible avec la question posée. Désolé.
Jakub Strebeyko
v-bind et v-on sont deux directives fréquemment utilisées dans le modèle html vuejs. Ils ont donc fourni une notation abrégée pour les deux. Je pense que cela explique la question. c'est aussi la raison fournie dans la documentation de cue js :-)
Nitin Kumar
Le fait est que la réponse a été publiée 4 mois plus tard sans liens, sans citation et en ajoutant le raccourci deux-points pour v-bind, ce qui peut en fait ajouter à la confusion.
Jakub Strebeyko
2

Ils peuvent sembler un peu différents du HTML normal, mais: et @ sont des caractères valides pour les noms d'attributs et tous les navigateurs pris en charge par Vue.js peuvent l'analyser correctement. De plus, ils n'apparaissent pas dans le balisage rendu final. La syntaxe abrégée est totalement facultative, mais vous l'apprécierez probablement lorsque vous en saurez plus sur son utilisation plus tard.

Source: documentation officielle .

dharma
la source