Javascriptový framework VueJS Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu www.rvp.cz; ISSN 1802-4785. Provozuje Národní ústav pro vzdělávání, školské poradenské zařízení a zařízení pro další vzdělávání pedagogických pracovníků (NÚV).
Javascript programovací jazyk interpretovaný kód „běží“ webové aplikace mobilní aplikace interpretovaný kód „běží“ v prohlížeči (MS IE, MS EDGE, Google Chrome, …) na serveru – node.js
framework framework = knihovna funkcí (API, podpora ladění, …) usnadnění práce programátora obsahuje vhodné prostředky pro řešení typických úloh
VueJS 2.x (1) moderní a výkonný JS framework vhodný pro webové a mobilní aplikace srozumitelná dokumentace (+ příklady) frontend framework licence MIT
VueJS 2.x (2) reaktivní nízká vstupní bariéra (snadný na pochopení) změna v datech se promítne do webové stránky (a naopak) nízká vstupní bariéra (snadný na pochopení) současná verze 2.3.3 (květen 2017)
VueJS 2.x (3) aplikace (webová, mobilní) je tvořena: kódem HTML (webová stránka, může být doplněna o CSS) kódem JS zapsaným ve VueJS
Přidání VueJS do webové stránky <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="app"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"> </script> </body> </html>
Propojení mezi HTML a JS (1) <div id="app"> {{text}} </div> JS new Vue({ el: "#app", data: { text: "VueJS :-)" } });
Propojení mezi HTML a JS (2) <div id="app"> {{text}} </div> JS new Vue({ el: "#app", data: { text: "VueJS :-)" } }); V HTML definujeme ID (id=„app“), ve VueJS se odkážeme na tento element (el: „#app“). Hodnota proměnné text (v části data) se automaticky promítne do HTML ({{text}}).
VueJS, proměnné Deklarace proměnných (včetně výchozí hodnoty): new Vue({ el: "#app", data: { num1: 0, num2: 0, result: 0, } });
VueJS, funkce (metody) Deklarace funkcí (metod): new Vue({ el: "#app", data: { ... }, methods: { addNumbers: function(){ this.result = this.num1 + this.num2; } } });
VueJS, automatické funkce Deklarace automatických funkcí: new Vue({ el: "#app", ... computed: { getMin: function(){ if (this.num1 < this.num2) this.result = this.num1; else this.result = this.num2; } }, });
HTML, podmíněné zobrazení <p v-if="num1 < 0">Číslo 1 je záporné.</p> <p v-if="num1 == 0">Číslo 1 je nulové.</p> <p v-if="num1 > 0">Číslo 1 je kladné.</p>
Úkoly Zjisti rozdíl mezi interpretovaným a kompilovaným programovacím jazykem. Zjisti význam pojmu API. Zjisti rozdíl mezi frontend a backend frameworkem. Zjisti hlavní výhody licence MIT.
Zdroje Tento materiál je originálním autorským dílem (není ani částečně odvozeným dílem) a necituje žádné externí zdroje. Celý obsah je výsledkem tvůrčího úsilí autorky. K vytvoření tohoto DUMu nebyly použity žádné externí zdroje.