Úvod ​

Naučte se Vue s video-tutoriály na VueMastery.com

Co je to Vue? ​

Vue (výslovnost /vjú/) je JavaScriptový framework pro tvorbu uživatelského rozhraní. Je postaven na standardech HTML, CSS a JavaScriptu a poskytuje deklaratorní programovací model orientovaný na komponenty, který pomáhá efektivně vyvíjet jednoduchá i složitá UI.

Zde je minimální příklad:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Počet: {{ count }}
  </button>
</div>

Výsledek

Výše uvedený příklad ukazuje dva klíčové principy Vue:

• Deklarativní vykreslování: Vue rozšiřuje standardní HTML o tzv. template syntaxi, což umožňuje deklarativně popisovat HTML výstup založený na JavaScript proměnných.

• Reaktivita: Vue autmaticky sleduje změny stavu JavaScript proměnných a efektivně aktualizuje DOM zobrazené stránky, když dojde ke změně.

Pokud k tomu už teď máte otázky - žádný strach. Ve zbytku dokumentace pokryjeme každý jednotilvý detail. Prozatím prosím pokračujte ve čtení, ať získáte obecné povědomí o tom, co Vue nabízí.

Progresivní framework ​

Vue je framework a ekosystém, který pokrývá většinu z běžných potřeb frontendového vývoje. Ale internet je extrémě různorodý - věci, které na webových stránkách tvoříme se mohou dramaticky lišit ve formě i objemu. Vue bylo s přihlédnutím k tomu navrženo tak, aby bylo flexibilní a přírůstkově adaptibilní. V závislosti na vašich potřebách, může být Vue používáno různými způsoby:

• Obohacení statických HTML bez build fáze
• Webová komponenta (Web Component) vložená do jakékoli stránky
• Single-Page Application (SPA)
• Fullstack / Server-Side Rendering (SSR)
• Jamstack / Static Site Generation (SSG)
• Použitelné pro desktop, mobilní zařízení, WebGL a dokonce i terminál

Pokud vám tyto pojmy přijdou strašidelné, nebojte se! Tento tutoriál a průvodce vyžaduje pouze základní znalost HTML a JavaScriptu a nemusíte být odborník na žádnou z výše uvedných oblastí.

Pokud jste zkušený vývojář, kterého zajímá, jak nejlépe zapracovat Vue do svého portfolia, nebo jste zvědaví co tyto pojmy znamenají, rozebíráme je více podrobně ve Způsobech použití Vue.

Navzdory flexibilitě jsou základní znalosti o fungování Vue sdílené napříč všemi způsoby použití. I pokud jste nyní pouze začátečník, znalosti získané zde vám budou užitečné na další cestě při zdolávání více ambiciózních cílů v budoucnosti. Pokud už jste veterán, můžete si vybrat optimální zůsob využití Vue podle toho, jaké problémy se právě snažíte řešit, a přitom si zachovat stejnou úroveň produktivity. Proto nazýváme Vue "Progresivní Framework": je to technologie, která může růst spolu s vámi a přizpůsobovat se vašim potřebám.

Single-File komponenty ​

Ve většině Vue projektů s build fází používáme Vue komponenty v souborovém formátu á la HTML nazývaném Single-File Component (také známé jako *.vue soubory, zkráceně SFC). Vue SFC, jak název napovídá, obaluje do jednoho souboru logiku (JavaScript), šablonu (HTML) a styly (CSS). Zde je přechozí příklad přepsaný do SFC formátu:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Počet: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Počet: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC je určující vlastnost Vue a je to doporučený postup jak tvořit Vue komponenty, pokud vaše použití zahrnuje build fázi. Více o tématu jak a proč na SFC najdete v příslušné kapitole - prozatím je potřeba vědět, že Vue za vás zvládne veškeré nastavení build nástrojů.

API styly ​

Vue komponenty lze tvořit dvěma odlišnými API styly: Options API a Composition API.

Options API ​

S Options API definujeme logiku komponent jako objekt s možnostmi (options) jako jsou data, methods, and mounted. Definované možnosti jsou přístupné přes this uvnitř funkcí, které odkazují na instanci komponenty:

