Představení ​

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

Co je 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 s orientací 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í Rendering: Vue rozšiřuje standardní HTML o tzv. template syntaxi, což umožňuje deklarativně popisovat HTML výstup založený na JavaScriptových proměnných.

• Reaktivita: Vue autmaticky sleduje změny stavu JavaScriptových 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 navrženo s přihlédnutím k tomu tak, aby bylo flexibilní a přírůstkově adaptibilní. V závislosti na vašich potřebách, Vue může být používáno různými způsoby:

• Obohacení statických HTML bez build fáze
• Webová komponenta vložená do jakékoliv 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ás tyto koncepty odrazují, nebojte se! Tento tutorial 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ě je základní znalost o fungování Vue sdílená napříč všemi způsoby použití. I pokud jste nyní pouze začátečník, znalosti zde získané 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 framework, 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ě build-tool-enabled Vue projektech používáme Vue komponenty v HTML-like souborovém formátu nazývaném Single-File Component (také známé jako *.vue soubory, zkráceně SFC). Vue SFC, jak název napovídá, obaluje logiku (JavaScript), šablonu (HTML) a styly (CSS) do jednoho souboru. 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++">Count is: {{ 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 váš případ použití zahrnuje build fázi. Více o tématu jak a proč na SFC v k tomu určené sekci - prozatím je potřeba vědět, že Vue zvládne veškeré nastavení build nástrojů za vás.

API styly ​

Vue komponenty lze tvořit ve dvou odlišných API stylech: Options API a Composition API.

Options API ​

S Options API definujeme logiku komponent jako objekt s vlastnostmi jako jsou data, methods, and mounted. Definované vlastnosti jsou přístupné přes this uvnitř funkcí, které odkazují na instanci komponenty:

<script>
export default {
  // vlastnosti 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í compile-time transformací, 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é plně pokrýt běžné případy užití. Jsou to různá rozhranní 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 class-based mentální model z Objektovně Orientovaných Programovacích jazyků. 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 vlastností.

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 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 jeho 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 Composition API FAQ.

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í. Znovu, 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 Components pokud plánujete vytvořit celou aplikaci ve Vue.

V průběhu vašeho učení se nemusíte upsat jednomu stylu. Zbytek dokumentace poskytuje příklady kódu pro oba styly tam, kde to je možné, a můžete mezi nimi kdykoliv 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.

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čkoliv doporučujeme postupně projít všechen obsah, pokud je to možné!