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:<template>
  <div id="tuto">
    <button-clicked v-bind:initial-count="0"></button-clicked>
  </div>
</template>

<script>
Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: '<button v-on:click="onClick">Clicked {{ count }} times</button>',
  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',
});
</script>

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

 Automatickú aplikáciu tried pre prechody a animácie v CSS
 Integráciu knižníc animácií CSS tretích strán, ako je napríklad Animate.css
 Použite JavaScriptu na priamu manipuláciu s DOM počas prechodov
 Integráciu JavaScriptových knižníc tretích strán pre animácie, ako je Velocity.js

Keď sa vloží alebo odstráni prvok zabalený v prechodovom komponente, stane sa toto:

 Vue automaticky zistí, či cieľový prvok obsahuje prechody CSS alebo animácie. Ak áno, prechodové triedy CSS budú pridané/odstránené vo vhodnom čase.
 Ak komponent prechodu poskytoval volania JavaScriptu, tieto volania sa vykonajú vo vhodnom načasovaní.
 Ak sa nezistia žiadne prechody/animácie CSS a neposkytnú sa žiadne volania JavaScriptu, operácie DOM na vloženie a/alebo odstránenie sa vykonajú okamžite na ďalšom snímku.

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ť. <div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
};

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});
...
</script>Vyššie uvedený kód:

 Nastaví front-end cestu na websitename.com/user/<id> .
 Toto nastavenie vykreslí obsah v komponente User definovaný v (const User. . . )
 Umožňuje komponentu User odovzdať konkrétne ID používateľa, ktoré bolo zadané do adresy URL pomocou kľúča params objektu $route: $route.params.id .
 Táto šablóna (líši sa podľa parametrov odovzdaných smerovaču) bude vykreslená do <code><router-view></router-view></code> v div#app modelu DOM.
 Nakoniec vygenerovaný kód HTML pre niekoho, kto zadá: websitename.com/user/1 bude:
<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

Ekosystém 
Základná knižnica sa dodáva s nástrojmi a knižnicami, ktoré vyvinul hlavný tím a prispievatelia.

Oficiálne nástroje 
 Devtools – rozšírenie prehliadača devtools na ladenie aplikácií Vue.js
 Vue CLI – štandardné nástroje pre rýchly vývoj vo Vue.js
 Vue Loader – loader webových balíkov, ktorý umožňuje zapisovanie komponentov Vue vo formáte nazývanom Single-File Components (SFC)

Oficiálne knižnice 
 Vue Router – Oficiálny router
 Vuex – centralizované riadenie stavov inšpirované Fluxom
 Vue Server Renderer – vykresľovanie na strane servera
 Pinia – Nové jednoduché riadenie stavov

Referencie

Pozri aj 
 React (webový framework)
 AngularJS
 JavaScript

Externé odkazy 
 

Softvér pod licenciou MIT
JavaScript knižnice