====== Vue.js ======

**Vue** vytvořil v roce 2014 Evan You, bývalý zaměstnanec Google, který chtěl vzít to nejlepší z Angularu (vazba dat) a zkombinovat to s lehkostí a jednoduchostí. Vue se od té doby stalo jedním z nejoblíbenějších frameworků díky své extrémně přívětivé dokumentaci a nízké bariéře vstupu.



===== 1. Klíčové vlastnosti =====

==== Reaktivita ====
Vue automaticky sleduje změny v JavaScriptových objektech a okamžitě aktualizuje odpovídající části HTML. Nemusíte psát kód pro manuální překreslování stránky; stačí změnit data a Vue se postará o zbytek.

==== Single-File Components (SFC) ====
Jednou z největších předností Vue je formát souborů **.vue**. V jednom souboru máte přehledně rozdělenou celou komponentu:
  * **<template>:** HTML struktura.
  * **<script>:** Logika v JavaScriptu.
  * **<style>:** CSS styly (mohou být i "scoped" – platné jen pro tuto komponentu).



==== Virtuální DOM ====
Podobně jako [[it_encyklopedie:react|React]], i Vue využívá virtuální kopii dokumentu pro minimalizaci drahých operací přímo v prohlížeči, což zajišťuje vysoký výkon.

===== 2. Proč zvolit právě Vue? =====

  * **Snadné učení:** Pokud umíte HTML, CSS a základy JS, můžete ve Vue začít programovat během pár hodin.
  * **Flexibilita:** Můžete ho použít jen jako náhradu za [[it_encyklopedie:jquery|jQuery]] na malé části webu, nebo z něj postavit celý systém.
  * **Oficiální nástroje:** Vue tým vyvíjí i klíčové doplňky jako **Vue Router** (pro navigaci) a **Pinia/Vuex** (pro správu stavu), což zaručuje jejich perfektní kompatibilitu.
  * **Vynikající výkon:** Velikost knihovny je velmi malá, což zrychluje načítání stránek.

===== 3. Options API vs. Composition API =====

Vue nabízí dva způsoby, jak psát komponenty:
  * **Options API (tradiční):** Data, metody a vypočtené hodnoty jsou jasně rozděleny do sekcí. Ideální pro začátečníky.
  * **Composition API (moderní):** Představeno ve Vue 3. Umožňuje lepší organizaci kódu u velmi velkých komponent a snadnější znovupoužitelnost logiky.

===== 4. Ukázka kódu (Jednoduchá komponenta) =====

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

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

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

[Image comparison of Vue Options API vs Composition API code organization]

===== 5. Ekosystém a komunita =====

Vue sice nemá za zády giganta jako Meta (React) nebo Google (Angular), ale opírá se o obrovskou komunitu a sponzory.
  * **Nuxt.js:** Framework postavený na Vue pro generování statických webů a server-side rendering (podobně jako Next.js u Reactu).
  * **Vite:** Extrémně rychlý nástroj pro sestavování projektů, který vytvořil autor Vue a který dnes používá i komunita Reactu.

> **Zajímavost:** Název "Vue" je odvozen z francouzského slova pro "pohled" (view), protože se framework zaměřuje právě na vrstvu zobrazení (View layer) v architektuře MVVM.

[[it_encyklopedie:it_architektura_rozcestnik|Zpět na Architekturu]]