Урок 01 · 10 хв

Один файл: template, script, style

Vue-компонент — три блоки в одному `.vue`. Розмітка лишається розміткою.

Single File Component: <template> — HTML з директивами, <script setup> — логіка на Composition API, <style scoped> — стилі лише цього шматка. У шаблоні ти пишеш теги, а не JSX-функцію. Це ближче до HTML, ніж React, і ближче до компонента, ніж «просто файл розмітки».

Каркас

Можна спитати про це правило«Що оголосив у script — видно в template»

scoped не дає стилям витекти в чужий компонент.
Ім'я файлу HelloCard.vue — звичайний компонент. Реєструвати глобально не обов'язково: імпортуй там, де вставляєш.
{{ }} у шаблоні Vue — текст. Атрибут: v-bind:title або коротко :title.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. Навіщо три блоки в .vue?
2. script setup дає шаблону
3. Шаблон Vue — це JSX?