<script>
export default {
  // možnosti vrácené z data() budou mít reaktivní stav
  // a budou přístupné přes `this`
  data() {
    return {
      pocet: 0
    }
  },

  // funkce, které mění stav a spouští aktualizace
  // mohou být navázány jako 'event listener' v šablonách
  methods: {
    increment() {
      this.pocet++
    }
  },

  // tzv. 'lifecycle hooks' jsou volané v různých stavech
  // životního cyklu komponenty
  // Tato funkce se za volá ve chvíli připojení (mount) komponenty do DOM
  mounted() {
    console.log(`Výchozí počet je ${this.pocet}.`)
  }
}
</script>

<template>
  <button @click="increment">Počet: {{ pocet }}</button>
</template>

Vyzkoušejte si to

Composition API ​

S Composition API definujeme komponentu importem API funkcí. V SFC souborech se Compostion API typicky používá spolu se <script setup>. Atritbut setup je příznak pro Vue k použití transformací během kompilace, které umožňují použití Composition API s menším množstvím boilerplate kódu. Například importy a proměnné/funkce nejvyšší úrovně deklarované uvnitř <script setup> mohou být přímo použity v šabloně.

Zde je ta samá komponenta, s úplně stejnou šablonou, ale s použitím Composition API a <script setup>:

<script setup>
import { ref, onMounted } from 'vue'

// reaktivní stav
const pocet = ref(0)

// funkce, která mění stav a spouští aktualizace
function increment() {
  pocet.value++
}

// 'lifecycle hook'
onMounted(() => {
  console.log(`Výchozí počet je ${pocet.value}.`)
})
</script>

<template>
  <button @click="increment">Počet: {{ pocet }}</button>
</template>

Vyzkoušejte si to

Co si vybrat? ​

Oba API styly jsou schopné běžné případy užití plně pokrýt. Jsou to různá rozhraní nad stejným systémem v pozadí. Options API je vlastně implementováno nad Composition API! Základní koncepty a znalosti o Vue jsou sdíleny nad oběma styly.

Options API se zaměřuje na koncept "instance komponenty" (this jak je vidět v příkladu), což je typicky bližší uživatelům zvyklým na mentální model založený na třídách z objektovně orientovaných programovacích jazyků (OOP). Je také lépe přístupnější začátečníkům tím, že abstrahuje detaily o reaktivitě a vynucuje organizaci kódu přes skupiny možností.

Composition API je zaměřeno na deklarování reaktivních proměnných přímo ve funkčním rámci a skládáním stavu dohromady z různých funkcí tak, aby bylo možné zvládnout jejich komplexitu. Je to volnější forma a vyžaduje porozumění, jak funguje reaktivita ve Vue, aby bylo možné ji používat efektivně. Výměnou za to její flexibilita umožňuje silnější vzory pro organizaci a znovupoužití logiky.

Více o porovnání těchto dvou stylů a potenciálních přínosech Composition API si můžete přečíst v FAQ o Composition API.

Pokud jste ve Vue nováčky, zde je naše základní doporučení:

• Pro učení zvolte styl, který vám připadá jednodušší na pochopení. Opakujeme, že většina klíčových konceptů je sdílena mezi oběma styly. Vždy si můžete později zvolit druhý styl.

• Pro produkci:

  • Zvote Options API, pokud nepoužíváte build nástroje, nebo máte v plánu Vue použít primárně pro méně složité scénáře, např. progresivní vylepšení.

  • Zvolte Composition API + Single-File komponenty (SFC), pokud plánujete ve Vue vytvořit celou aplikaci.

V průběhu vašeho učení se nemusíte upsat jednomu stylu. Zbytek dokumentace poskytuje tam, kde to je možné, příklady kódu pro oba styly, a můžete mezi nimi kdykoli přemínat pomocí přepínače API preference nahoře ve sloupci levého menu.

Máte další otázky? ​

Podívejte se na FAQ - často kladené dotazy.

Vyberte si další cestu ​

Různí vývojáři mají různé způsoby učení. Vyberte si způsob, který vyhovuje vašim preferencím - ačkoli, pokud je to možné, doporučujeme postupně projít všechen obsah!