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.

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.

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

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.

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

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.

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

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