Части файла .vue

В файле .vue может быть до трёх частей, каждая в своём элементе. Вот App.vue со всеми тремя:

<script setup>
const cafe = "Кафе «Уголок»";
</script>

<template>
    <h1>{{ cafe }}</h1>
    <p class="hours">Открыто с 7:00 до 19:00</p>
</template>

<style scoped>
.hours {
    color: #2f7d5b;
}
</style>

• <script setup> — это JavaScript компонента: его переменные и функции. Он выполняется при создании компонента, до того как Vue его покажет.
• <template> — шаблон, то есть HTML, который описывает, что показывает компонент. В нём можно использовать то, что есть в скрипте: {{ cafe }} показывает переменную cafe. Подробнее об этом — в следующем упражнении.
• <style scoped> — это CSS, записанный как в обычной таблице стилей. scoped значит, что его правила действуют только на элементы этого компонента: правило .hours здесь не изменит элементы с классом hours в других компонентах. Стили для всего приложения лежат в style.css.

Каждая часть необязательна: в App.vue прошлого упражнения был только шаблон. На этом курсе части всегда идут в таком порядке и разделены пустой строкой, как в большинстве проектов на Vue.

В старых учебниках компоненты часто пишут иначе: export default { data() { … }, methods: { … } } в обычном <script>. Это Options API — способ, которым компоненты Vue писали до появления <script setup>. Он по-прежнему работает, но на этом курсе используется <script setup>, как и в новых проектах на Vue. Если в учебнике встретится data(), это тот же Vue, просто записанный по-старому.