Introducción: fundamentos de Vue.js

1

Desarrollo de Aplicaciones Web con Vue.js 3

2

Fundamentos de Vue JS: Construyendo Aplicaciones Reactivas

3

Vue.js: Framework Progresivo y Reactivo para Aplicaciones Web

4

Aplicación Básica con JavaScript y Renderizado Declarativo

5

Capa Declarativa y Virtual DOM en Vue.js

Reactividad a profundidad

6

Paradigma de Reactividad: Conceptos y Aplicaciones Prácticas

7

Creación de Framework Reactivo con Proxies en JavaScript

8

Creación de un Mini Framework Reactivo desde Cero

9

Programación Reactiva con Proxies en JavaScript

10

Uso de Reflect para Simplificar Proxies en JavaScript

11

Programación Reactiva: Efectos, Track y Trigger en JavaScript

12

Reactividad en JavaScript: Efectos, Trackers y Triggers

Templates de Vue.js

13

Templates de HTML en Vue.js: Mejores Prácticas Esenciales

14

Implementación de Vue.js en Proyecto eCommerce Reactivo

15

Expresiones

16

Atributos Dinámicos en Vue.js: Uso de Clases y Estilos Reactivos

17

Rendering Condicional en View.js: Uso de v-show y v-if

18

Renderizado de Listas en HTML con VueJS

19

Eventos y Dinamismo en Templates HTML con Vue JS

APIs internas de Vue.js

20

Options API vs. Composition API

21

Diferencias entre Options API y Composition API en Vue.js

22

Creación de Métodos Personalizados con Vue JS Options API

23

Creación de Métodos Personalizados con Composition API en Vue.js

24

Uso de Reactive para Agrupar Estados en Composition API

Segunda capa: componentes de Vue.js

25

Creación de Componentes en Vue para Aplicaciones Modulares

26

Conexión de Datos entre Componentes en VueJS: Usando Props y Composition API

27

Creación de Componentes Personalizados en Aplicaciones Web

28

Creación de Eventos Personalizados en Vue para Comunicación entre Componentes

29

Eventos personalizados con Composition API en Vue.js

30

Observadores Personalizados con Watchers en Vue.js

31

Creación de Observadores Personalizados en Vue Composition API

32

Propiedades Computadas en Vue: Simplificación y Dinámica Reactiva

33

Propiedades Computadas con Composition API en Vue.js

34

Ciclos de Vida en Vue.js: Uso Práctico y Carga de Datos desde API

35

Ciclos de Vida en Composition API de Vue.js

Siguientes pasos

36

Desarrollo de Frontend para Ecommerce con Vue.js 3

37

Reactividad y Programación en Vue: Efectos y Ciclos de Vida

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Eventos y Dinamismo en Templates HTML con Vue JS

19/37
Recursos

¿Cómo agregar dinamismo usando eventos en Vue JS?

¡Dale vida a tus aplicaciones Vue! A medida que las necesidades de los usuarios se intensifican, se vuelve esencial mejorar la interactividad de las páginas web. Vue JS ofrece herramientas poderosas para agregar eventos que enriquecen la experiencia del usuario. Usar estos eventos permite un control y personalización fluidos sobre los elementos de nuestros templates, facilitando respuestas dinámicas basadas en la interacción del usuario.

¿Qué son los eventos en Vue JS?

Los eventos son acciones o sucesos que ocurren en el navegador, como cuando un usuario hace clic en un botón, escribe en un campo de texto o pasa el mouse sobre un elemento. Vue JS permite manejar estos eventos mediante directivas. Con una simple directiva v-on, podemos vincular cualquier evento en JavaScript, como click o mouseover, a funciones específicas que cambian el comportamiento de nuestra aplicación.

¿Cómo vincular eventos a botones?

Añadir eventos de clic a los botones es una de las formas más efectivas para proporcionar interactividad. Consideremos un botón de "carrito de compras" que, al hacer clic, muestra u oculta un modal. Primero, asegurémonos de que nuestro botón está definido en el template de HTML:

<button @click="cartOpen = !cartOpen">Carrito</button>

Aquí, se está utilizando la directiva @click como un atajo para v-on:click, lo cual es más conciso y ampliamente aceptado en Vue JS. En este ejemplo, el valor de cartOpen se alternará entre true y false cada vez que se haga clic en el botón, lo que mostrará o esconderá el modal del carrito dinámicamente.

