Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Shorthands

Ten en cuenta que algunas directivas se pueden escribir de forma abreviada. Veamos un ejemplo.

Shorthands en Vue

Los shorthands nos permiten escribir directivas de Vue de manera abreviada.

Ejemplo de una directiva

Aquí tenemos una directiva v-for escrita tal cual.
Sin embargo, @ es un shorthand. Es decir, es también una directiva de Vue, pero en su forma abreviada.

Equivalencia entre `@` y `v.on`

Si quisiéramos escribir la directiva completa, sería v.on.
v.on significa que vamos a reaccionar ante algo cuando ocurra un evento.

El @ se puede reemplazar por v.on en su forma completa.
Si actualizamos, veremos que el proyecto sigue funcionando.

Importancia de conocer `v.on`

En algunos proyectos podrías ver escrito v.on, pero recuerda que puedes abreviarlo simplemente con @.

Esto significa que estás escuchando un evento.

@ se usa para escuchar eventos.
En este caso, escucha el evento addProduct sobre un componente.
También puede escuchar el evento click sobre un componente.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Ya que estamos aquí, hablemos de "shorthands". Los "shorthands" nos permiten escribir directivas de Vue de manera abreviada. Por ejemplo, aquí tenemos una directiva, “v-for” que está escrita tal cual. Sin embargo, este “@” es un “shorthands”. Es decir, es también una directiva Vue, pero que se ha escrito en su forma abreviada. Si nosotros quisiéramos escribir la directiva tal cual es, esta directiva se llamaría “v.on”. “V.on”, o sea, vamos a reaccionar ante algo cuando ocurra algo. Eso significa “on” sobre algo. Entonces este “@” lo podemos reemplazar por la directiva “v.on” en su forma completa. Y si actualizamos, vamos a ver que el proyecto continúa funcionando. Es importante que conozcas esto porque en algunos proyectos podrías ver escrito el término “v.on”. Pero ten en cuenta que el final lo puedes abreviar simplemente con un “@”, y esto significa que estás escuchando un evento. El “@” es para escuchar un evento. En este caso escuchas el evento “addProduct” sobre este componente y en este caso escuches el evento de click sobre este componente.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code