Single File Component (.vue)

Разбираем главный строительный блок Vue — однофайловый компонент (.vue), где разметка, логика и стили живут вместе.

SFC (Single File Component) — файл с расширением .vue, который содержит три блока: <template> (разметка), <script> (логика) и <style> (стили) одного компонента.

Зачем держать всё в одном файле

Раньше считалось правильным разделять HTML, CSS и JS по разным файлам. Но на практике разметка кнопки, её обработчик клика и её стили — это одна сущность, которую меняют вместе. SFC собирает связанный код в одном месте: открыл UserCard.vue — и видишь всё про карточку пользователя сразу. Это разделение по компонентам, а не по технологиям.

Три блока компонента

<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
  </div>
</template>

<script setup>
const title = 'Привет, Vue!'
const description = 'Это мой первый компонент.'
</script>

<style scoped>
.card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
</style>

Разбор по блокам

Блок	Назначение
`<template>`	HTML-разметка компонента с привязками `{{ }}` и директивами
`<script setup>`	логика: данные, функции, импорты. `setup` — современный лаконичный синтаксис
`<style scoped>`	стили; `scoped` ограничивает их этим компонентом

Что такое scoped-стили

Слово scoped в теге <style> делает стили локальными: класс .card из этого файла не «протечёт» на карточки в других компонентах. Vue добавляет к элементам специальный атрибут и подмешивает его в селекторы — поэтому одинаковые имена классов в разных компонентах не конфликтуют. Это спасает большие проекты от хаоса глобального CSS.

Интерполяция {{ }}

Двойные фигурные скобки в шаблоне называются интерполяцией (или «усами»). Внутрь можно поставить любое JavaScript-выражение — Vue вычислит его и подставит результат как текст:

<template>
  <p>{{ title }}</p>
  <p>{{ 2 + 2 }}</p>
  <p>{{ title.toUpperCase() }}</p>
</template>

Важно: внутри {{ }} допустимо только выражение (то, что возвращает значение), но не инструкции вроде if или цикла — для этого есть директивы, о которых речь в следующем разделе.

Итог

SFC — файл .vue из трёх блоков: template, script, style.
Это разделение по компонентам, а не по технологиям: всё про одну сущность в одном файле.
scoped делает стили локальными и защищает от конфликтов имён классов.
Интерполяция {{ }} вставляет результат JS-выражения в текст шаблона.