Vue.js

Vue.js (bežne označovaný ako Vue ; vyslovované ako „Vue“ ) je open-source model-view-viewmodel frontend JavaScript framework na vytváranie používateľských rozhraní a jednostránkových aplikácií . Vytvoril ho Evan You a udržiava ho on a ostatní členovia aktívneho základného tímu. 
Prehľad.
Vue.js obsahuje postupne prispôsobiteľnú architektúru, ktorá sa zameriava na deklaratívne vykresľovanie a kompozíciu komponentov. Hlavná knižnica je zameraná iba na vrstvu zobrazenia. Pokročilé funkcie potrebné pre zložité aplikácie, ako je smerovanie, správa stavu a nástroje na zostavovanie, sú ponúkané prostredníctvom oficiálne udržiavaných podporných knižníc a balíkov. 
Vue.js umožňuje rozšírenie HTML o HTML atribúty nazývané direktívy. Direktívy ponúkajú funkčnosť HTML aplikáciám a prichádzajú buď ako vstavané, alebo ako užívateľom definované direktívy.
História.
Vue vytvoril Evan You po tom, čo pracoval pre Google pomocou AngularJS v niekoľkých projektoch. Neskôr zhrnul svoje myšlienkové pochody: „Prišiel som na to, čo keby som mohol vytiahnuť časť, ktorá sa mi na Angular skutočne páčila a postaviť niečo, čo zaberá menej priestoru.“ Prvý zdrojový kód bol do projektu "commitnutý" v júli 2013 a Vue bol prvýkrát vydaný nasledujúci február v roku 2014.
Názvy verzií sú často odvodené od mangy a anime, z ktorých väčšina patrí do žánru sci-fi .
Verzie.
Keď je vydaná nová hlavná verzia, napr. v3.yz, posledná menšia, tj 2.xy, sa stane vydaním LTS na 18 mesiacov (opravy chýb a bezpečnostné záplaty) a nasledujúcich 18 mesiacov budú v režime údržby (iba bezpečnostné záplaty). 
Vlastnosti.
Komponenty.
Komponenty Vue rozširujú základné prvky HTML tak, aby zapuzdrili opätovne použiteľný kód. Na vysokej úrovni sú komponenty vlastné prvky, ktorým kompilátor Vue priraďuje správanie. Vo Vue je komponent v podstate inštancia Vue s preddefinovanými možnosťami. Ukážka kódu nižšie obsahuje príklad komponentu Vue. Komponent predstavuje tlačidlo a vypíše počet kliknutí na tlačidlo:
&lt;template&gt;
 &lt;div id="tuto"&gt;
 &lt;button-clicked v-bind:initial-count="0"&gt;&lt;/button-clicked&gt;
 &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
Vue.component('button-clicked', {
 props: ['initialCount'],
 data: () =&gt; ({
 count: 0,
 template: '&lt;button v-on:click="onClick"&gt;Clicked times&lt;/button&gt;',
 computed: {
 countTimesTwo() {
 return this.count * 2;
 },
 watch: {
 count(newValue, oldValue) {
 console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
 },
 methods: {
 onClick() {
 this.count += 1;
 },
 mounted() {
 this.count = this.initialCount;
});
new Vue({
 el: '#tuto',
&lt;/script&gt;
Šablóny.
Vue používa syntax šablóny založený na HTML, ktorá umožňuje naviazať vykreslený DOM na podkladové údaje inštancie Vue. Všetky šablóny Vue majú validný HTML kódy, ktorý môžu analyzovať prehliadače a analyzátory HTML, ktoré sú v súlade so špecifikáciami. Vue kompiluje šablóny do virtuálnych vykresľovacích funkcií DOM . Virtuálny objektový model dokumentu (alebo "DOM") umožňuje Vue vykresliť komponenty vo svojej pamäti pred aktualizáciou prehliadača. V kombinácii so systémom reaktivity dokáže Vue vypočítať minimálny počet komponentov na opätovné vykreslenie a použiť minimálne množstvo DOM manipulácií pri zmene stavu aplikácie.
Používatelia Vue môžu použiť syntax šablóny alebo sa rozhodnúť priamo písať funkcie vykresľovania pomocou hyperscriptu buď prostredníctvom volaní funkcií alebo JSX . Funkcie vykresľovania umožňujú vytvárať aplikácie zo softvérových komponentov . 
Reaktivita.
Vue obsahuje systém reaktivity, ktorý používa jednoduché objekty JavaScriptu a optimalizované opätovné vykresľovanie. Každý komponent počas vykresľovania sleduje svoje reaktívne závislosti, takže systém presne vie, kedy sa má znova vykresliť a ktoré komponenty sa majú znova vykresliť. 
Prechody.
Vue poskytuje množstvo spôsobov, ako aplikovať prechodové efekty pri vkladaní, aktualizácii alebo odstraňovaní položiek z DOM . To zahŕňa nástroje na:
Keď sa vloží alebo odstráni prvok zabalený v prechodovom komponente, stane sa toto:
Smerovanie.
Tradičnou nevýhodou jednostránkových aplikácií (SPA) je nemožnosť zdieľania odkazov na presnú „podstránku“ v rámci konkrétnej webovej stránky. Pretože SPA poskytujú svojim používateľom iba jednu odpoveď zo servera na základe adresy URL (zvyčajne slúži index.html alebo index.vue), vytváranie záložiek na určitých obrazovkách alebo zdieľanie odkazov na konkrétne sekcie je zvyčajne ťažké, ak nie nemožné. Na vyriešenie tohto problému mnohé smerovače na strane klienta vymedzujú svoje dynamické adresy URL znakom hashbang (#!), napr ". page.com/#!" "/" . S HTML5 však väčšina moderných prehliadačov podporuje smerovanie bez hashbangov.
Vue poskytuje rozhranie na zmenu toho, čo sa zobrazuje na stránke na základe aktuálnej cesty URL – bez ohľadu na to, ako bola zmenená (či už prostredníctvom e-mailového odkazu, obnovenia alebo odkazov na stránke). Okrem toho použitie front-end smerovača umožňuje zámerný prechod cesty prehliadača, keď sa určité udalosti prehliadača (tj kliknutia) vyskytnú na tlačidlách alebo odkazoch. Samotný Vue neprichádza s frontendovým hashovaným smerovaním. Ale open-source balík „vue-router“ poskytuje API na aktualizáciu adresy URL aplikácie, podporuje tlačidlo späť (história navigácie) a obnovenie hesla e-mailu alebo odkazy na overenie e-mailu s parametrami adresy URL overenia. Podporuje mapovanie vnorených trás na vnorené komponenty a ponúka podrobné riadenie prechodov. S Vue vývojári už skladajú aplikácie s malými stavebnými blokmi, ktoré vytvárajú väčšie komponenty. S pridaným vue-routerom do mixu musia byť komponenty namapované iba na cesty, do ktorých patria, a rodičovské/rootové cesty musia indikovať, kde sa majú deti vykresliť. 
&lt;div id="app"&gt;
 &lt;router-view&gt;&lt;/router-view&gt;
&lt;/div&gt;
&lt;script&gt;
const User = {
 template: '&lt;div&gt;User &lt;/div&gt;'
const router = new VueRouter({
 routes: [
});
&lt;/script&gt;
Vyššie uvedený kód:
&lt;div id="app"&gt;
 &lt;div&gt;
 &lt;div&gt;User 1&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
Ekosystém.
Základná knižnica sa dodáva s nástrojmi a knižnicami, ktoré vyvinul hlavný tím a prispievatelia.