Vue.js
![]() | |
Vývojář | Evan You |
---|---|
První vydání | Únor 2014 |
Aktuální verze | 3.5.0 (1. září 2024) |
Operační systém | multiplatformní software |
Platforma | Cross-platform |
Vyvíjeno v | JavaScript, TypeScript |
Typ softwaru | svobodný software, knihovna, javascriptový framework, webový aplikační framework a javascriptová knihovna |
Licence | Licence_MIT[1] |
Web | vuejs |
Některá data mohou pocházet z datové položky. |
Vue.js (nebo jen Vue; vyslovuje se vjú, podobně jako view ) je open-source progresivní javascriptový framework pro vytváření uživatelských rozhraní.[2] Začlenění do projektů, které používají jiné javascriptové knihovny je s Vue snadné, protože je navržen tak, aby mohl být přijímán postupně. Vue může také fungovat jako webový aplikační framework, na kterém je možné vytvářet pokročilé Single-page aplikace.
Přehled
[editovat | editovat zdroj]Vue.js představuje přírůstkově adaptibilní architekturu, která se zaměřuje na deklarativní renderování a složení komponent. Jádro je zaměřeno pouze na zobrazovací vrstvu.[3] Pokročilé funkce, které jsou potřeba pro komplexní aplikace, jako směrování, řízení stavů a automatizace sestavení, jsou dostupné skrze oficiální podporované knihovny a balíky[4], Nuxt.js jako jedno z nejpopulárnějších řešení.[zdroj?]
Vue.js rozšiřuje HTML pomocí HTML atributů takzvaných direktiv.[5] Direktivy nabízí funkcionality do HTML aplikace. Direktivy jsou zabudované do Vue.js nebo uživatelem definované.
Historie
[editovat | editovat zdroj]Vue bylo vytvořeno panem Evan You poté, co pracoval pro Google, kde používal AngularJS v nesčetně projektech. Později shrnul svůj myšlenkový proces takto: "Došlo mi, co kdybych mohl vzít pouze tu část, kterou mám opravdu rád na Angular a postavit něco opravdu lehkého k uchopení".[6] V červenci 2013 byl odevzdán k projektu první zdrojový kód a Vue byl poprvé uvolněn následující rok v únoru 2014.
Verze
[editovat | editovat zdroj]Verze | Datum vydání | Název |
---|---|---|
3.0 | 2020-09-18 | One Piece [7] |
2.6 | 2019-02-04 | Macross [8] |
2.5 | 2017-10-13 | Level E [9] |
2.4 | 2017-07-13 | Kill la Kill [10] |
2.3 | 2017-04-27 | JoJo's Bizarre Adventure [11] |
2.2 | 2017-02-26 | Initial D [12] |
2.1 | 2016-11-22 | Hunter X Hunter [13] |
2.0 | 2016-09-30 | Ghost in the Shell [14] |
1.0 | 2015-10-27 | Evangelion [15] |
0.12 | 2015-06-12 | Dragon Ball [16] |
0.11 | 2014-11-07 | Cowboy Bebop [17] |
0.10 | 2014-03-23 | Blade Runner [18] |
0.9 | 2014-02-25 | Animatrix [19] |
0.8 | 2014-01-27 | — [20] |
0.7 | 2013-12-24 | — [21] |
0.6 | 2013-12-08 | VueJS [22] |
Funkce
[editovat | editovat zdroj]Komponenty
[editovat | editovat zdroj]Vue komponenty rozšiřují základní HTML prvky do zapouzdřeného znovupoužitelného kódu. Na vysoké úrovni jsou komponenty vlastními prvky, ke kterým Vue kompilátor přiřadí chování. Komponenta ve Vue je vlastně další Vue instance, která má předem dané vlastnosti.[23]
Ukázka kódu níže obsahuje příklad Vue komponenty. Komponenta představuje tlačítko a vytiskne do konzole, kolikrát bylo tlačítko zmáčknuto:
<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>
Šablony
[editovat | editovat zdroj]Vue používá šablony založené na HTML syntaxi, která dovoluje párovat renderovaný DOM s daty ve Vue instanci. Všechny Vue Šablony jsou platné HTML kódy, které mohou být převáděny pomocí prohlížeče vyhovující specifikacím a HTML převaděčem. Vue kompiluje šablony do virtuálního DOM. DOM dovoluje Vue, aby renderovala komponenty v paměti předtím, než se aktualizuje prohlížeč. Zkombinovaný s reaktivitou systému je Vue schopen spočítat minimální počet komponent, které se budou znovu renderovat. Tímto přístupem aplikuje co nejmenší počet DOM manipulací, když se změní stav aplikace.
Vue uživatelé mohou použít syntaxi šablon nebo přímý zápis renderovacích funkcí pomocí JSX.[24] Render funkce dovolují aplikaci postavení na softwarových komponentách.[25]
Reaktivita
[editovat | editovat zdroj]Vue je reaktivní systém který používá čisté JavaScript objekty a optimalizovaný proces znovu renderování. Každá komponenta si udržuje stav jejích reaktivních závislostí během renderování. Systém tak přesně pozná kdy a které komponenty má znovu renderovat.[26]
Přechody
[editovat | editovat zdroj]Vue nabízí mnohé způsoby jak aplikovat efekty přechodu, když byla položka vložena, aktualizována nebo odstraněna z DOM. Toto zahrnuje nástroje k:
- Automatickému aplikování CSS tříd pro přechody a animace
- Integrování CSS knihoven animací třetích stran, jako Animate.css
- Používání JavaScript k přímé manipulaci s DOM během napojení přechodů
- Integrování JavaScript animačních knihoven třetích stran, jako Velocity.js
Když je element který je obalen v přechodové komponentě vložen nebo odstraněn, tak se stane následující:
- Vue automaticky zjistí, zda jsou na cílový prvek aplikovány CSS přechody nebo animace. Pokud je to zjištěno, CSS třídy přechodu budou přidány, odstraněny ve vhodném čase.
- Pokud komponenta přechodu poskytnula JavaScript napojení, pak tyto napojení budou zavolány ve vhodném čase.
- Pokud žádné CSS přechody/animace a JavaScript napojení nebyli zjištěny, DOM operace pro vložení/odstranění budou okamžitě provedeny na dalším snímku.[27][28]
Směrování
[editovat | editovat zdroj]Tradiční nevýhoda single-page applications (SPAs) je neschopnost sdílení odkazů s danou podstránkou. Protože SPA prezentují uživatelům pouze jednu URL odpověď ze serveru (typicky to jsou index.html nebo index.vue), je záložkování či sdílení odkazů na danou sekci je velice těžké, skoro nemožné. Pro odstranění tohoto problému se mnoho směrovačů na straně klienta rozhodlo vymezit jejich dynamické URL pomocí "hashbangu" (#!), tzn. page.com/#!/. Avšak s nejmodernějšími HTML5 prohlížeči je podporováno směrování bez hashbangu.
Vue nabízí rozhraní pro změnu toho, co je viděno na stránce vzhledem k dané URL cestě. Nezáleží na tom jak byla změněna ( jestli byla změněna pomocí emailového odkazu, nebo odkazu na stránce). Navíc používáním směrovače na straně klienta dovoluje Vue úmyslné přechody cesty prohlížeče, když se objeví nějaká událost v prohlížeči na tlačítku nebo odkazu. Vue v základu neobsahuje směrovač na straně klienta. Ale existuje "vue-směrovač" balíček s otevřeným zdrojovým kódem, který poskytuje API k aktualizaci URL, podporuje tlačítko zpět, a resetování hesla nebo ověření odkazů emailem s URL parametry. Podporuje mapování vnořených směrovačů pro vnořené komponenty a nabízí odlazenou kontrolu nad přechodem. Pomocí Vue vývojáři stavějí aplikace s malými stavebními bloky a vytváření větší komponenty. S Vue směrovačem musí být komponenty pouze přiřazeny k danému směrovači a daný směrovač poté rozhoduje, kde by se měli renderovat.[29]
<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>
Kód nahoře:
- Nastaví směrovač na straně klienta na adresu
websitename.com/user/<id>
. - Ta se renderuje v User komponentě, která je definována v const User.
- Dovolí User komponentě poslat dané ID uživatele, které bylo napsáno v URL pomocí $route klíče objektu:
$route.params.id
. - Tato šablona (lišící se v parametrech, které jsou poslány do směrovače) bude renderována v
<router-view></router-view>
uvnitř DOM div#app. - Finálně vygenerované HTML pro někoho, kdo zadal
websitename.com/user/1
bude vypadat takto:[30]
<div id="app">
<div>
<div>User 1</div>
</div>
</div>
Ekosystém
[editovat | editovat zdroj]Jádro nabízí nástroje a knihovny, které jsou vytvořený vývojovým týmem a přispěvateli.
Oficiální nástroje
[editovat | editovat zdroj]- Devtools – Rozšíření vývojových nástrojů pro debugování Vue.js aplikací v prohlížeči.
- Vue CLI – Standardní nástroje pro rapidní Vue.js vývoj.
- Vue Loader – Načítač webových balíčků které dovolují zapisovat Vue komponenty v Single-File Components (SFCs) formátu.
Oficiální knihovny
[editovat | editovat zdroj]- Vue Router – Oficiální směrovač pro Vue.js
- Vuex – Fluxem inspirovaný centralizovaný manažer stavů pro Vue.js
- Vue Server Renderer – Renderování na straně serveru pro Vue.js
Související články
[editovat | editovat zdroj]Externí odkazy
[editovat | editovat zdroj]Obrázky, zvuky či videa k tématu Vue.js na Wikimedia Commons
Reference
[editovat | editovat zdroj]V tomto článku byl použit překlad textu z článku Vue.js na anglické Wikipedii.
- ↑ vue/LICENSE [online]. [cit. 2017-04-17]. Dostupné online.
- ↑ Dostupné online.
- ↑ Introduction — Vue.js [online]. [cit. 2020-05-27]. Dostupné online. (anglicky)
- ↑ Evan is creating Vue.js | Patreon [online]. [cit. 2017-03-11]. Dostupné online. (anglicky)
- ↑ What is Vue.js [online]. [cit. 2020-01-21]. Dostupné online.
- ↑ Between the Wires | Evan You. Between the Wires. 2016-11-03. Dostupné v archivu pořízeném dne 2017-06-03.
- ↑ v3.0.0 One Piece [online]. GitHub, 2020-09-18 [cit. 2020-09-23]. Dostupné online.
- ↑ v2.6.0 Macross [online]. GitHub, 2019-02-04 [cit. 2020-09-23]. Dostupné online.
- ↑ v2.5.0 Level E [online]. GitHub, 2017-10-13 [cit. 2020-09-23]. Dostupné online.
- ↑ v2.4.0 Kill la Kill [online]. GitHub, 2017-07-13 [cit. 2020-09-23]. Dostupné online.
- ↑ v2.3.0 JoJo's Bizarre Adventure [online]. GitHub, 2017-04-27 [cit. 2020-09-23]. Dostupné online.
- ↑ v2.2.0 Initial D [online]. GitHub, 2017-02-26 [cit. 2020-09-23]. Dostupné online.
- ↑ v2.1.0 Hunter X Hunter [online]. GitHub, 2016-11-22 [cit. 2020-09-23]. Dostupné online.
- ↑ v2.0.0 Ghost in the Shell [online]. GitHub, 2016-09-30 [cit. 2020-09-23]. Dostupné online.
- ↑ 1.0.0 Evangelion [online]. GitHub, 2015-10-27 [cit. 2020-09-23]. Dostupné online.
- ↑ 0.12.0: Dragon Ball [online]. GitHub, 2015-06-12 [cit. 2020-09-23]. Dostupné online.
- ↑ v0.11.0: Cowboy Bebop [online]. GitHub, 2014-11-07 [cit. 2020-09-23]. Dostupné online.
- ↑ v0.10.0: Blade Runner [online]. GitHub, 2014-03-23 [cit. 2020-09-23]. Dostupné online.
- ↑ v0.9.0: Animatrix [online]. GitHub, 2014-02-25 [cit. 2020-09-23]. Dostupné online.
- ↑ v0.8.0 [online]. GitHub, 2014-01-27 [cit. 2020-09-23]. Dostupné online.
- ↑ v0.7.0 [online]. GitHub, 2013-12-24 [cit. 2020-09-23]. Dostupné online.
- ↑ 0.6.0: VueJS [online]. GitHub, 2013-12-08 [cit. 2020-09-23]. Dostupné online.
- ↑ Components — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky)
- ↑ Template Syntax — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky)
- ↑ Vue 2.0 is Here! [online]. September 30, 2016 [cit. 2017-03-11]. Dostupné online.
- ↑ Reactivity in Depth — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky)
- ↑ Transition Effects — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky)
- ↑ Transitioning State — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky)
- ↑ Routing — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky)
- ↑ YOU, Evan. Vue Nested Routing (2) [online]. [cit. 2017-05-10]. Dostupné online.