Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové aplikace

Transkript

1 Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové aplikace ES6, Vue

2 strana 2 ES6, ES7... ES NEXT Nová/rozšířená syntaxe Mnoho vylepšení Není podporováno ve všech prohlížečích Nutná transpilace -

3 strana 3 Novinky let a const Náhrada/rozšíření definice proměnné var let definuje platnost jen pro daný pár { a dále do hloubky for(var i ) VS for(let i ) const je vhodné pro proměnné, které mají pevný obsah Pozor na objekty

4 strana 4 Novinky for of Pro iteraci přes pole let p = [1,2,3,4,5]; for(let h of p) { console.log(h);

5 strana 5 Novinky výchozí parametry Pro funkce i metody function fce(p1, p2 = 123) {...

6 strana 6 Novinky třídy class Trida extends JinaTrida { constructor(p1, p2 = 123) { this.p1 = p1; this.p2 = p2; metoda() {

7 strana 7 Novinky arrow funkce (p1, p2) => { Nemění obsah this při zanoření do { class Pocitadlo { constructor(btn) { this.cnt = 0; btn.onclick = () => { this.cnt++; function() { by mělo jiné this

8 strana 8 Novinky zkrácené metody a vlastnosti var cokoliv = 132; var o = { f: function() {..., cokoliv: cokoliv var o = { f() {..., cokoliv Výhodné pro poslání dat v JSON

9 strana 9 Novinky destructuring assignment Vytažení hodnot z pole function f() { return [1,2,3,4,5,6] [a, b,...rest] = f(); //a=1, b=2, rest=[3,4,5,6]

10 strana 10 Novinky template string Dosazování proměnných do řetězce Dobré pro stavbu URL nebo šablony Podpora víceřádkových řetězců var x = 876; var url = `api?param=${x`;

11 strana 11 Novinky zbytek Generátory a yield async a await Souvislost s třídou Promise Anotace typů u metod Více na

12 strana 12 ES6 modules Používá klíčová slova import a export/export default Nepoužitelné v browseru Nutný bundler Pozor na NodeJS require() a module.exports A pozor na podobnost s knihovnou require.js (ta je pro browser)

13 strana 13 ES6 modules Hlavní skript: Název si volíte (řeší kolize) import Trida from 'file'; let t = new Trida(); t.method(); Bez koncovky Podobné jako v Pythonu Modul ve file.js: export default class { constructor() { method() {

14 strana 14 ES6 modules Hlavní skript: import { f1, f2 from 'file'; f1(); f2(); Modul ve file.js: export let f1 = () => {... ; export let f2 = () => {... ; Nebo var

15 strana 15 Vue komponenty komunikace Komunikace mezi komponentami Potomek vyvolá událost Rodič může volat metody Rodič může poslat data přes atribut :data="vstup" ref="nazev">

16 strana 16 Vue komponenty komunikace Rodič parent.vue <template> <div> <counter ref="c" </div> </template> <script> import Counter from "./counter"; export default { methods: { inc() { this.$refs.c.inc();, upd(v) { console.log("updated", v);, components: { counter: Counter, </script> Potomek counter.vue <template> <div>{{c</div> </template> <script> export default { props: ["def"], data() { return { "c": 0, methods: { inc() { this.c++; this.$emit("updated", this.c);, mounted() { this.c = this.def; </script>

17 strana 17 Vue komponenty komunikace Rodič parent.vue <template> <div> <counter ref="c" </div> </template> <script> import Counter from "./counter"; export default { methods: { inc() { this.$refs.c.inc();, upd(v) { console.log("updated", v);, components: { counter: Counter, </script> Výchozí hodnota Potomek counter.vue <template> <div>{{c</div> </template> <script> export default { props: ["def"], data() { return { "c": 0, methods: { inc() { this.c++; this.$emit("updated", this.c);, mounted() { this.c = this.def; </script>

18 strana 18 Vue komponenty komunikace Rodič parent.vue <template> <div> <button <counter ref="c" </div> </template> <script> import Counter from "./counter"; export default { methods: { inc() { this.$refs.c.inc();, upd(v) { console.log("updated", v);, components: { counter: Counter, </script> Potomek counter.vue <template> <div>{{c</div> </template> <script> export default { props: ["def"], data() { return { "c": 0, methods: { inc() { this.c++; this.$emit("updated", this.c); Metoda, mounted() { this.c = this.def; </script> Aktualizace view

19 strana 19 Vue komponenty komunikace Rodič parent.vue <template> <div> <counter ref="c" </div> </template> <script> import Counter from "./counter"; export default { methods: { inc() { this.$refs.c.inc();, upd(v) { console.log("updated", v);, components: { counter: Counter, </script> Metoda Událost Potomek counter.vue <template> <div>{{c</div> </template> <script> export default { props: ["def"], data() { return { "c": 0, methods: { inc() { this.c++; this.$emit("updated", this.c);, mounted() { this.c = this.def; </script>

20 strana 20 Vue komponenty sloty Pro vložení obsahu definovaného rodičem do potomka Úprava vzhledu potomka Lze pojmenovat

21 strana 21 Vue komponenty sloty Rodič parent.vue <template> <paginate ref="p" <div v-for="i of visible"></div> </paginate> </template> <script> import Paginate from './paginate'; export default { data() { return { pagesize: 3, visible: [], items: [], methods: { filter() {..., mounted() { this.filter();, components: { paginate: Paginate </script> Potomek paginate.vue <template> <div> <slot></slot> </div> </template> <script> export default { props: ['size'], data() { return { start: 0, methods: { getstart() {..., prev() { this.$emit("page");, next() { this.$emit("page"); </script>

22 strana 22 Vue komponenty sloty Rodič parent.vue <template> <paginate ref="p" <div v-for="i of visible"></div> </paginate> </template> <script> Obsah v šabloně se vloží do slotu potomka import Paginate from './paginate'; export default { data() { return { pagesize: 3, visible: [], items: [], methods: { filter() {..., mounted() { this.filter();, components: { paginate: Paginate </script> Potomek paginate.vue <template> <div> <slot></slot> </div> </template> <script> export default { props: ['size'], data() { return { start: 0, methods: { getstart() {..., prev() { this.$emit("page");, next() { this.$emit("page"); </script>

23 strana 23 Vue komponenty sloty Rodič parent.vue <template> <paginate ref="p" <div v-for="i of visible"></div> </paginate> </template> <script> import Paginate from './paginate'; export default { data() { return { pagesize: 3, visible: [], items: [], methods: { filter() {..., mounted() { this.filter();, components: { paginate: Paginate </script> Události zařídí přepsání viditelných dat Potomek paginate.vue <template> <div> <slot></slot> </div> </template> <script> export default { props: ['size'], data() { return { start: 0, methods: { getstart() {..., prev() { this.$emit("page");, next() { this.$emit("page"); </script> Klik na tlačítko

24 strana 24 Vue komponenty provide/inject Mechanismus pro sdílení "objektu" V hlavní komponentě se nastaví provide V libovolné zanořené komponentě se podle názvu zpřístupní v inject

25 strana 25 Vue komponenty provide/inject Hlavní komponenta main.js const messagebus = new Vue(); new Vue({ el: '#app', provide: { messagebus, components: {App, template: '<App/>' ); Libovolný potomek export default { inject: ['messagebus'], methods: { emit() { this.messagebus. $emit(...);

26 strana 26 Vue globální události Je nutné zaregistrovat message bus Je to obyčejná prázdná komponenta Distribuce do komponent přes ES6 moduly pomocí provide inject mechanismu let messagebus = new Vue(); messagebus.$emit("ev", param); messagebus.$on("ev", () => {);

27 strana 27 Vue globální události Odesílatel <template> <div> <input type="text" v-model="payload"> </div> </template> <script> export default { inject: ['bus'], data() { return { payload: '', methods: { emit() { this.bus.$emit('ev', this.payload); </script> Příjemce <template> <div>{{msg</div> </template> <script> export default { inject: ['bus'], data() { return { msg: '', methods: { receive(m) { this.msg = m;, mounted() { this.bus.$on('ev', this.receive); </script>

28 strana 28 Vue globální události Odesílatel <template> <div> <input type="text" v-model="payload"> </div> </template> <script> export default { inject: ['bus'], data() { return { payload: '', methods: { emit() { this.bus.$emit('ev', this.payload); </script> Klik Vyvolána událost Příjemce <template> <div>{{msg</div> </template> <script> export default { inject: ['bus'], data() { return { msg: '', methods: { receive(m) { this.msg = m;, mounted() { this.bus.$on('ev', this.receive); </script> Zobrazení zprávy

29 strana 29 Vue router Řeší výběr komponenty podle URL Konfigurace v kódu aplikace HTML5 režim Nutná podpora mod_rewrite, jinak hash Routy je možné pojmenovat Nastavení meta informací Např. pro přihlášené uživatele

30 strana 30 Vue router - komponenty router-view Slouží k zobrazení komponenty podle URL <router-view></router-view> router-link Slouží k navigaci mezi komponentami Odkazovat pomocí názvu cesty <router-link :to="{name: ' '"> odkaz </router-link>

31 strana 31 Vue router události router.beforeeach((to, from, next) => { //přesměrovat jinam next({name: '...'); //zabránit navigaci next(false); //normálně pokračovat next(); );

32 strana 32 Vue router navigace v kódu Slouží pro navigaci vyvolanou jinak než klikem na odkaz - "přesměrování" export default { methods: { presmeruj() { this.$router.push({ name: '...' ); Je potřeba zaregistrovat router do hlavní/horní komponenty

33 strana 33 Vue router parametry cesty { path: '/.../:id', name: '...', component: Komponenta Definice cesty Navigace z odkazu <router-link :to="{name: '...', params: { id: 5 "> odkaz Navigace v kódu </router-link> this.$router.push({ name: '...', params: { id: 10 ); mounted() { console.log(this.$route.params.id); Přístup k hodnotě v cílové komponentě $route VS $router!!!

34 strana 34 Vuex Knihovna pro globální stav aplikace Přes ES6 moduly Dá se registrovat do hlavní komponenty Komponenty by neměly držet stav Stav = přihlášený uživatel, zobrazené položky, rozpracovaný dokument,... To co je společně použité ve více komponentách

35 strana 35 Vuex store stav import Vuex from 'vuex'; import Vue from 'vue'; Vue.use(Vuex); + registrace do hlavní komponenty aplikace v main.js export default new Vuex.Store({ state: { count: 0 );

36 strana 36 Vuex store mutace export default new Vuex.Store({ state: { count: 0, mutations: { increment(state, val) { state.count += val; ); Synchronní úprava stavu //v kódu komponenty this.$store.commit('increment', 5);

37 strana 37 Vuex store akce export default new Vuex.Store({ state: {..., mutations: {..., actions: { increment(context, val) { axios.post(...,...).then(() => { context.commit('increment', val); ); ); //v kódu komponenty this.$store.dispatch('increment', 5); Asynchronní akce

38 strana 38 HTTP komunikace Axios Vue přímo neobsahuje HTTP knihovnu Je možné použít např. Axios Založené na Promise Dobrá práce s REST API Nebo jinou HTTP knihovnu pro REST Nebo Fetch API jquery ne, je příliš obsáhlé a není dobré pro REST

39 strana 39 HTTP komunikace Axios import axios from 'Axios'; const axios = Axios.create(); axios.defaults.baseurl = 'http...'; Vue.prototype.$http = axios; this.$http.get(url).then() this.$http.post(url, data).then() this.$http.put(url, data).then() this.$http.delete(url).then()

40 strana 40 Registrace do hlavní komponenty import router from './router'; import store from './store'; new Vue({ router, store,... ).$mount('#app');

41 strana 41 Checkpoint Které ES6 syntaktické novinky už jsou podporovány v běžných prohlížečích? Jaké jsou možnosti komunikace mezi komponentami? Stahovat data z REST API v komponentách nebo ve store? Jaký je rozdíl mezi mutací a akcí?