Skip to content

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

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