vue.js - Diferencia de @click y v-on: haga clic en Vuejs

vuejs-directive

Question

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)

Answer 1

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 usa 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 .

Answer 2

Pueden parecer 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 .

Answer 3

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

Puede reemplazar v-on: con @

v-on:click=''someFunction''

como:

@click=''someFunction''

Otro ejemplo:

v-on:keyup=''someKeyUpFunction''

como:

@keyup=''someKeyUpFunction''

Del mismo modo, v-bind con:

v-bind:href=''var1''

Se puede escribir como:

:href=''var1''

¡Espero eso ayude!