Differenza tra @click e v-on: fai clic su Vuejs

160

le domande dovrebbero essere abbastanza chiare :). Ma posso vedere che qualcuno usa:

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

Qualcuno usa:

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

Ma davvero qual è la differenza tra i due (se esiste)

vue.js vuejs-directive

— LorenzoBerti
fonte

189

Non c'è differenza tra i due, uno è solo una scorciatoia per il secondo.

Il prefisso v funge da segnale visivo per identificare gli attributi specifici di Vue nei modelli. Ciò è utile quando si utilizza Vue.js per applicare un comportamento dinamico ad alcuni markup esistenti, ma può sembrare prolisso per alcune direttive usate di frequente. Allo stesso tempo, la necessità del prefisso v diventa meno importante quando si crea una SPA in cui Vue.js gestisce ogni modello.

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

Fonte: documentazione ufficiale .

— Cobaltway
fonte

1

Esiste la preferenza della comunità Vue verso @ o è solo la preferenza JetBrains a lamentarsi dell'uso di v-on?

— Kimmo Hintikka,

5

@KimmoHintikka Sì, esiste in qualche modo una preferenza per il collegamento (@). La regola è incluso nella strongly-recommendede recommendeddei preset eslint-plugin-Vue. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…

— Cobaltway

63

v-binde v-onsono due direttive usate frequentemente nel modello html di vuejs. Quindi hanno fornito una notazione abbreviata per entrambi come segue:

È possibile sostituire v-on:con@

v-on:click='someFunction'

come:

@click='someFunction'

Un altro esempio:

v-on:keyup='someKeyUpFunction'

come:

@keyup='someKeyUpFunction'

Allo stesso modo, v-bindcon:

v-bind:href='var1'

Può essere scritto come:

:href='var1'

Spero che sia d'aiuto!

— Nitin Kumar
fonte

@LorenzoBerti che ne dici di questa risposta. Ti ha aiutato a capire di più?

— Nitin Kumar,

La risposta non spiega nulla, fornisce solo esempi 1/3 dei quali non sono coerenti con la domanda posta. spiacente.

— Jakub Strebeyko,

v-bind e v-on sono due direttive usate di frequente nel modello html di vuejs. Quindi hanno fornito una notazione abbreviata per entrambi penso che questo spieghi la domanda. questo è il motivo fornito anche nella documentazione di cue js :-)

— Nitin Kumar

Il fatto è che la risposta è stata pubblicata 4 mesi dopo senza collegamenti, citazioni e inserendo l'abbreviazione dei due punti per v-bind, che può effettivamente aggiungere confusione.

— Jakub Strebeyko,

2

Potrebbero apparire un po 'diversi dal normale HTML, ma: e @ sono caratteri validi per i nomi degli attributi e tutti i browser supportati da Vue.js possono analizzarlo correttamente. Inoltre, non compaiono nel markup del rendering finale. La sintassi abbreviata è totalmente facoltativa, ma probabilmente la apprezzerai quando imparerai di più sul suo utilizzo in seguito.

Fonte: documentazione ufficiale .

— dharma
fonte