Unterschied zwischen @click und v-on: Klicken Sie auf Vuejs

159

Die Fragen sollten klar genug sein :). Aber ich kann sehen, dass jemand verwendet:

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

Jemand benutzt:

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

Aber was ist wirklich der Unterschied zwischen den beiden (falls vorhanden)

vue.js vuejs-directive LorenzoBerti
quelle

Antworten:

187

Es gibt keinen Unterschied zwischen den beiden, einer ist nur eine Abkürzung für den zweiten.

Das v-Präfix dient als visueller Hinweis zum Identifizieren von Vue-spezifischen Attributen in Ihren Vorlagen. Dies ist nützlich, wenn Sie Vue.js verwenden, um dynamisches Verhalten auf vorhandene Markups anzuwenden, sich jedoch bei einigen häufig verwendeten Anweisungen ausführlich anfühlen können. Gleichzeitig wird die Notwendigkeit des v-Präfix weniger wichtig, wenn Sie ein SPA erstellen, in dem Vue.js jede Vorlage verwaltet.

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

Quelle: offizielle Dokumentation .

Cobaltway
quelle
1
Gibt es eine Präferenz der Vue-Community gegenüber @ oder ist es nur die Präferenz von JetBrains, sich über die Verwendung von V-On zu beschweren?
Kimmo Hintikka
5
@KimmoHintikka Ja, es gibt irgendwie eine Präferenz für die Verknüpfung (@). Die Regel ist in strongly-recommendedund recommendedaus den eslint-plugin-vue-Voreinstellungen enthalten. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…
Cobaltway
62

v-bindund v-onsind zwei häufig verwendete Anweisungen in der HTML-Vorlage von vuejs. Daher lieferten sie für beide eine Kurzschreibweise:

Sie können ersetzen v-on:mit@

v-on:click='someFunction'

wie:

@click='someFunction'

Ein anderes Beispiel:

v-on:keyup='someKeyUpFunction'

wie:

@keyup='someKeyUpFunction'

Ebenso v-bindmit:

v-bind:href='var1'

Kann geschrieben werden als:

:href='var1'

Ich hoffe es hilft!

Nitin Kumar
quelle
@ LorenzoBerti wie wäre es mit dieser Antwort. Hat es Ihnen geholfen, mehr zu verstehen?
Nitin Kumar
Die Antwort erklärt nichts, sondern gibt nur Beispiele, von denen 1/3 nicht mit der gestellten Frage übereinstimmt. Es tut uns leid.
Jakub Strebeyko
v-bind und v-on sind zwei häufig verwendete Anweisungen in der HTML-Vorlage von vuejs. Sie gaben beiden eine Kurznotation, ich denke, das erklärt die Frage. das ist auch der grund, der in der cue js dokumentation angegeben ist :-)
Nitin Kumar
Die Antwort wurde 4 Monate später ohne Links, ohne Zitieren und ohne die Doppelpunkt-Kurzschrift für V-Bind veröffentlicht, was die Verwirrung noch verstärken kann.
Jakub Strebeyko
2

Sie sehen möglicherweise etwas anders aus als normales HTML, aber: und @ sind gültige Zeichen für Attributnamen, und alle von Vue.js unterstützten Browser können sie korrekt analysieren. Außerdem werden sie nicht im endgültig gerenderten Markup angezeigt. Die Kurzschrift-Syntax ist völlig optional, aber Sie werden sie wahrscheinlich zu schätzen wissen, wenn Sie später mehr über ihre Verwendung erfahren.

Quelle: offizielle Dokumentation .

Dharma
quelle