Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
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 ISSN 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).
2
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
3
framework framework = knihovna funkcí (API, podpora ladění, …)
usnadnění práce programátora obsahuje vhodné prostředky pro řešení typických úloh
4
VueJS 2.x (1) moderní a výkonný JS framework
vhodný pro webové a mobilní aplikace srozumitelná dokumentace (+ příklady) frontend framework licence MIT
5
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 (květen 2017)
6
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
7
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=" </script> </body> </html>
8
Propojení mezi HTML a JS (1)
<div id="app"> {{text}} </div> JS new Vue({ el: "#app", data: { text: "VueJS :-)" } });
9
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}}).
10
VueJS, proměnné Deklarace proměnných (včetně výchozí hodnoty):
new Vue({ el: "#app", data: { num1: 0, num2: 0, result: 0, } });
11
VueJS, funkce (metody) Deklarace funkcí (metod): new Vue({ el: "#app",
data: { ... }, methods: { addNumbers: function(){ this.result = this.num1 + this.num2; } } });
12
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; } }, });
13
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>
14
Ú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.
15
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.
Podobné prezentace
