Vue.js – Wikipedie
Přeskočit na obsah
Z Wikipedie, otevřené encyklopedie
Vue.js
Vývojář
Evan You
První vydání
únor 2014
Aktuální verze
3.6.0-beta.10 (13.
dubna 2026)
Operační systém
multiplatformní
Platforma
Cross-platform
Vyvíjeno v
JavaScript
TypeScript
Typ softwaru
svobodný software
knihovna
, javascriptový framework,
webový aplikační framework
, javascriptová knihovna a
otevřený software
Licence
Licence_MIT
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í
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.
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
, Nuxt.js jako jedno z nejpopulárnějších řešení.
zdroj?
Vue.js rozšiřuje
HTML
pomocí HTML atributů takzvaných direktiv.
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í".
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-180101a
2020-09-18
One Piece
2.6
2019-02-040101a
2019-02-04
Macross
2.5
2017-10-130101a
2017-10-13
Level E
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
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
}),
template
''
computed
countTimesTwo
()
return
this
count
},
watch
count
newValue
oldValue
console
log
`The value of count is changed from
${
oldValue
to
${
newValue
.`
);
},
methods
onClick
()
this
count
+=
},
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
'
};
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/
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
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
React
AngularJS
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
Je zde použita šablona
Cite web
}}
označená jako k „pouze dočasnému použití“.
Dostupné online
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
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í“.
Pahýl
Tento článek je příliš stručný nebo
postrádá důležité informace
Pomozte Wikipedii tím, že jej vhodně
rozšíříte
. Nevkládejte však
bez oprávnění
cizí texty.
Webové aplikační frameworky
ASP.NET
ASP.NET MVC
BFC
DotNetNuke
MonoRail
Umbraco
C++
CppCMS
ColdFusion
ColdSpring
Fusebox
Mach-II
Model-Glue
on Wheels
onTap
Common Lisp
ABCL-web
BKNR
SymbolicWeb
UnCommon Web
Java
AppFuse
Flexive
Grails
GWT
ItsNat
JavaServer Faces
Makumba
OpenXava
Reasonable Server Faces
Restlet
RIFE
Seam
Spring
Stripes
Struts
Tapestry
Vaadin
WebWork
Wicket
ZK
JavaScript
AngularJS
Archetype JavaScript Framework
Bonsai (framework)
Brick (framework)
CreateJS
D3
Dojo
Ember
Enyo (framework)
ExtJs
FabricJS
Fleegix
JavaScriptMVC
jQuery
jTypes
KineticJS
Knockout.js
Lo-dash
midori
MooTools
NodeJs
PaperJS
Processing.js
Prototype
qooxdoo
Raphael (framework)
React
RightJS
Shipyard
SimpleJS
SproutCore
JavaScript
Ruby
) •
Spry
The X Toolkit
Thorax (framework)
Tree.js
UIZE
Underscore
Vue.js
WebApp Install
YUI
Zepto (framework)
Perl
Catalyst
Dancer
Interchange
Mason
Masser
Maypole
Mojolicious
OX
PEE
Plack
WebGUI
PHP
Agavi
Akelos
CakePHP
Chisimba
CodeIgniter
Garden Platform
Horde
Jelix
Kohana
Kolibri
KumbiaPHP
Laravel
Midgard
Nette Framework
Orinoco
PHPonTrax
PRADO
Qcodo
Qcubed
Seagull
Simplicity
Symfony
WASP
Yii Framework
Zend Framework
Zope
Python
Django
Flask
Pyjamas
Pylons
TurboGears
web2py
Zope
Ruby
Hanami
Merb
Ruby on Rails
Sinatra
Scala
Lift
Smalltalk
AIDA/Web
Seaside
Ostatní jazyky
Application Express
PL/SQL
) •
Fusebox
ColdFusion
PHP
) •
OpenACS
Tcl
) •
Yaws
Erlang
) •
HAppS
Haskell
Portály
Internet
Citováno z „
Kategorie
Javascriptové knihovny
Webové aplikační frameworky
Skryté kategorie:
Údržba:Články s dočasně použitou šablonou
Údržba:Články obsahující nedoložená tvrzení
Monitoring:Články přeložené z enwiki
Pahýly
Portál Internet/Zapojené články
Vue.js
Přidat téma