🚀 Capítulo 06: Estilos - Camuflagem

🎯 Objetivo da Aula

Ao final desta aula, você saberá como aplicar estilos dinâmicos no Vue.js usando a ligação de classes (:class) e entenderá a importância do estilo escopado (<style scoped>).

---

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

A sua nave precisa entrar em Modo Furtivo! Seu desafio hoje é criar um botão que, ao ser clicado, muda a classe CSS da nave para deixá-la invisível (camuflada), alterando a cor de fundo do painel!

---

🧠 Fundamentos: A Teoria Traduzida

1. Estilo Escopado (scoped)

Como vimos no Capítulo 2, colocar a palavra scoped na tag de estilo garante que aquele CSS só funcione dentro daquele arquivo. Isso evita que você mude a cor de um botão em uma tela e acabe mudando em todo o site sem querer.

2. Classes Dinâmicas (:class)

No HTML comum, a classe é fixa: class="ativo". No Vue, podemos usar o : (v-bind) para dizer que a classe depende de uma variável reativa!

• Sintaxe com Objeto: :class="{ 'nome-da-classe': variavelBooleana }"
  • Se variavelBooleana for true, a classe é aplicada. Se for false, ela é removida.

---

📖 Exemplo Guiado: Modo Furtivo

Vamos criar a camuflagem da nave.

🛠️ Passo a Passo

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

<template>
  <div>
    <h1>🛸 Sistema de Camuflagem</h1>
    
    <!-- A classe 'furtivo' só será aplicada se modoFurtivo for true -->
    <div class="nave" :class="{ 'furtivo': modoFurtivo }">
      <p>{{ modoFurtivo ? '👻 Modo Furtivo Ativado' : '🔴 Visível no Radar' }}</p>
    </div>
 
    <button @click="alternarCamuflagem">
      {{ modoFurtivo ? 'Desativar Camuflagem' : 'Ativar Camuflagem' }}
    </button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const modoFurtivo = ref(false);
 
function alternarCamuflagem() {
  modoFurtivo.value = !modoFurtivo.value;
}
</script>
 
<style scoped>
.nave {
  padding: 20px;
  border: 2px solid #ccc;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
  transition: all 0.5s ease;
}
 
/* Classe que será aplicada dinamicamente */
.furtivo {
  background-color: #1a1a1a;
  color: #00ff00;
  border-color: #00ff00;
}
</style>

🕹️ Como Executar e Testar no VS Code

1. Salve e veja o navegador.
2. Clique no botão. A caixa mudará de cinza para preto com letras verdes, simulando a camuflagem!

---

🛠️ Prática Obrigatória 1

Crie uma nova classe no CSS chamada .alerta com fundo vermelho e texto branco. Adicione uma nova variável reativa emPerigo = ref(false) e use o :class para aplicar essa classe quando emPerigo for verdadeiro.

---

🛠️ Prática Obrigatória 2

Use o :style (estilo inline dinâmico) para mudar o tamanho da fonte do texto baseado em um número (ex: :style="{ fontSize: tamanho + 'px' }").

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No <template>:

<div :class="{ 'alerta': emPerigo }">

---

← Capitulo Anterior | Proximo Capitulo →