====== SFC (Single-File Component) ======

Tradiční webový vývoj odděluje HTML, CSS a JS do různých souborů. **SFC** tento přístup mění a seskupuje vše, co spolu logicky souvisí, na jedno místo. To zlepšuje přehlednost a usnadňuje údržbu rozsáhlých aplikací.



===== 1. Struktura .vue souboru =====

SFC se skládá ze tří hlavních bloků:

  * **<template>:** Obsahuje HTML strukturu komponenty. Vue zde používá deklarativní syntaxi (např. ''{{ text }}'' pro výpis proměnné).
  * **<script>:** Obsahuje logiku komponenty v JavaScriptu (nebo TypeScriptu). Zde se definují data, metody a importují další komponenty.
  * **<style>:** Obsahuje CSS pravidla pro danou komponentu.

===== 2. Klíčové výhody SFC =====

  * **Lokalizace (Scoped CSS):** Pomocí atributu ''<style scoped>'' můžete zajistit, že se styly aplikují **pouze na tuto konkrétní komponentu**. Už se nemusíte bát, že změna barvy tlačítka v menu rozbije tlačítka v patičce webu.
  * **Lepší organizace:** Při hledání chyby v konkrétním prvku (např. v nákupním košíku) nemusíte přepínat mezi třemi různými soubory. Vše je v jednom souboru ''Kosik.vue''.
  * **Podpora moderních nástrojů:** Vývojová prostředí (IDE) díky SFC nabízejí skvělé doplňování kódu, kontrolu chyb a zvýraznění syntaxe pro všechny tři jazyky v jednom okně.
  * **Předkompilace:** Během sestavování aplikace (buildu) se SFC přeloží do vysoce optimalizovaného JavaScriptu, což zvyšuje výkon v prohlížeči.

===== 3. Jak to funguje pod kapotou? =====

Prohlížeč souboru ''.vue'' nerozumí. Proto je potřeba nástroj (např. [[it_encyklopedie:vite|Vite]] nebo Webpack), který:
  1. Rozebere SFC soubor na jeho části.
  2. Zkompiluje HTML šablonu do efektivních renderovacích funkcí.
  3. Zpracuje CSS (např. přidá unikátní ID pro scoped styly).
  4. Vše spojí do jednoho JavaScriptového balíčku.



===== 4. Srovnání přístupů =====

^ Metoda ^ Organizace ^ Rozsah stylů ^
| **Tradiční (HTML/CSS/JS)** | Oddělené soubory | Globální (riziko kolizí) |
| **React (JSX)** | Vše v JS (CSS často externě) | Často vyžaduje knihovny (CSS-in-JS) |
| **Vue SFC** | Bloky v jednom souboru | Vestavěný "Scoped" mechanismus |

===== 5. Ukázka SFC v praxi =====

<code>
<template>
  <div class="karta">
    <h1>{{ nadpis }}</h1>
    <button @click="upozorni">Klikni</button>
  </div>
</template>

<script setup>
  const nadpis = "Vítejte v IT encyklopedii"
  const upozorni = () => alert("Ahoj!")
</script>

<style scoped>
  .karta { border: 1px solid silver; padding: 20px; }
  h1 { color: #42b983; }
</style>
</code>

> **Zajímavost:** Ačkoliv jsou SFC spojovány hlavně s Vue, velmi podobný koncept využívá i framework **Svelte**, který jde ještě dál – v souboru ''.svelte'' píšete kód, který se téměř neliší od standardního HTML, ale výsledkem je extrémně rychlá aplikace bez nutnosti virtuálního DOMu.

[[it_encyklopedie:vue|Zpět na Vue.js]]