Zobrazení zdroje stránky Vue.js

{{Infobox - software
  | jméno = Vue.js
  | logo = Vue.png
  | vývojář = Evan You
  | první vydání = <span>Únor 2014</span>
  | Aktuální verze = 3.4.21. únor 2024
  | platforma = [[Cross-platform]]
  | programovací jazyk = [[JavaScript]], [[TypeScript]]
  | licence = [[Licence_MIT]]<ref name="license">{{cite web |title = vue/LICENSE |url = https://github.com/vuejs/vue/blob/dev/LICENSE |website = GitHub |access-date = April 17, 2017 }}</ref>
  | Webová stránka = {{URL|https://vuejs.org}}
}}
'''Vue.js''' (nebo jen '''Vue'''; vyslovuje se '''vjú''', podobně jako '''view''' ) je [[Open-source software|open-source]] progresivní [[JavaScript|javascriptový]] [[framework]] pro vytváření [[Uživatelské rozhraní|uživatelských rozhraní]].<ref>{{Citace elektronické monografie
| url = https://vuejs.org/v2/guide/#What-is-Vue-js
}}</ref> Začlenění do projektů, které používají jiné javascriptové [[knihovna (programování)|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á aplikace|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.<ref>{{Cite web|title=Introduction — Vue.js|url=https://vuejs.org/v2/guide/|website=vuejs.org|language=en|access-date=2020-05-27}}</ref> 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<ref>{{Cite web|url=https://www.patreon.com/evanyou|title=Evan is creating Vue.js {{!}} Patreon|work=Patreon|access-date=2017-03-11|language=en}}</ref>, Nuxt.js jako jedno z nejpopulárnějších řešení.{{fact|date=April 2020}}

Vue.js rozšiřuje [[Hypertext Markup Language|HTML]] pomocí HTML atributů takzvaných direktiv.<ref>{{Cite web|url=https://www.w3schools.com/whatis/whatis_vue.asp|title=What is Vue.js|website=www.w3schools.com|access-date=2020-01-21}}</ref> Direktivy nabízí funkcionality do HTML [[Aplikační software|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í".<ref>{{Cite news|url=https://betweenthewires.org/2016/11/03/evan-you/|archive-url=https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/|url-status=dead|archive-date=2017-06-03|title=Between the Wires {{!}} Evan You|date=2016-11-03|work=Between the Wires|access-date=2017-08-26|accessdate=2020-12-19|archiveurl=https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/|titul=Archivovaná kopie|datum přístupu=2020-12-19|url archivu=https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/|datum archivace=2017-06-03|nedostupné=ano}}</ref> 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 ===
{| class="wikitable"
|-
! Verze !! Datum vydání !! Název
|-
| 3.0 || {{dts|2020-09-18}} || [[One Piece]] <ref>{{cite web|url=https://github.com/vuejs/vue-next/releases/tag/v3.0.0|title=v3.0.0 One Piece|date=2020-09-18|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 2.6 || {{dts|2019-02-04}} || Macross <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.6.0|title=v2.6.0 Macross|date=2019-02-04|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 2.5 || {{dts|2017-10-13}} || Level E <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.5.0|title=v2.5.0 Level E|date=2017-10-13|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 2.4 || {{dts|2017-07-13}} || [[Kill la Kill]] <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.4.0|title=v2.4.0 Kill la Kill|date=2017-07-13|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 2.3 || {{dts|2017-04-27}} || JoJo's Bizarre Adventure <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.3.0|title=v2.3.0 JoJo's Bizarre Adventure|date=2017-04-27|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 2.2 || {{dts|2017-02-26}} || Initial D <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.2.0|title=v2.2.0 Initial D|date=2017-02-26|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 2.1 || {{dts|2016-11-22}} || Hunter X Hunter <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.1.0|title=v2.1.0 Hunter X Hunter|date=2016-11-22|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 2.0 || {{dts|2016-09-30}} || [[Ghost in the Shell]] <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.0.0|title=v2.0.0 Ghost in the Shell|date=2016-09-30|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 1.0 || {{dts|2015-10-27}} || [[Neon Genesis Evangelion|Evangelion]] <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/1.0.0|title=1.0.0 Evangelion|date=2015-10-27|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 0.12 || {{dts|2015-06-12}} || [[Dragon Ball]] <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/0.12.0|title=0.12.0: Dragon Ball|date=2015-06-12|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 0.11 || {{dts|2014-11-07}} || [[Cowboy Bebop]] <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/0.11.0|title=v0.11.0: Cowboy Bebop|date=2014-11-07|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 0.10 || {{dts|2014-03-23}} || [[Blade Runner]] <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v0.10.0|title=v0.10.0: Blade Runner|date=2014-03-23|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 0.9 || {{dts|2014-02-25}} || [[Animatrix]] <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v0.9.0|title=v0.9.0: Animatrix|date=2014-02-25|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 0.8 || {{dts|2014-01-27}} || {{n/a}} <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v0.8.0|title=v0.8.0|date=2014-01-27|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 0.7 || {{dts|2013-12-24}} || {{n/a}} <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v0.7.0|title=v0.7.0|date=2013-12-24|publisher=GitHub|access-date=2020-09-23}}</ref>
|-
| 0.6 || {{dts|2013-12-08}} || VueJS <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/0.6.0|title=0.6.0: VueJS|date=2013-12-08|publisher=GitHub|access-date=2020-09-23}}</ref>
|}

== Funkce ==

=== Komponenty ===
Vue komponenty rozšiřují základní [[HTML prvek|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.<ref>{{Cite web |url = https://vuejs.org/v2/guide/components.html |title = Components — Vue.js |access-date = March 11, 2017 |language = en }}</ref>

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:
<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

=== Šablony ===
Vue používá šablony založené na [[Hypertext Markup Language|HTML]] syntaxi, která dovoluje párovat renderovaný [[Document Object Model|DOM]] s daty ve Vue instanci. Všechny Vue Šablony jsou platné [[Hypertext Markup Language|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 [[Document Object Model|DOM]].
[[Document Object Model|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 [[Document Object Model|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í [[React (webový framework)|JSX]].<ref>{{Cite web |url = https://vuejs.org/v2/guide/syntax.html |title = Template Syntax — Vue.js |access-date = March 11, 2017 |language = en }}</ref> Render funkce dovolují aplikaci postavení na softwarových komponentách.<ref>{{Cite web |url = https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#77d9 |title = Vue 2.0 is Here! |date = September 30, 2016 |website = The Vue Point |access-date = 2017-03-11 }}</ref>

=== 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.<ref>{{Cite web |url = https://vuejs.org/v2/guide/reactivity.html |title = Reactivity in Depth — Vue.js |access-date = March 11, 2017 |language = en }}</ref>

=== 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 [[Document Object Model|DOM]]. Toto zahrnuje nástroje k:
* Automatickému aplikování [[Kaskádové styly|CSS]] tříd pro přechody a animace
* Integrování [[Kaskádové styly|CSS]] knihoven animací třetích stran, jako Animate.css
* Používání [[JavaScript]] k přímé manipulaci s [[Document Object Model|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 [[Kaskádové styly|CSS]] přechody nebo animace. Pokud je to zjištěno, [[Kaskádové styly|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é [[Kaskádové styly|CSS]] přechody/animace a JavaScript napojení nebyli zjištěny, [[Document Object Model|DOM]] operace pro vložení/odstranění budou okamžitě provedeny na dalším snímku.<ref>{{Cite web |url = https://vuejs.org/v2/guide/transitions.html |title = Transition Effects — Vue.js |access-date = March 11, 2017 |language = en }}</ref><ref>{{Cite web |url = https://vuejs.org/v2/guide/transitioning-state.html |title = Transitioning State — Vue.js |access-date = March 11, 2017 |language = en }}</ref>

=== 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.<ref>{{Cite web |url = https://vuejs.org/v2/guide/routing.html |title = Routing — Vue.js |access-date = March 11, 2017 |language = en }}</ref>

<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

Kód nahoře:
# Nastaví směrovač na straně klienta na adresu <code>websitename.com/user/<id></code>.
# 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: <code>$route.params.id</code>.
# Tato šablona (lišící se v parametrech, které jsou poslány do směrovače) bude renderována v <code><router-view></router-view></code> uvnitř DOM div#app.
# Finálně vygenerované HTML pro někoho, kdo zadal <code>websitename.com/user/1</code> bude vypadat takto:<ref>{{cite web |last1 = You |first1 = Evan |title = Vue Nested Routing (2) |url = https://router.vuejs.org/en/essentials/nested-routes.html |website = Vue Home Page (subpage) |access-date = May 10, 2017 }}</ref>

<syntaxhighlight lang="html5">
<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>
</syntaxhighlight>

== 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 (webový framework)|React]]
* [[AngularJS]]

== Externí odkazy ==
* {{Commonscat}}

== Reference ==
{{Překlad|en|Vue.js|784427134}}
<references />
{{pahýl}}

{{Aplikační frameworky}}
{{Portály|Internet}}

[[Kategorie:Javascriptové knihovny]]
[[Kategorie:Webové aplikační frameworky]]