Vue

Webové aplikace

• interaktivní webová aplikace
• chová se jako aplikace
• kompletní systém
• často i desktopové / mobilní aplikace (Discord, Spotify, ...)
• Foodora, ČSOB IB, Google Drive, Trello, (školní portál)

Správa

• spousta souborů
• různé části se vážou na sebe
• opakování kódu
• různé reference na stránku (identifikátory, třídy, ...)

Webový framework

• předpřipravená knihovna k vytváření prostředí
• způsob vytvoření ucelené aplikace
• většinou používá různé šablony a vnich JS
• různé návrhy — předpřipravené věci
• např. Vue, React, Angular, Svelte

Vue

Vue

• webový framework
• založen na návrhu Angularu
• open-source
• https://vuejs.org/

Vue

• především jednostránkové stránky (jedno HTML)
• umí i více
• většinou jako frontend — pracuje na klientovi
• umí i na serveru (tzv. SSR)

Vue

• velmi malé a rychlé
• dobrá komunita — spousta knihoven a možnost studia

Ahoj světe!

Reaktivita

• Vue automaticky hlídá na čem jsou dané elementy vázané
• když se dané data změní, překreslí se daný element

Direktivy

• způsob manipulace se šablonou
• překladač (compiler) poté zpracuje na funkční část kódu
• v podstatě atribut
• začíná v-

Direktiva v-bind

• vloží nějakou hodnotu dovnitř atributu na prvku
• za smth uvnitř v-bind:smth se dává jméno atributu, kterému bude nastavena hodnota
• např. v-bind:class, v-bind:style, ...

Direktiva v-if

• z výrazu vyhodnotí, zda se má daný blok vykreslit
• boolean hodnota / výraz

Direktiva v-model

• funguje pouze na input, textarea, select
• když se hodnota změní v daném inputu, změní se i jako proménná v kódu
• všechny místa, kde se proměnná používá se překreslí

Cykly

Vue instance

• hlavní instance nám říká, že vůbec Vue existuje
• data — data, které lze používat v šabloně
• created() — funkce, která se zavolá po tom, co je daná Vue instance vytvořena
• mounted() — funkce, která se zavolá po tom, co se daná Vue instance vykreslí do stránky
• destroyed() — funkce, která se zavolá po tom, co se daná Vue instance zruší
• updated() — funkce, která se zavolá po tom, co se něco ve Vue instanci změní

Události

Události

• další věc, co Vue umí je přiřadit nějakému prvku událost
• když daná událost nastane, stane se něco jiného
• definujeme metodu (stejně jako addEventListener)
• máme k dispozici proměnou e
• používatelné metody definujeme ve vlastnosti methods

Co říkáte na Vue?

Základy máte za sebou.

Nyní praxe!

Zkrácené zápisy

Projekty

Projekty

• projekty v jednom souboru nedávají smysl
• kód který používáme v scriptu není optimalizovaný pro produkci

Vite

• správce projektů nejen pro Vue
• pomocí něj vytváříme, spouštíme a sestavujeme projekty
• instalujeme pomocí npm
• instalace se děje automaticky, není potřeba ručně nic instalovat

Vytvoříme si projekt!

• npm create vite@latest
• nevybereme žádné balíčky navíce
• npm install

Projekt

• npm projekt, máme package.json i node_modules
• index.html
• public/
• src/
• src/assets
• src/components
• src/App.vue
• src/main.js

Soubory .vue

• speciální soubory
• známe již z našeho jednoduchého HTML
• komponenty

Komponenty

• síla Vue náleží komponentám
• komponenty můžeme propojovat dohromady a navazovat je
• můžeme předávat data
• každá komponenta má své vlastní data, které s nikým nesdílí
• každá komponenta má template, script a nepovinně style
• později: další vlastnosti a funkcionality, komunikace s jinými komponentami

Každá komponenta je instancí Vue.

Můžeme tedy definovat data, methods, mounted a další.

Vlastnost components

• definujeme které komponenty můžeme uvnitř této komponenty využívat
• tyto komponenty musíme v JS importovat pomocí zápisu
• import JmenoKomponenty from './JmenoKomponenty.vue'
• komponenty poté můžeme vkládat pomocí zápisu tagu
• <JmenoKomponenty></JmenoKomponenty>

Skripty

dev — spuštění (development)

• zapneme pomocí npm run dev
• na lokálním počítači spustí webový server s naší aplikací
• obvykle na nějakém portu 808x

build — sestavení

• spustíme pomocí npm run build
• sestaví aplikaci do pár souborů, které můžeme nahrát na hosting
• sestavuje se do složky dist

