Diferença entre @click e v-on: clique em Vuejs

160

as perguntas devem ser suficientemente claras :). Mas vejo que alguém usa:

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

Alguém usa:

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

Mas realmente qual é a diferença entre os dois (se existir)

vue.js vuejs-directive LorenzoBerti
fonte

Respostas:

189

Não há diferença entre os dois, um é apenas uma abreviação para o segundo.

O prefixo v serve como uma dica visual para identificar atributos específicos do Vue em seus modelos. Isso é útil quando você está usando o Vue.js para aplicar comportamento dinâmico a algumas marcações existentes, mas pode parecer detalhado para algumas diretivas usadas com freqüência. Ao mesmo tempo, a necessidade do prefixo v se torna menos importante quando você cria um SPA em que o Vue.js gerencia todos os modelos.

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

Fonte: documentação oficial .

Cobaltway
fonte
1
Existe preferência da comunidade Vue em relação ao @ ou é apenas a preferência do JetBrains reclamar sobre o uso do v-on?
Kimmo Hintikka
5
@KimmoHintikka Sim, de alguma forma há uma preferência em relação ao atalho (@). A regra está incluída nas strongly-recommendede recommendeddas predefinições eslint-plugin-vue. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…
Cobaltway 5/18
63

v-binde v-onsão duas diretivas usadas com frequência no modelo html vuejs. Portanto, eles forneceram uma notação abreviada para os dois da seguinte maneira:

Você pode substituir v-on:por@

v-on:click='someFunction'

Como:

@click='someFunction'

Outro exemplo:

v-on:keyup='someKeyUpFunction'

Como:

@keyup='someKeyUpFunction'

Da mesma forma, v-bindcom:

v-bind:href='var1'

Pode ser escrito como:

:href='var1'

Espero que ajude!

Nitin Kumar
fonte
@LorenzoBerti, que tal esta resposta. Ajudou você a entender mais?
Nitin Kumar #
A resposta não explica nada, apenas fornece exemplos 1/3 dos quais são inconsistentes com a pergunta. Desculpe.
Jakub Strebeyko
v-bind e v-on são duas diretivas usadas com frequência no modelo html vuejs. Então eles forneceram uma notação abreviada para os dois, acho que isso explica a questão. essa é a razão fornecido na documentação a sugestão js bem :-)
Nitin Kumar
A questão é que a resposta foi postada 4 meses depois, sem links, sem citação e lançando atalhos de dois pontos para v-bind, que podem realmente aumentar a confusão.
Jakub Strebeyko
2

Eles podem parecer um pouco diferentes do HTML normal, mas: e @ são caracteres válidos para nomes de atributo e todos os navegadores compatíveis com Vue.js. podem analisá-lo corretamente. Além disso, eles não aparecem na marcação final renderizada. A sintaxe abreviada é totalmente opcional, mas você provavelmente a apreciará quando aprender mais sobre seu uso posteriormente.

Fonte: documentação oficial .

dharma
fonte