¿Cómo mostrar dinámicamente imágenes de productos?

Imagina que tienes varios productos con imágenes que deben mostrarse al seleccionar un producto en miniatura. Vue JS facilita la renderización dinámica de información mediante la unión de atributos HTML a propiedades en los datos de Vue:

<img :src="product.images[activeImage].url" :alt="product.name">

Al hacer clic en una miniatura, el índice de activeImage cambia, actualizando el src de la imagen en tiempo real. Esto permite que la imagen mostrada en pantalla se adapte sin necesidad de recargar la página.

¿Qué eventos especiales se pueden utilizar?

Vue JS admite eventos personalizados y modificadores que dependen de las necesidades de la aplicación. Por ejemplo, considere el evento keyup con un modificador para detectar cuando el usuario presiona "Enter" al introducir un código de descuento:

<input @keyup.enter="applyDiscount" placeholder="Ingresa tu código">

Aquí, @keyup.enter espera a que el usuario presione "Enter" y activa la función applyDiscount, que podría aplicarse para reducir el precio del producto en un porcentaje:

methods: {
  applyDiscount() {
    this.product.price *= 0.5;
  }
}

¿Cómo manejar el estado del stock de productos?

Un manejo adecuado del stock es crucial en aplicaciones de comercio electrónico. Podemos usar eventos para actualizar dinámicamente el estado del stock en respuesta a las acciones de los usuarios:

<button @click="addToCart" :disabled="product.stock <= 0">Agregar al carrito</button>

Cada vez que se hace clic en "Agregar al carrito", la cantidad disponible se reduce usando:

methods: {
  addToCart() {
    if (this.product.stock > 0) {
      this.product.stock--;
    }
  }
}

Con estos métodos, los mensajes en la aplicación pueden actualizarse para reflejar el estado actual del stock, manteniendo al usuario informado sin problemas.

Ventajas de usar eventos en Vue JS

  • Interactividad: Los eventos permiten a los usuarios interactuar con la aplicación de maneras más naturales.
  • Reactividad: Al usar eventos, los cambios en el estado de la aplicación se reflejan inmediatamente en el DOM, mejorando la experiencia del usuario.
  • Modularidad: Vue JS permite aglutinar lógica hacia componentes definidos de una manera comprendida e intuitiva, sin grandes fricciones.

Conclusión

Vincular eventos a elementos en Vue JS transforma una aplicación estática en una dinámica y receptiva. Al asegurarte de manejar adecuadamente los eventos como el clic, el mouseover o el keyup, puedes crear una experiencia más atractiva e interactiva para tus usuarios. ¡Exprime todo el potencial de Vue y sigue explorando el vasto universo de los eventos para hacer que tus aplicaciones sean innovadoras y únicas!

Aportes 7

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Podemos usar la directiva v-on para escuchar eventos DOM y ejecutar algunos JavaScript cuando se activan.

Ejemplo:

<div">
  <button v-on:click="contador += 1">Agregar + 1</button>
  <p>Se ha hecho click {{ contador }} veces.</p>
</div>

También se permite colocar el nombre de un método al que te gustaría llamar.
Recuerda que se puede abreviar v-on con @ (v-on:click = @click)

Pueden encontrar más modificadores de eventos en la documentación oficial de Vue:
.
https://v3.vuejs.org/guide/events.html#event-modifiers
.
Uno muy útil suele ser el @click.prevent para prevenir el comportamiento por defecto de las aplicaciones 😄
.
Otra cosa interesante es que así como podemos pasarle expresiones JavaScript, también podemos pasarle nombres de métodos que podemos escribir aparte para que los mismos sean ejecutados al suceder dicho evento 😄
.
Dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/f718f7fe60106ad846ee5060569f3ef5fc9f200e

Yo felicito al profe porque es muy bueno, y el curso es muy completo, pero enserio me da agriera el zoom que tiene en su pantalla, se me está dificultando mucho enfocarme

Les dejó un Handling Events de Digital Ocean donde complementa este apartado.
En él podemos observar:

  • Event Modifiers
  • Key Modifiers

No sabia que podia usar un elemento que se este recorriendo en un v-for por fuera del bloque del codigo 👌

Excelente clase

Si stock es 0

<button :disabled="product.stock===0" @click="product.stock -= 1">{{ product.stock > 0 ? "Añadir a Carrito" : "Agotado"}}</button>