Vue.js je rámec micro JavaScript pro vytváření opakovaně použitelných a reaktivních komponent na vašem webu.

Rámce Front-end se velmi liší jak velikostí, tak rozsahem, kde Vue.js vyniká, je v minimálním designu a zaměřuje se na přizpůsobivost. Máte možnost zvolit si stavbu celého svého webu pomocí Vue.js, jen činit jediný prvek vašeho webu reaktivní, nebo cokoli jiného. Z tohoto důvodu je velmi přístupná s mělkou křivkou učení.

V tomto článku se podíváme na hlavní součásti Vue.js a jak je nastavit a začít, ale nejdříve se podívejme na to, kdy byste chtěli použít front-end framework jako Vue.js a proč .

Proč používat přední rámec

Front-end rámce, stejně jako většina rámců, přicházejí k abstraktním společným úkolům, společnému jmenovateli, který najdete mezi projekty. Vue.js konkrétně přichází k abstrakci procesu vytváření komponent HTML, které jsou dynamicky aktualizovány prostřednictvím jazyka JavaScript.

Několik bolestivých bodů, které Vue.js řeší pro vás, vytváří dynamické HTML, vázá akty elementů HTML na váš rozsah a kontext udržování dat a sleduje, kdy je třeba HTML znovu vykreslit automaticky.

Například řekněme, že máte stránku, kde máte dynamický seznam jmen. Můžete mít napsaný kód, který vypadá takto:

Když vytváříte ručně HTML - kromě skutečnosti, že kód se rychle ztěžuje ve velkých příkladech - není skutečné spojení mezi daty a vygenerovaným kódem HTML. Pokud se změní pole názvů, musíte si toho být vědomi a seznam znovu vykreslen. Toto vše je také pouze pro zobrazení dynamických dat, pokud chcete přidat obslužné rutiny událostí, jako je obsluha kliknutí, aby se zachránil rozsah, budete pokračovat v hnízdění kódu dále a dále:

Pomocí nástroje Vue.js oddělujte HTML jako šablonu, která zobrazuje, co lze vygenerovat na základě daných dat, a Vue.js jej automaticky vykreslí.

Stejný příklad ve verzi Vue.js vypadá takto:

Máme plné oddělení HTML aspektů kódu JavaScriptu od logiky kódu JavaScript, který je vše samo-obsažené a mnohem zvládnutelnější. Dostáváme se trochu před sebou, ujme se krok zpět a podívejme se, jak to jádro Vue.js dosáhne ...

Data Driven DOM

V jádru Vue.js definujete korelaci mezi vaším kódem HTML a některými daty a kdykoli se změní data, bude HTML aktualizován. Způsob, jakým to funguje, je při vytváření instancí komponenty Vue.js, kterou předáte nějakým datům ve formě objektu JavaScript, tento objekt pak modifikuje nahrazení jeho vlastností trackable metodami getter a setter.

Vue.js analyzuje datový objekt při vytváření kódu HTML a zjistí, jaké údaje jste použili k tomu, aby se uvnitř zobrazovaly různé prvky HTML. Tímto způsobem monitoruje změny provedené v datovém objektu a přesně ví, co je třeba aktualizovat a kdy.

S takovou těsnou vazbou mezi daty a pohledem drasticky zjednodušuje vývoj aplikací front-end a minimalizuje chyby v důsledku nesprávného zobrazení. Toto oddělení obav umožňuje soustředit se na logiku své aplikace, aniž byste se museli vypořádat s aktualizací zobrazení vůbec.

Vytvoření první aplikace Vue.js

Instalace pro Vue.js je stejně jednoduchá jako knihovna:

Nyní, jak jsem se zmínil, aplikace Vue.js se skládá z datového objektu a šablony HTML, do které lze vložit data. Takže pro naši první aplikaci vidíme Vue.js v akci body :

