Webové aplikace

• interaktivní webová aplikace
• chová se jako aplikace
• kompletní systém
• často i desktopové / mobilní aplikace (Discord, Spotify, ...)
• DámeJídlo, 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

Vue

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

Ahoj světe!

Práce s JS uvnitř šablony

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

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í