Aula 07 - Eventos e Formulários ⌨️

Interatividade em Tempo Real

Agenda de Hoje 📅

1. Capturando Eventos com on:
2. Modificadores de Evento
3. Comunicação Filho -> Pai (dispatch)
4. O que é Two-Way Data Binding?
5. Vinculação com bind:value
6. Prática: Dashboard de Cadastro

1. Escutando Eventos 👂

• No Svelte, usamos a diretiva on: seguida do nome do evento.

<script>
  function saudacao() {
    alert("Olá!");
  }
</script>

<button on:click={saudacao}>Clique me</button>

2. Inline vs Nomeadas 📝

• Para lógicas simples, podemos escrever direto no HTML.

<!-- Inline -->
<button on:click={() => count += 1}> +1 </button>

<!-- Nomeada (Melhor para lógicas complexas) -->
<button on:click={handleSubmit}> Enviar </button>

3. Modificadores de Evento 🛠️

• O Svelte possui atalhos para comportamentos comuns do DOM.

• |preventDefault: Para formulários.

• |once: Executa apenas uma vez.
• |stopPropagation: Impede o evento de subir na árvore.

<form on:submit|preventDefault={salvar}> ... </form>

4. Despachando Eventos (dispatch) 📡

• Como um componente Filho avisa o Pai de que algo aconteceu?
• Usamos o createEventDispatcher.

<!-- Filho.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function avisar() {
    dispatch('mensagem', { texto: 'Oi Pai!' });
  }
</script>

5. Vinculação (Binding) 🔗

• Sincroniza o valor de um input com uma variável de forma automática.
• Frontend Tradicional: Ler o valor -> Atualizar variável -> Re-renderizar.
• Svelte: bind:value.

5.1 O Exemplo Clássico

<script>
  let nome = "";
</script>

<input type="text" bind:value={nome} />
<p>Olá, {nome}!</p>

• Digite no input e veja o texto mudar instantaneamente! ⚡

5.2 Outros Tipos de Inputs

• Números: type="number" (Converte p/ número sozinho!).
• Checkboxes: bind:checked.
• Grupos (Radio): bind:group.

6. Seleção de Grupos (Radio) 🔘

<script>
  let sabor = "Morango";
</script>

<label>
  <input type="radio" bind:group={sabor} value="Chocolate" />
  Chocolate
</label>

<label>
  <input type="radio" bind:group={sabor} value="Morango" />
  Morango
</label>

7. Prática: Perfil Editável ✍️

• Crie uma tela com inputs para Nome e Bio.
• Use bind:value para mostrar uma prévia em tempo real ao lado.
• Adicione um botão "Limpar" que reseta as variáveis.

8. UX: Botões Dinâmicos 🚫

• Use a reatividade para desabilitar o botão se o campo estiver vazio.

<button disabled={!nome}> Enviar </button>

Resumo da Aula ✅

• on:click captura interações.
• bind:value sincroniza dados bidirecionalmente.
• dispatch envia mensagens de componentes filhos para os pais.

Próxima Aula: Estilização 🎨

• CSS Scoped.
• A diretiva class:.
• Variáveis de CSS dinâmicas.

Dúvidas? 🤔

"A interatividade é o que transforma um documento estático em uma aplicação viva."