Opakování

Opakování

Události

Jaký problém má tento způsob předávání dat?

Pinia

Sledovače — watchers

• speciální metody
• mají za úkol sledovat proměnné komponenty
• data, computed, props, ...
• když se daná proměnná změní, zavolá se funkce

Ukázka

Použití

• při přihlašování
• změna klíčových dat

Kde na svém portálu používám sledovače?

SASS uvnitř Vue

• balíček (stejně jako Vuex)
• můžeme psát SCSS/SASS uvnitř komponent
• a nebo i globálně
• instalujeme přímo při vytváření projektu — balíček sass

V komponentách

stále můžeme využívat scoped

Globálně

• ve složce assets si můžeme vytvořit SASS soubory
• soubory mezi sebou linkujeme
• styly zapneme v souboru main.js

Zapnutí

SASS ve Vue

Práce

Zkuste si ve Vue zapnout SASS a vytvořit si základní strukturu. Tedy, soubor na proměnné, jednotlivé komponenty či sekce. Společně soubory nalinkujte a zapněte. Vaše styly otestujte.

Programové styly

• styly můžeme přidávat i programově
• pomocí vlastnosti style
• uvnitř <template> pomocí v-bind

Programové styly

Vícestránkové aplikace

• aktuální Vue co známe, má jen jednu stránku
• balíček Router nám dovoluje definovat více stránek
• jednotlivé stránky jsou reprezentovány jako komponenty
• instalujeme přímo při vytváření projektu
• https://router.vuejs.org

Po instalaci

• nová složka views/
• nová složka a soubor router/index.js
• aktivace balíčku v main.js

Definice stránek

• definujeme jednotlivé stránky předem
• určujeme:
• na jaké adrese se nachází
• jak se jmenují
• jaká komponenta je pro ně určena

router/index.js

router-view

• místo, kde se komponenty vykreslí
• mění se dle aktuální stránky
• App.vue si můžeme představit jako obal na celou stránku

Co se tedy v App.vue má nacházet?

router-link

• vytvoří odkaz na předdefinou stránku
• můžeme přímo zadavát odkaz
• nebo používat obecný zápis
• tím definujeme místo adresy název dané stránky

Zápisy

Jak se tyto zápisy liší?

Parametry v definicích cest

• v definicích cest můžeme přidat parametry
• parametr se zobrazí v URL a můžeme je číst v parametrech

Zápisy

Router v kódu

• v celé aplikací máme k dispozici:
• this.$router — samotný router, nastavení, přesměrování, ...
• this.$route — aktuální stránka (routa)
• z this.$route.params (objekt) můžeme číst jednotlivé parametry

Programové řízení routeru

• pomocí this.$router.push(data) můžeme přesměrovat stránku
• dovnitř dáváme stejné data
• /user/1
• { name: "user", params: { id: 1 }}
• existuje např. ještě:
• this.$router.replace
• this.$router.go
• k čemu slouží?

Způsoby směrování (History modes )

• způsob, jak se bude router směrovat
• dva základní způsoby:
• hash — routování pomocí #, např. #/user/1/profile
• normal — routování pomocí /, např. /user/1/profile
• dokumentace

Jak se tyto způsoby liší?

Normální mód potřebuje další nastavení serveru, které například není možné.

Přenačtení

Práce

Vytvořte (použijte) projekt, ve kterém bude jedna stránka (routa) s jedním parametrem. Do komponenty stránky přidejte jeden text (hodnota parametru) a dvě tlačítka, kde každé bude ukazovat na aktuální stránku ale s různými parametry.

Co se stane, když budeme klikat na tlačítka? Bude se daná komponenta znovu vytvářet?

Jak lze upravit komponentu, aby reagovala na změny?

Vnořené routy

• obyčejně: vytváření lineárních stránek
• hierarchický systém
• nutné opakovaně používat router-view
• definujeme v routes/index.js v children
• Dokumentace

Ukázka