Vue SFC: script template style
Entenda o formato de componente de arquivo único: o bloco script para a lógica, o bloco template para a visualização e o bloco style para CSS com escopo.
Vue SFC: script template style é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é um Componente de arquivo único?
Um Componente Vue de arquivo único (SFC) é um arquivo .vue com três blocos: <script> para a lógica JavaScript, <template> para a visualização HTML e <style> para CSS. Tudo de um componente fica em um único arquivo.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>O bloco script
A lógica, os dados, as importações e o código da API de composição ficam aqui. Com <script setup>, as variáveis e importações declaradas no nível superior ficam automaticamente disponíveis no modelo.
script setup — a abordagem moderna
<script setup> é a sintaxe recomendada para SFC. As variáveis, propriedades computadas e funções declaradas nele ficam diretamente disponíveis no modelo, sem precisar retorná-las explicitamente.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>O bloco template
O modelo contém a visualização HTML do componente. Os modelos Vue são compilados em funções de renderização. Use atributos e diretivas específicas do Vue (v-if, v-for, @click) dentro do modelo.
Interpolação de modelo
Use chaves duplas {{ }} para exibir dados reativos como texto. Vue escapa HTML automaticamente — para renderizar HTML, use a diretiva v-html (com cautela).
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>O bloco style
O CSS no bloco style aplica-se ao componente. Adicione scoped para limitar os estilos apenas aos elementos deste componente — evitando vazamentos acidentais de estilos globais.
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>Como funcionam os estilos delimitados
Vue adiciona um atributo de dados exclusivo (como data-v-abc123) aos elementos do componente e reescreve os seletores CSS delimitados para incluí-lo. Isso garante que os estilos correspondam apenas aos elementos deste componente.
Módulos CSS no Vue
Uma alternativa a scoped: use <style module> para Módulos CSS. Acesse os nomes de classe por meio do objeto $style no modelo.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Estilos globais
Os estilos sem scoped aplicam-se globalmente. Um padrão comum: um app.css global para estilos básicos + tokens visuais e estilos delimitados por componente para regras específicas do componente.
TypeScript em SFCs
Adicione lang="ts" ao bloco script para usar TypeScript. Volar, a extensão oficial do Vue para ambientes de desenvolvimento, fornece suporte completo a TypeScript para SFCs do Vue, incluindo modelos com verificação de tipos.
Nomenclatura de arquivos SFC
Nomeie os arquivos SFC em PascalCase (UserProfile.vue) para componentes usados em modelos. O Vue recomenda nomes com várias palavras para evitar conflitos com elementos HTML.
Verificação rápida
O que o atributo scoped em um bloco <style> do Vue faz?
Recapitulação: SFCs do Vue
Os arquivos .vue têm três blocos: script (lógica), template (visualização) e style (CSS). Utilize