Specifikace syntaxe SFC ​

Přehled ​

Vue Single-File komponenta (SFC), dle konvence označována příponou *.vue, je proprietární formát souboru, který používá syntaxi podobnou HTML k popisu Vue komponent. Vue SFC je syntakticky kompatibilní s HTML.

Každý soubor *.vue se skládá ze tří typů bloků nejvyšší úrovně: <template>, <script> a <style>, a volitelně dalších vlastních bloků:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Ahoj, Vue!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  Toto může být například dokumentace komponenty.
</custom1>

Jazykové bloky ​

<template> ​

• Každý soubor *.vue může obsahovat maximálně jeden blok <template> nejvyšší úrovně.

• Obsah bude extrahován a předán do @vue/compiler-dom, předkompilován do JavaScriptových funkcí pro vykreslování a připojen k exportované komponentě jako její možnost (option) render.

<script> ​

• Každý soubor *.vue může obsahovat maximálně jeden blok <script> (s výjimkou <script setup>).

• Skript je spuštěn jako ES modul.

• Default export by měl být objekt s možnostmi Vue komponenty, buď jako prostý objekt nebo jako návratová hodnota funkce defineComponent.

<script setup> ​

• Každý soubor *.vue může obsahovat maximálně jeden blok <script setup> (s výjimkou normálního <script>).

• Skript je předzpracován a používán jako setup() funkce komponenty, což znamená, že bude spuštěn pro každou instanci komponenty. Hlavní (top-level) vazby uvnitř <script setup> jsou automaticky vystaveny šabloně. Pro více informací se podívejte na samostatnou dokumentaci pro <script setup>.

<style> ​

• Každý soubor *.vue může obsahovat více bloků <style>.

• Element <style> může mít atributy scoped nebo module (podrobnosti naleznete na stránce CSS funkce pro SFC), které pomáhají zapouzdřit styly do aktuální komponenty. V jedné komponentě mohou být smíchány různé značky <style> s různými režimy zapouzdření.

Vlastní bloky ​

Do souboru *.vue můžete navíc přidat další vlastní bloky pro potřeby konkrétního projektu, například blok <docs>. Některé příklady vlastních bloků z reálného světa zahrnují:

• Gridsome: <page-query>
• vite-plugin-vue-gql: <gql>
• vue-i18n: <i18n>

Zpracování vlastních bloků závisí na nástrojích. Pokud chcete vytvořit vlastní integrace, podívejte se pro další informace na sekci Nástroje pro integraci vlastních SFC bloků.

Automatické odvození názvu ​

SFC v následujících případech automaticky odvozuje název komponenty z jejího názvu souboru:

• Formátování varování pro vývojáře
• Inspekce v DevTools
• Rekurzivní odkaz na sebe sama, například soubor pojmenovaný FooBar.vue se může ve své šabloně odkazovat sám na sebe jako <FooBar/>. Toto má nižší prioritu než explicitně registrované/importované komponenty.

Pre-Procesory ​

Bloky mohou pomocí atributu lang deklarovat programovací jazyk, v němž má proběhnout pre-processing. Nejběžnější případ je použití TypeScriptu pro blok <script>:

<script lang="ts">
  // použití TypeScriptu
</script>

lang lze použít na jakýkoli blok – například můžeme použít <style> se Sass a <template> + Pug:

<template lang="pug">
p {{ msg }}
</template>

<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>

Dejte pozor, že integrace s různými pre-procesory se může lišit podle zvolené sady softwarových nástrojů. Pro příklady se podívejte do příslušné dokumentace:

• Vite
• Vue CLI
• webpack + vue-loader

Importy src ​

Pokud dáváte přednost rozdělení vašich *.vue komponent do více souborů, můžete použít atribut src pro import externího souboru do příslušného bloku jazyka:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

Pozor na to, že pro importy pomocí src platí stejná pravidla pro zadávání cest jako pro požadavky na webpack moduly, což znamená:

• Relativní cesty musí začínat s ./
• Můžete importovat zdroje z npm závislostí:

<!-- import souboru z nainstalovaného npm balíčku "todomvc-app-css" -->
<style src="todomvc-app-css/index.css" />

src importy fungují í s vlastními bloky, např.:

<unit-test src="./unit-test.js">
</unit-test>

Komentáře ​

V každém bloku byste měli používat syntaxi komentářů používanou v daném jazyce (HTML, CSS, JavaScript, Pug atd.). Pro komentáře na nejvyšší úrovni použijte syntaxi HTML komentářů: <!-- obsah komentáře -->