web-dev-qa-db-fra.com

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

les questions devraient être assez 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 existe)

vue.jsvuejs-directive
99
LorenzoBerti

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. Cela est utile lorsque vous utilisez Vue.js pour appliquer un comportement dynamique à un balisage existant, mais que vous pouvez vous sentir trop bavard pour certaines directives fréquemment utilisées. En même temps, la nécessité du préfixe v- devient moins importante 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 .

122
Cobaltway

v-bind et v-on sont deux directives fréquemment utilisées dans le modèle html de vuejs. Donc, ils ont fourni une notation abrégée pour les deux d'entre eux 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'

J'espère que ça aide!

40
Nitin Kumar

Ils peuvent paraître 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 final rendu. La syntaxe abrégée est totalement facultative, mais vous l'apprécierez probablement plus tard, si vous en savez plus sur son utilisation.

Source: documentation officielle .

2
dharma