🚀 Capítulo 03: Diretivas - Comandos da Força

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o que são as Diretivas no Vue.js e saberá como usar o v-bind para alterar atributos HTML e o v-on para escutar eventos (como cliques de botão).

---

🏢 O Cenário Prático (Seu Desafio)

Para pilotar a nave, você precisa enviar comandos! Seu desafio hoje é ligar os sistemas da nave usando as diretivas do Vue. Você precisará desabilitar um botão quando o combustível estiver zerado e disparar um alerta quando o botão de hiperdrive for clicado!

---

🧠 Fundamentos: A Teoria Traduzida

As Diretivas são atributos especiais que colocamos nas tags HTML com o prefixo v-. Elas dizem ao Vue para fazer algo com aquele elemento.

As duas mais importantes para começar são:

1. v-bind (ou apenas :)

Serve para ligar uma variável do JavaScript a um atributo do HTML.

• Exemplo: Se você quer mudar o link de uma imagem ou desabilitar um botão dinamicamente.
• Forma Curta: Em vez de escrever v-bind:disabled="valor", você pode escrever apenas :disabled="valor".

2. v-on (ou apenas @)

Serve para escutar os eventos do HTML (como clique, passar o mouse, digitar).

• Exemplo: Rodar uma função quando o usuário clica em um botão.
• Forma Curta: Em vez de escrever v-on:click="funcao", você pode escrever apenas @click="funcao".

---

📖 Exemplo Guiado: Painel de Controle

Vamos usar as duas diretivas no App.vue.

🛠️ Passo a Passo

Abra o arquivo src/App.vue e altere o código:

<template>
  <div>
    <h1>🎛️ Painel de Controle</h1>
    
    <!-- Usando v-bind (forma curta ':') para desabilitar o botão -->
    <button :disabled="sistemaBloqueado">Lançar Míssil</button>
    
    <hr />
 
    <!-- Usando v-on (forma curta '@') para escutar o clique -->
    <button @click="ligarHiperdrive">Acionar Hiperdrive</button>
  </div>
</template>
 
<script setup>
const sistemaBloqueado = true; // Se for true, o botão fica cinza
 
function ligarHiperdrive() {
  alert('🚀 Hiperdrive ativado! Fazendo salto no hiperespaço!');
}
</script>

🕹️ Como Executar e Testar no VS Code

1. Salve o arquivo e veja o navegador.
2. O botão “Lançar Míssil” estará bloqueado porque sistemaBloqueado é true.
3. O botão “Acionar Hiperdrive” abrirá o alerta quando clicado!

---

🛠️ Prática Obrigatória 1

Mude o valor de sistemaBloqueado para false no seu código e veja o botão de míssil ser liberado!

---

🛠️ Prática Obrigatória 2

Crie uma nova função chamada dispararLaser que mostre um alerta escrito ”💥 Pew Pew!“. Use o @click para ligar essa função a um novo botão.

---

🔑 Gabarito de Código/Fórmulas

Prática 2:

No <template>:

<button @click="dispararLaser">Disparar Laser</button>

No <script setup>:

function dispararLaser() {
  alert('💥 Pew Pew!');
}

---

← Capitulo Anterior | Proximo Capitulo →