Vue.js

Vue.js

Vývojář	Evan You
První vydání	Únor 2014
Aktuální verze	3.5.13 (15. listopadu 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.org
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

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

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

Verze	Datum vydání	Název
3.0	2020-09-180101a 2020-09-18	One Piece [7]
2.6	2019-02-040101a 2019-02-04	Macross [8]
2.5	2017-10-130101a 2017-10-13	Level E [9]
2.4	2017-07-130101a 2017-07-13	Kill la Kill [10]
2.3	2017-04-270101a 2017-04-27	JoJo's Bizarre Adventure [11]
2.2	2017-02-260101a 2017-02-26	Initial D [12]
2.1	2016-11-220101a 2016-11-22	Hunter X Hunter [13]
2.0	2016-09-300101a 2016-09-30	Ghost in the Shell [14]
1.0	2015-10-270101a 2015-10-27	Evangelion [15]
0.12	2015-06-120101a 2015-06-12	Dragon Ball [16]
0.11	2014-11-070101a 2014-11-07	Cowboy Bebop [17]
0.10	2014-03-230101a 2014-03-23	Blade Runner [18]
0.9	2014-02-250101a 2014-02-25	Animatrix [19]
0.8	2014-01-270101a 2014-01-27	— [20]
0.7	2013-12-240101a 2013-12-24	— [21]
0.6	2013-12-080101a 2013-12-08	VueJS [22]

Funkce

Komponenty

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

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

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

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

1. 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.
2. Pokud komponenta přechodu poskytnula JavaScript napojení, pak tyto napojení budou zavolány ve vhodném čase.
3. 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í

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:

1. Nastaví směrovač na straně klienta na adresu websitename.com/user/<id>.
2. Ta se renderuje v User komponentě, která je definována v const User.
3. Dovolí User komponentě poslat dané ID uživatele, které bylo napsáno v URL pomocí $route klíče objektu: $route.params.id.
4. 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.
5. 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

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

• 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

• 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

• React
• AngularJS

Externí odkazy

• Obrázky, zvuky či videa k tématu Vue.js na Wikimedia Commons

Reference

V tomto článku byl použit překlad textu z článku Vue.js na anglické Wikipedii.

1. vue/LICENSE [online]. [cit. 2017-04-17]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
2. Dostupné online. 
3. Introduction — Vue.js [online]. [cit. 2020-05-27]. Dostupné online. (anglicky) Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
4. Evan is creating Vue.js | Patreon [online]. [cit. 2017-03-11]. Dostupné online. (anglicky) Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
5. What is Vue.js [online]. [cit. 2020-01-21]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
6. Between the Wires | Evan You. Between the Wires. 2016-11-03. Dostupné v archivu pořízeném dne 2017-06-03. Je zde použita šablona {{Cite news}} označená jako k „pouze dočasnému použití“.
7. v3.0.0 One Piece [online]. GitHub, 2020-09-18 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
8. v2.6.0 Macross [online]. GitHub, 2019-02-04 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
9. v2.5.0 Level E [online]. GitHub, 2017-10-13 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
10. v2.4.0 Kill la Kill [online]. GitHub, 2017-07-13 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
11. v2.3.0 JoJo's Bizarre Adventure [online]. GitHub, 2017-04-27 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
12. v2.2.0 Initial D [online]. GitHub, 2017-02-26 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
13. v2.1.0 Hunter X Hunter [online]. GitHub, 2016-11-22 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
14. v2.0.0 Ghost in the Shell [online]. GitHub, 2016-09-30 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
15. 1.0.0 Evangelion [online]. GitHub, 2015-10-27 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
16. 0.12.0: Dragon Ball [online]. GitHub, 2015-06-12 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
17. v0.11.0: Cowboy Bebop [online]. GitHub, 2014-11-07 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
18. v0.10.0: Blade Runner [online]. GitHub, 2014-03-23 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
19. v0.9.0: Animatrix [online]. GitHub, 2014-02-25 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
20. v0.8.0 [online]. GitHub, 2014-01-27 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
21. v0.7.0 [online]. GitHub, 2013-12-24 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
22. 0.6.0: VueJS [online]. GitHub, 2013-12-08 [cit. 2020-09-23]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
23. Components — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky) Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
24. Template Syntax — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky) Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
25. Vue 2.0 is Here! [online]. September 30, 2016 [cit. 2017-03-11]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
26. Reactivity in Depth — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky) Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
27. Transition Effects — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky) Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
28. Transitioning State — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky) Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
29. Routing — Vue.js [online]. [cit. 2017-03-11]. Dostupné online. (anglicky) Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.
30. YOU, Evan. Vue Nested Routing (2) [online]. [cit. 2017-05-10]. Dostupné online. Je zde použita šablona {{Cite web}} označená jako k „pouze dočasnému použití“.

Portály: Internet