Styly

• jednotlivým komponentám můžeme definovat styly
• vložíme do souboru .vue tag style vedle tagů template a script
• tyto komponenty budou však globální právě tehdy, když se komponenta poprvé načte

Styly scoped

• označíme styly jako určené pouze pro aktuální komponentu
• poté se při načtení komponenty budou používat právě tyhle styly
• žádný jiný prvek na stránce k nim nebude mít přístup

props — vlastnosti

• můžeme definovat na Vue instanci
• definuje jaké parametry můžeme z jiných komponent předávat téhle
• určujeme jméno (což bude k dispozici jako proměnná) a datový typ
• např. tedy: String, Number, Object
• později: pokročilá validace dat

computed — vypočítané proměnné

• můžeme definovat na Vue instanci
• jsou to speciální proměnné, které se mění v závislosti na jiných datech
• používáte tedy jako nějaké formátovací proměnné, když nechceme upravovat předešlé data

props

props

Události

• events
• způsob komunikace napříč komponentami
• využívá se i jinde (a skoro všude) k různým účelům
• ve Vue: notifikace více míst o události

Jak události fungují

• událost se vyvolá na komponentě
• rodič může k volání události s jménem připojit
• při vyvolání se daná funkce zavolá (rodič událost zpracuje)

Vyvolání události

• každá komponenta může vyvolat událost pomocí .$emit(name, data)
• každé události nastavujeme pomocí parametrů jméno a nepovinně data

Zachycení

• při vložení komponenty do šablony můžeme pomocí attributu v-on:name nebo @name zachytit naší událost pojmenovanou name

Kompozice

Kompozice

• Composition API
• nový styl tvoření komponent
• odstranění možností (data, methods, ...)
• vše se definuje jako jednoduchý lineární kód
• znovupoužitelnost & rozšiřitelnost
• původní systém (Options API) je stále k dispozici, používá však vnitřně kompozici

Použití

• metoda setup
• zkrácený zápis <script setup>

Blogovací platforma

Práce

Pomocí Vue 3 a Composition API vytvořte formulář pro přidávání blogových příspěvků a jejich zobrazení.

Rybáři

Práce

Pinia

Pinia

• knihovna na uchovávání dat
• k datům mají přístup všechny komponenty
• každá komponenta může data změnit očekávaným způsobem

(De)centralizované data

• jaký je mezi nimi rozdíl?
• centralizované — na jednom místě, spravuje nějaký nadřazený prvek
• decentralizované — každá komponenta si své data spravuje sama

Pinia

• používáme zejména kompozici, ostatní způsoby jsou možné
• lze si představit jak globální obchod či speciální komponentu
• ta má stav, uložená data
• akce se volají a provádějí pokročilé úpravy dat
• gettery vrací data nějak upravená

Zapnutí Pinia

• nutné připojit k aplikaci app.use(createPinia())
• stores definujeme většinou v /stores/

Ukázka store

Přístup

• store musíme načíst v dané komponentě
• celá kompozice či metoda setup
• na dané proměnné máme k dispozici stav a dané akce

Použití store

Vue.js devtools

• (minimálně v Google Chrome)
• vývojářské nástroje
• dovoluje sledovat Pinia stav, události, komponenty a další

Instalace balíčků

Instalace balíčků

• dvě možnosti:
• přidání při vytváření projektu
• přidání v již existujícím projektu

Při vytváření

• při vytváření projektu — npm create vite@latest
• vyberem vue-create
• vybereme balíček, který chceme přidat
• balíček se nainstaluje a vytvoří se potřebné soubory

Již existující

• většinou nemáme automaticky možnost
• instalujeme pomocí npm a vlastně konfigurujeme

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
• v kompozici alternativa useRoute a useRouter

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

Rychlý zápis tříd

Rychlý zápis stylů

Sestavení Vue aplikace

• soubory .vue nejsou v prohlížeči zobrazitelné
• npm run dev nám při změně naší aplikaci sestaví znovu
• chceme-li nahrát webovou stránku, musíme jí sestavit
• npm run build

Co vlastně sestavení dělá?

• vezme soubory a ty zredukuje na balíčky
• jednotlivé komponenty se uloží do JS kódu, který umí dle našich šablon generovat HTML, které se vkládá do stránky
• reálně sestavená aplikace obshauje pouze HTML, který najedeme v public/index.html s odkazy na JS balíčky
• v případě, že používáme balíčky se zabalí společně se JS

Změna hlavní složky

V hlavní složce založíte soubor vue.config.js ve kterém nastavíte následující: