đŸ–±ïž Exemplo 04 - @click e Eventos

1. @click Simples

Cliques:

@click Ă© acionado quando vocĂȘ clica no elemento

2. @click Chamando MĂ©todos

VocĂȘ pode chamar funçÔes que executam lĂłgica complexa

3. @click Passando ParĂąmetros

Passe argumentos diretamente na chamada do @click

4. @mouseenter e @mouseleave

Passe o mouse aqui...

Mouse está sobre o elemento! 🎯

@mouseenter dispara quando o mouse entra, @mouseleave quando sai

5. @keyup e @keydown

VocĂȘ digitou:

@keyup dispara apĂłs soltar a tecla, @keydown dispara ao pressionar

6. Modificadores de Teclas

Pressione ENTER para executar:

Outros modificadores de teclado:

  • .enter - Tecla Enter
  • .escape - Tecla Escape
  • .space - Tecla de espaço
  • .tab - Tecla Tab
  • .delete - Delete/Backspace
Modificadores de teclado simplificam verificaçÔes de teclas específicas

7. @submit (FormulĂĄrios)

✅ Formulário enviado! Olá, !
@submit.prevent impede o comportamento padrĂŁo (reload da pĂĄgina)

8. MĂșltiplos Eventos no Mesmo Elemento

Status:

Um elemento pode ter mĂșltiplos ouvintes de eventos

9. Usando $event

$event referencia o objeto do evento do DOM

10. Modificador .stop (Propagação)

Div externo

Eventos capturados:

.stop impede que o evento propague para elementos pais