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í.

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.

• 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.

Prohlížeč souboru .vue nerozumí. Proto je potřeba nástroj (např. 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.

<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>

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.

Zpět na Vue.js