Části souboru .vue

Soubor .vue má až tři části, každou ve vlastním prvku. Tady je App.vue se všemi třemi:

<script setup>
const kavarna = "Kavárna Na Rohu";
</script>

<template>
    <h1>{{ kavarna }}</h1>
    <p class="hodiny">Otevřeno od 7:00 do 19:00</p>
</template>

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

• <script setup> je JavaScript komponenty: její proměnné a funkce. Spustí se, když se komponenta vytváří, ještě než ji Vue ukáže.
• <template> je šablona, HTML, které říká, co komponenta ukazuje. Může používat, co je ve skriptu: {{ kavarna }} ukáže proměnnou kavarna. Víc o tom v dalším cvičení.
• <style scoped> je CSS, zapsané stejně jako v souboru se styly. scoped (v překladu „s omezeným rozsahem“) znamená, že pravidla platí jen pro prvky této komponenty: pravidlo .hodiny tady nezmění prvky s třídou hodiny v jiných komponentách. Styly pro celou aplikaci patří do style.css.

Žádná část není povinná: App.vue v minulém cvičení měl jen šablonu. V tomto kurzu jsou části vždy v tomhle pořadí a mezi nimi je prázdný řádek, jak je to ve většině projektů ve Vue.

Starší návody často píšou komponenty jinak, s export default { data() { … }, methods: { … } } v obyčejném <script>. Tomu se říká Options API a takhle se komponenty psaly, než přišel <script setup>. Pořád to funguje, ale tento kurz používá <script setup>, stejně jako nové projekty ve Vue. Když v návodu uvidíte data(), je to pořád Vue, jen je komponenta napsaná postaru.