Vue.js
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[1] |
Ďalšie odkazy | |
Webová stránka | vuejs.org |
Commons | Vue.js |
|
Vue.js (bežne označovaný ako Vue ; vyslovované ako „Vue“ [2] ) 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. [3]
Prehľad
[upraviť | upraviť zdroj]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. [2] 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. [4]
Vue.js umožňuje rozšírenie HTML o HTML atribúty nazývané direktívy. [5] 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
[upraviť | upraviť zdroj]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.“ [6] 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
[upraviť | upraviť zdroj]Verzia | Dátum vydania | Názov | Koniec LTS | Koniec života |
---|---|---|---|---|
3.2 | 5. august 2021 | Quintessential Quintuplets[7] | ||
3.1 | 7. jún 2021 | Pluto [8] | ||
3.0 | 18. september 2020 | One Piece[9] | ||
2.7 | 1. júl 2022 | Naruto [10] | 31. December 2023 | 31. December 2023 |
2.6 | 4. február 2019 | Macross [11] | 18. Marec 2022 | 18. September 2023 |
2.5 | 13. október 2017 | Level E [12] | ||
2.4 | 13. júl 2017 | Kill la Kill [13] | ||
2.3 | 27. apríl 2017 | JoJo's Bizarre Adventure [14] | ||
2.2 | 26. február 2017 | Initial D [15] | ||
2.1 | 22. november 2016 | Hunter X Hunter [16] | ||
2.0 | 30. september 2016 | Ghost in the Shell [17] | ||
1,0 | 27. október 2015 | Evangelion [18] | ||
0,12 | 12. jún 2015 | Dragon Ball [19] | ||
0,11 | 7. november 2014 | Cowboy Bebop [20] | ||
0,10 | 23. marec 2014 | Blade Runner [21] | ||
0,9 | 25. mebruár 2014 | Animatrix [22] | ||
0,8 | 27. január 2014 | — | ||
0,7 | 24. december 2013 | — | ||
0,6 | 8. december 2013 | VueJS [23] |
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). [24]
Vlastnosti
[upraviť | upraviť zdroj]Komponenty
[upraviť | upraviť zdroj]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. [25] 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
[upraviť | upraviť zdroj]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 . [26] Funkcie vykresľovania umožňujú vytvárať aplikácie zo softvérových komponentov . [27]
Reaktivita
[upraviť | upraviť zdroj]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ť. [28]
Prechody
[upraviť | upraviť zdroj]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. [29] [30]
Smerovanie
[upraviť | upraviť zdroj]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ť. [31]
<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
<router-view></router-view>
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
[upraviť | upraviť zdroj]Základná knižnica sa dodáva s nástrojmi a knižnicami, ktoré vyvinul hlavný tím a prispievatelia.
Oficiálne nástroje
[upraviť | upraviť zdroj]- 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
[upraviť | upraviť zdroj]- 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
[upraviť | upraviť zdroj]- ↑ vue/LICENSE [online]. . Dostupné online.
- ↑ a b . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ Evan You. Between the Wires, November 3, 2016. Dostupné online [cit. 2017-08-26]. (po anglicky)
- ↑ v3.2.0 Quintessential Quintuplets [online]. August 5, 2021. Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ v3.0.0 One Piece [online]. September 18, 2020. Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online.
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ . Dostupné online. (po anglicky)
- ↑ Archivovaná kópia [online]. [Cit. 2022-12-25]. Dostupné online. Archivované 2017-05-08 z originálu.