Diferencia entre @click y v-on: haga clic en Vuejs

160

las preguntas deberían ser lo suficientemente claras :). Pero puedo ver que alguien usa:

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

Alguien usa:

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

Pero realmente, ¿cuál es la diferencia entre los dos (si existe)

vue.js vuejs-directive

— LorenzoBerti
fuente

189

No hay diferencia entre los dos, uno es solo una abreviatura para el segundo.

El prefijo v sirve como una señal visual para identificar atributos específicos de Vue en sus plantillas. Esto es útil cuando está utilizando Vue.js para aplicar un comportamiento dinámico a algún marcado existente, pero puede parecer detallado para algunas directivas de uso frecuente. Al mismo tiempo, la necesidad del prefijo v- se vuelve menos importante cuando se construye un SPA donde Vue.js administra cada plantilla.

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

Fuente: documentación oficial .

— Cobaltway
fuente

1

¿Existe preferencia de la comunidad Vue hacia @ o es solo preferencia de JetBrains quejarse sobre el uso de v-on?

— Kimmo Hintikka

55

@KimmoHintikka Sí, de alguna manera hay una preferencia hacia el acceso directo (@). La regla se incluye en strongly-recommendedy recommendedde los ajustes preestablecidos eslint-plugin-vue. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…

— Cobaltway

63

v-bindy v-onson dos directivas de uso frecuente en la plantilla vuejs html. Entonces proporcionaron una notación abreviada para ambos de la siguiente manera:

Puedes reemplazar v-on:con@

v-on:click='someFunction'

como:

@click='someFunction'

Otro ejemplo:

v-on:keyup='someKeyUpFunction'

como:

@keyup='someKeyUpFunction'

Del mismo modo, v-bindcon:

v-bind:href='var1'

Se puede escribir como:

:href='var1'

¡Espero eso ayude!

— Nitin Kumar
fuente

@LorenzoBerti, ¿qué tal esta respuesta? ¿Te ayudó a entender más?

— Nitin Kumar el

La respuesta no explica nada, solo da ejemplos 1/3 de los cuales son inconsistentes con la pregunta formulada. lo siento.

— Jakub Strebeyko

v-bind y v-on son dos directivas de uso frecuente en vuejs html template. Así que proporcionaron una notación abreviada para ambos, creo que esto explica la pregunta. esa es la razón provista en la documentación de cue js también :-)

— Nitin Kumar

La cuestión es que la respuesta se publicó 4 meses después sin enlaces, sin citas, y agregando la abreviatura de dos puntos para v-bind, que en realidad puede aumentar la confusión.

— Jakub Strebeyko

2

Pueden verse un poco diferentes del HTML normal, pero: y @ son caracteres válidos para los nombres de atributos y todos los navegadores compatibles con Vue.js pueden analizarlo correctamente. Además, no aparecen en el marcado final prestado. La sintaxis abreviada es totalmente opcional, pero es probable que la aprecie cuando sepa más sobre su uso más adelante.

Fuente: documentación oficial .

— dharma
fuente