Vue SFC: script, template и style
Разберитесь в формате одnofайлового компонента: блок script содержит логику, template — представление, а style — CSS с ограниченной областью действия.
«Vue SFC: script, template и style» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое однофайловый компонент?
Однофайловый компонент Vue (SFC) — это .vue-файл с тремя блоками: <script> для логики JavaScript, <template> для представления HTML и <style> для CSS. Всё необходимое для одного компонента находится в одном файле.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>Блок script
Здесь размещаются логика, данные, импорты и код API композиции. При использовании <script setup> переменные и импорты, объявленные на верхнем уровне, автоматически доступны в шаблоне.
script setup — современный подход
<script setup> — рекомендуемый синтаксис SFC. Объявленные в нём переменные, вычисляемые свойства и функции напрямую доступны в шаблоне, поэтому явно возвращать их не нужно.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Блок template
Шаблон содержит HTML-представление компонента. Шаблоны Vue компилируются в функции рендеринга. Используйте специфичные для Vue атрибуты и директивы (v-if, v-for, @click) внутри шаблона.
Интерполяция в шаблоне
Используйте двойные фигурные скобки {{ }}, чтобы выводить реактивные данные как текст. Vue автоматически экранирует HTML — для отображения HTML используйте директиву v-html (с осторожностью).
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>Блок style
CSS в блоке style применяется к компоненту. Добавьте scoped, чтобы ограничить область действия стилей только элементами этого компонента и предотвратить случайное распространение стилей на всё приложение.
<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>Как работают локальные стили
Vue добавляет к элементам компонента уникальный атрибут данных (например, data-v-abc123) и переписывает селекторы scoped CSS, добавляя в них этот атрибут. Благодаря этому стили соответствуют только элементам данного компонента.
CSS Modules во Vue
Альтернатива scoped — использовать <style module> для CSS Modules. Получайте доступ к именам классов через объект $style в шаблоне.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Глобальные стили
Стили без scoped применяются глобально. Распространённый шаблон: глобальный app.css для базовых стилей и токенов дизайна, а также локальные стили каждого компонента для правил, специфичных для него.
TypeScript в SFC
Добавьте lang="ts" в блок script, чтобы использовать TypeScript. Volar (официальное расширение IDE для Vue) предоставляет полную поддержку TypeScript для SFC Vue, включая проверку типов в шаблонах.
Именование файлов SFC
Называйте файлы SFC в PascalCase (UserProfile.vue), если компоненты используются в шаблонах. Vue рекомендует имена из нескольких слов, чтобы избежать конфликтов с HTML-элементами.
Быстрая проверка
Что делает атрибут scoped у блока <style> во Vue?
Повторение: однофайловые компоненты Vue
Файлы .vue содержат три блока: script (логика), template (представление) и style (CSS). Используйте