Vue SFC: script template style
Comprenda el formato de componente de archivo único: el bloque script para la lógica, el bloque template para la vista y el bloque style para CSS con ámbito.
Vue SFC: script template style es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es un componente de archivo único?
Un componente de archivo único de Vue (SFC) es un archivo .vue con tres bloques: <script> para la lógica de JavaScript, <template> para la vista HTML y <style> para CSS. Todo lo relacionado con un componente vive en un solo archivo.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>El bloque script
Aquí van la lógica, los datos, las importaciones y el código de la API de composición. Con <script setup>, las variables y las importaciones declaradas en el nivel superior están disponibles automáticamente en el template.
script setup: el enfoque moderno
<script setup> es la sintaxis recomendada para los SFC. Las variables, propiedades calculadas y funciones declaradas en él están disponibles directamente en el template sin necesidad de devolverlas explícitamente.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>El bloque template
El template contiene la vista HTML del componente. Los templates de Vue se compilan en funciones de renderizado. Use atributos y directivas específicas de Vue (v-if, v-for, @click) dentro del template.
Interpolación de template
Use dobles llaves {{ }} para mostrar datos reactivos como texto. Vue escapa automáticamente el HTML; para renderizar HTML, use la directiva v-html (con precaución).
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>El bloque style
El CSS del bloque style se aplica al componente. Añada scoped para limitar los estilos únicamente a los elementos de este componente y evitar filtraciones accidentales de estilos globales.
<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>Cómo funcionan los estilos scoped
Vue añade un atributo de datos único (como data-v-abc123) a los elementos del componente y reescribe los selectores CSS scoped para incluirlo. Así se garantiza que los estilos solo coincidan con elementos de este componente.
CSS Modules en Vue
Una alternativa a scoped es usar <style module> para CSS Modules. Acceda a los nombres de las clases mediante el objeto $style en el template.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Estilos globales
Los estilos sin scoped se aplican globalmente. Un patrón habitual es usar un app.css global para los estilos base y los tokens de diseño, además de estilos scoped por componente para las reglas específicas de cada componente.
TypeScript en SFC
Añada lang="ts" al bloque script para usar TypeScript. Volar (la extensión oficial de Vue para IDE) proporciona compatibilidad completa con TypeScript para los SFC de Vue, incluidas plantillas con comprobación de tipos.
Nomenclatura de archivos SFC
Asigne nombres en PascalCase (UserProfile.vue) a los archivos SFC de los componentes utilizados en templates. Vue recomienda nombres de varias palabras para evitar conflictos con elementos HTML.
Comprobación rápida
¿Qué hace el atributo scoped en un bloque <style> de Vue?
Repaso: SFC de Vue
Los archivos .vue tienen tres bloques: script (lógica), template (vista) y style (CSS). Use