Úvod do frameworku Vue.js

Vue.js řeší elegantně většinu problémů, s kterými se při vývoji webové aplikace potkáte. Než si přímo řekneme, co Vue.js je, je důležité znát historický kontext.

Historie

V posledních 10 letech byly webové stránky skládány ze stovek statických HTML souborů se špetkou ručně psaného javascriptu, který se občas obohatil o jQuery.

Každá stránka měla svůj vlastní javascript a neexistoval jednoduchý způsob, jak aplikaci spravovat jako celek, protože většina kódu byla globální a elementy se ovládaly přes globální selektory podle ID a podobně. Určitě to znáte ze své vlastní praxe.

Důsledek byl ten, že stovky řádků javascriptu v samostatných souborech různě "magicky" propojovaly tisíce řádků HTML, který se mohl různě vygenerovat.

Při tomto přístupu k vývoji neexistuje formální organizace aplikace. Jedná se tedy o velký nepořádek.

Toto je důvod, proč se mnoho vývojářů rozhodne použít některý z frameworků, jako je například Angular, React nebo Vue.js, kterému je věnován celý tento web.

Co je Vue.js

Vue.js je velmi přístupný, univerzální a výkonný framework, který Vám pomůže vyvíjet jednoduše udržovatelné aplikace s možností automatického testování.

Vue.js je progresivní framework, což znamená, že můžeme aplikaci rozdělit na části a ty vyvíjet nezávisle. Pokud například chcete ve vašem současném webu použít Vue, nemusíte hned přepisovat všechny stránky, ale je možné postupně vytvářet jednotlivé komponenty a ty nasazovat postupně. Vue vás neváže do hotového ekosystému, jako to dělá například React. Konkrétní postupy si ukážeme dále.

Pokud chcete celou aplikaci vyyvíjet jen a pouze v jednom frameworku, Vue obsahuje celý ekosystém (jádro, Vuex, Vue-router, Vue CLI a další).

Jak vypadá webová stránka/aplikace pohledem Vue.js?

Paradigma Vue.js říká, že se stránka skládá z mnoha samostatných komponent, které lze různě kombinovat.

Například:

<ui-header>
Hlavička a navigace
<product-image>
Obrázek produktu
<product-description>
Popis produktu a ovládací prvky
<related-products>
Související produkty

Každá komponenta funguje nezávisle a nese si vlastní HTML, CSS a javascript, díky čemuž může být vložena kamkoli a vždy se správně vykreslí.

Stránky se od teď již nebudou skládat z HTML prvků, ale ze skupiny komponent. Stránky proto definují pouze grafickou hierarchii komponent, ne jejich vzhled a chování. Díky tomu se stává aplikace jednoduše znovu-použitelnou a lze velmi rychle budovat.

Příklad jednoduché aplikace a první pokus

Abyste mohli začít s Vue, nepotřebujete prakticky nic. Dokonce ani nemusíme nic instalovat.

Pro první pokus stačí načíst zdrojový kód knihovny z CDN serveru a začít vyvíjet.

Například takto:

<div id="app">
  {{ message }}
</div>

A na konec stránky umístíme javascript:

<script src="https://unpkg.com/vue"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

Podrobné vysvětlení:

Zápis <script src="https://unpkg.com/vue"></script> znamená, že se načte externí javascriptový soubor https://unpkg.com/vue, ve kterém je uložena celá knihovna Vue.js. Pro začátek to usnadní hodně práce, protože nemusíme nic instalovat.

Abychom Vue "aktivovali", je potřeba vytvořit novou instanci frameworku, což uděláme zápisem const app = new Vue({ ... });. Zároveň jsme si celou aplikaci uložili do konstanty, abychom ji mohli ovládat i z konzole prohlížeče, což se nám bude v budoucnosti hodit.

Zápis celé naší aplikace i všech Vue komponent se vkládá jako javascriptový objekt přímo do instance Vue (to jsou ty složené závorky). Tímto je zajištěna jednotnost syntaxe a její pořádek. Ve skutečnosti je Vue jeden velký objekt, který manipuluje se stránkou.

Aby se Vue.js dozvědělo, jakou část HTML stránky má spravovat (tímto přístupem je možné aplikaci postupně přepisovat), v property el definujeme ID elementu ve fyzicky vygenerované HTML šabloně. Zápis je stejný jako v CSS selektoru. V našem případě to je el: '#app', což znamená, že tato instance Vue bude spravovat HTML element s id="app".

V rámci instance Vue můžeme uvést spoustu dalších parametrů, například uložit tzv. stavovou proměnnou, která obsahuje data pro obsluhu aplikace. V našem případě jsme uložili proměnnou message s hodnotou řetězce Hello Vue!. Kdykoli pak v HTML šabloně uvedeme zápis {{ message }}, bude vypsána hodnota z datového uložiště. Jako data můžeme použít jakýkoli validní json, nebo je definovat ručně.

Reaktivní Vue.js

Vue je reaktivní, což znamená, že se při každé změně dat provede i přerenderování šablony. Pokud například změníme hodnotu proměnné message a vložíme jinou zprávu, aplikace na to bude reagovat změnou stavu.

Vyzkoušejte si to hned teď.

{{ message }}

Psaní dosazení do proměnné:

Po změně hodnoty se překreslí šablona ihned:

Další kroky

Nyní už víte, jak Vue.js nainstalovat a začlenit do aplikace.

Další články řeší konkrétní postupy, návody a vysvětlují syntaxi jazyka. Jak uvidíte sami, použití Vue je snadné a velmi elegantní.