Однофайловые компоненты

Однофайловый компонент (Single-File Component, SFC) — файл с расширением .vue, в котором собрано всё, что нужно одной части интерфейса: разметка, код на JavaScript и стили. Vite превращает такой файл в обычный модуль JavaScript.

Три блока

Замените src/App.vue:

<!-- src/App.vue -->
<script setup>
const title = 'Мои задачи'
</script>
 
<template>
  <h1>{{ title }}</h1>
</template>
 
<style>
h1 {
  color: #42b883;
}
</style>

На странице http://localhost:5173 появится зелёный заголовок «Мои задачи». Текст взят из переменной title.

Порядок блоков не важен, но принято писать скрипт первым: так видно, какие данные использует шаблон.

Блок script setup

Код внутри <script setup> выполняется для каждого экземпляра компонента. Всё, что объявлено на верхнем уровне блока, — переменные, функции, импортированные значения — сразу доступно в шаблоне. Писать export или возвращать что-то не нужно.

<script setup>
const owner = 'Анна'
 
function greet() {
  return `Привет, ${owner}!`
}
</script>
 
<template>
  <p>{{ greet() }}</p>
</template>

На странице появится «Привет, Анна!»: шаблон вызвал функцию, объявленную в скрипте.

Блок style scoped

Обычный блок style действует на всю страницу. Атрибут scoped ограничивает стили текущим компонентом:

<style scoped>
h1 {
  font-size: 32px;
}
</style>

Vue добавит элементам компонента особый атрибут вида data-v-7a7a37b1 и допишет его к селекторам. Заголовки h1 в других компонентах не изменятся.

Имя файла

Файлы компонентов называют в стиле PascalCase — каждое слово с заглавной буквы, минимум два слова: TodoItem.vue, TodoForm.vue. Исключение — корневой App.vue. Два слова нужны, чтобы имя не совпало с существующим тегом HTML вроде header или button.

Частая ошибка

Шаблон видит только то, что объявлено в <script setup>. Если написать обычный блок <script> без слова setup, переменные из него в шаблон не попадут, и Vue выведет в консоль предупреждение вида Property "title" was accessed during render but is not defined. Проверьте, что у тега скрипта есть атрибут setup.