Nejprve definujeme a div což bude naše šablona HTML pro naši aplikaci Vue.js. Uvnitř používáme dvojité rámy pro interpolaci dat do HTML.

Uvnitř aktuální aplikace Vue.js jednoduše definujeme data a propojíme div jako prvek aplikace, která se oběma vykresluje a používá jako šablonu. Dále přidáme proměnnou počítání v naší aplikaci jednou za sekundu.

To je vše, co se děje při vytváření aplikace Vue.js, která se otevře ve vašem prohlížeči, uvidíte, že stránka se automaticky aktualizuje vždy, když aktualizujeme datovou vlastnost.

Události a metody

Nyní ve většině aplikací, které DOM reagují na změnu dat, je pouze polovina příběhu, potřebujete také způsob, jak aktualizovat data, Vue.js se postará o to s událostmi a metodami. Metody jsou uložené funkce spuštěné v kontextu aplikace Vue.js.

Aktualizujeme náš příklad čítače, abychom přidali schopnost spustit a zastavit časovač namísto jeho spuštění:

V šabloně HTML jsme přidali tlačítko pro spuštění a zastavení čítače. Abychom toho dosáhli, potřebujeme, aby byl text na tlačítku dynamický a po kliknutí na tlačítko potřebujeme obsluhu události.

Chcete-li deklarovat událost v elementu Vue.js na elementu, předpíšete název všech standardních událostí HTML DOM v-on: , takže mouseover událost stane v-on:mouseover nebo keyup událost stane v-on:keyup . V našem příkladu používáme v-on:click atribut zpracovávat click událost.

Něco, co jste si možná všimli, je, že pro text tlačítka voláme metodu na rozdíl od odkazování na uloženou vlastnost. V mnoha situacích data, která ukládáte, nemusí být nutně ve formátu, který chcete zobrazit na stránce. Metody lze zde použít k zpracování dat a veškerá reaktivita, kterou získáte z vlastností, se použije při použití metod. Pokud se změní podkladová data, šablona se bude odpovídajícím způsobem aktualizovat.

V aplikaci Vue.js nyní máme novou vlastnost, která obsahuje proměnnou časovače a některé metody. The toggle metoda, která je vázána na událost kliknutí tlačítka, kontroluje, zda je nebo nemá timer vlastnost je nastavena, spouštění nebo zastavení časovače resp counterAction metoda se používá k zobrazení správné akce v tlačítku, opět na základě proměnné časovače.

Vzhledem k tomu, že přepínací metoda změní vlastnost časovače a metoda counterAction, která je ve šabloně Vue.js, používá vlastnost časovače, kdykoli se přepne volba šablony, znovu vykreslí text tlačítka.

Je třeba poznamenat, že i když nemáme počáteční hodnotu vlastností časovače , je třeba ji ještě při vytváření aplikace Vue.js deklarovat. Nemáte-li vlastnost deklarovat od začátku, tato vlastnost nebude reagovat a nebude způsobovat, že se HTML změní v renderování.

V našem příkladu se náhled aktualizuje jednou za sekundu, když je spuštěn časovač, a tak jednou za sekundu bude také vyvolána naše metoda counterAction při překreslení tlačítka. Vue.js nám umožňuje optimalizovat to tak, že dojde k ukládání výsledku metody do mezipaměti a pouze k vyvolání metody, pokud se změní základní údaje specificky použité v metodě. To je také užitečné, pokud používáte stejnou vypočítanou vlastnost na více místech na stránce, místo toho, že hodnotu zpracováváte vícenásobně, tím, že do vyrovnávací paměti uložíte hodnotu, můžete snížit spoustu režijních nákladů.

Aktualizujeme příklad tak, abychom zahrnuli vlastnosti uložené v mezipaměti:

Hlavní rozdíl, kromě pro ukládání do mezipaměti, je, že metody pod computed jsou odkazovány jako vlastnosti jako protiklad k metodám, takže v šabloně HTML jsme museli odstranit závorky z counterAction .