Diferencia de @click y v-on: click Vuejs


Las preguntas deben 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)

Author: LorenzoBerti, 2017-07-28

3 answers

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 Vue-específico atributos en sus plantillas. Esto es útil cuando está utilizando Vue.js para aplicar el comportamiento dinámico a algún marcado existente, pero puede sentirse detallado para algunas directivas de uso frecuente. Al mismo tiempo, la necesidad del prefijo v se vuelve menos importante cuando se está construyendo un SPA donde Vue.js gestiona cada plantilla.

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

Fuente: documentación oficial.

 58
Author: Cobaltway,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-28 09:20:48

v-bind y v-on son dos directivas usadas frecuentemente en la plantilla html de vuejs. Así que proporcionaron una notación taquigráfica para ambos de la siguiente manera:

Puede reemplazar v-on: por @

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 que ayude!

 21
Author: Nitin Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-19 10:43:38

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

Fuente: documentación oficial.

 0
Author: donotreplay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-14 13:51:23