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.

Vue.js
Logo
Základné informácie
Vývojár	Evan You
Posledná stabilná verzia	február 2014
Posledná aktuálna verzia	(11. november 2022)
Operačný systém	Cross-platform
Lokalizácia	JavaScript, TypeScript
Licencia	MIT licencia
Ďalšie odkazy
Webová stránka	vuejs.org
Commons	Vue.js
Pozri aj Informačný portál

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

Verzia	Dátum vydania	Názov	Koniec LTS	Koniec života
3.2	5. august 2021	Quintessential Quintuplets
3.1	7. jún 2021	Pluto
3.0	18. september 2020	One Piece
2.7	1. júl 2022	Naruto	31. December 2023	31. December 2023
2.6	4. február 2019	Macross	18. Marec 2022	18. September 2023
2.5	13. október 2017	Level E
2.4	13. júl 2017	Kill la Kill
2.3	27. apríl 2017	JoJo's Bizarre Adventure
2.2	26. február 2017	Initial D
2.1	22. november 2016	Hunter X Hunter
2.0	30. september 2016	Ghost in the Shell
1,0	27. október 2015	Evangelion
0,12	12. jún 2015	Dragon Ball
0,11	7. november 2014	Cowboy Bebop
0,10	23. marec 2014	Blade Runner
0,9	25. mebruár 2014	Animatrix
0,8	27. január 2014	—
0,7	24. december 2013	—
0,6	8. december 2013	VueJS

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:

1. 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.
2. Ak komponent prechodu poskytoval volania JavaScriptu, tieto volania sa vykonajú vo vhodnom načasovaní.
3. 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:

1. Nastaví front-end cestu na websitename.com/user/<id> .
2. Toto nastavenie vykreslí obsah v komponente User definovaný v (const User. . . )
3. 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 .
4. Táto šablóna (líši sa podľa parametrov odovzdaných smerovaču) bude vykreslená do <router-view></router-view> v div#app modelu DOM.
5. 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

Pozri aj

• React (webový framework)
• AngularJS
• JavaScript

Externé odkazy

• Oficiálny web