Différence de @ click et v-on: cliquez sur 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)
3 réponses
Il n'y a pas de 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 Vue-specific les attributs dans vos templates. Ceci est utile lorsque vous utilisez Vue.js pour appliquer un comportement dynamique à un balisage existant, mais peut se sentir verbeux pour certaines directives fréquemment utilisées. Dans le même temps, l' 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: la documentation officielle.
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 comme suit:
, Vous pouvez remplacer v-on: avec @
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!
Ils peuvent sembler un peu différents du HTML normal, mais : et @ sont des caractères valides pour les noms d'attributs et all Vue.les navigateurs pris en charge par 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 apprendrez plus sur son utilisation plus tard.
Source: la documentation officielle.