🚀 Capítulo 02: SFC - A Armadura Completa
🎯 Objetivo da Aula
Ao final desta aula, você entenderá o que é um SFC (Single File Component) no Vue.js, como ele organiza HTML, CSS e JavaScript no mesmo arquivo, e terá criado o seu primeiro componente personalizado.
🏢 O Cenário Prático (Seu Desafio)
Uma armadura mandaloriana não é feita de peças espalhadas; ela é uma peça única e completa (Beskar). No Vue, nossos componentes são assim! Seu desafio é criar o componente da Armadura contendo a estrutura (HTML), a pintura (CSS) e os sistemas (JS) no mesmo arquivo!
🧠 Fundamentos: A Teoria Traduzida
No Vue, os arquivos terminam com a extensão .vue. Eles são chamados de Single File Components (Componentes de Arquivo Único) porque dividem o arquivo em 3 partes bem claras:
1. <template> (O HTML)
É onde você escreve a estrutura da tela. É o esqueleto do seu componente.
2. <script setup> (O JavaScript)
É onde fica a lógica. Usamos o setup para indicar que estamos usando a Composition API (a forma moderna e recomendada do Vue 3).
3. <style scoped> (O CSS)
É onde você estiliza o componente. A palavra scoped é mágica: ela garante que o CSS que você escrever aqui só vai valer para este componente, sem estragar o resto do site!
📖 Exemplo Guiado: Criando o Componente Armadura
Vamos ver a estrutura padrão de um arquivo .vue.
🛠️ Passo a Passo
Abra o arquivo src/App.vue e substitua o conteúdo por isto:
<template>
<div class="armadura">
<h1>🛠️ Forja Mandaloriana</h1>
<p>Status da Armadura: **{{ status }}**</p>
</div>
</template>
<script setup>
// Aqui fica o JavaScript puro
const status = 'Pronta para a batalha!';
</script>
<style scoped>
/* O CSS só vale para este arquivo */
.armadura {
border: 2px solid #555;
padding: 20px;
border-radius: 10px;
background-color: #222;
color: #fff;
}
h1 {
color: #ffe81f; /* Amarelo Star Wars */
}
</style>🕹️ Como Executar e Testar no VS Code
- Salve o arquivo e veja o navegador.
- Você verá uma caixa escura com bordas e o texto amarelo! A variável
statusfoi inserida no HTML usando chaves duplas{{ }}(igual ao Angular!).
🛠️ Prática Obrigatória 1
No <script setup>, crie uma nova variável chamada material com o valor “Beskar”. Exiba essa variável no <template> dentro de um parágrafo.
🛠️ Prática Obrigatória 2
No <style scoped>, mude a cor do texto do parágrafo para verde claro (color: #00ff00;).
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
No App.vue:
<template>
<div class="armadura">
<h1>Forja Mandaloriana</h1>
<p>Material: {{ material }}</p>
</div>
</template>
<script setup>
const material = 'Beskar';
</script>
<style scoped>
p {
color: #00ff00;
}
</style>