Event handling

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>