Uživatelské nástroje

Nástroje pro tento web


vue.js

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

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

[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.

Zpět na Architekturu

vue.js.txt · Poslední úprava: autor: admin