K čemu potřebujeme Vue?

Dnes hlavně k tomu, abychom v něm mohli vypracovat následující úkoly.

Cvičení - Úvod do Vue a práce s daty

1

První kroky ve Vue

pohodička
  1. V novém adresáři začni nový projekt. Vytvoř soubory index.html a index.js. V html souboru si pomocí Emmetu vytvoř základní kostru a připoj js soubor.

  2. Pomocí značky script připoj do HTML souboru Vue. (Můžeš si ho stáhnout anebo použít verzi z CDN.)

  3. Otevři si stránku v prohlížeči a podívej se do konzole, jestli hlásí, že na ní běží Vue.

  4. V html souboru vytvoř div s id app.

  5. V js souboru vytvoř novou Vue instanci a napoj ji na tento div.

  6. Abys ozkoušela, jestli aplikace funguje, vypiš na stránce svoje jméno, které jí předáš pomocí konfiguračního objektu ve Vue.

2

Domácí mazlíček

to dáš

Pojďme udělat jednoduchou stránku o tvém psovi. Můžeš si vybrat i jiné domácí zvíře, ale pak si musíš upravit zadání tam, kde nedává smysl.

  1. Použij projekt z minulého úkolu nebo si vytvoř nový.
  2. Vytvoř stránku, která zobrazuje základní informace o tvém psovi. Určitě se hodí jméno, váha, barva srsti a věk. Všechna data budou uložena v objektu data v konfiguračním objektu uvnitř JS souboru.
  3. Jeden psí rok odpovídá sedmi lidským. Přidej do stránky informaci o tom, kolik by tvému psovi bylo, kdyby byl člověkem.
  4. V objektu data si vytvoř seznam oblíbených činností tvého domácího zvířete a všechny je vypiš do stránky. (Použitou datovou strukturou bude pole.)

Cvičení - Metody a události

3

Krmení a venčení

to dáš

Použij projekt z předchozího cvičení.

  1. Přidej do stránky tlačítka nakrm trochu a nakrm hodně. Tlačítko nakrm trochu zvýší váhu o 2 kg, tlačítko nakrm hodně o 5 kg.
  2. Přidej do stránky tlačítka vyvenči, které sníží váhu o 1 kg.
  3. Přidej do stránky odstavec s textem Poslední akce: .... Tam se bude vypisovat, co naposledy náš mazlíček dělal. Při startu aplikace bude tento odstavec obsahovat tři tečky.
  4. Do všech metod ohledně krmení a venčení přidej kód, který vypisuje nějakou zprávu viditelnou v poslední akci.
  5. Přidej tlačítko zaštěkej, které jen změní vypisovanou zprávu v poslední akci.
4

Úkolníček

zapni hlavu
  1. Vytvoř stránku, která zobrazuje seznam úkolů na dnešek. Jedná se o jednoduchou Vue aplikaci. Úkoly budou uloženy v poli v objektu data v rámci konfiguračního Vue objektu.
  2. Vytvoř na stránce tlačítko, které na seznam úkolů přidá úkol učit se JavaScript. JavaScript je potřeba učit se často, takže nevadí, když tlačítkem přidáme stejný úkol vícekrát.
  3. Když máme nějaký úkol hotový, chtěli bychom ho ze seznamu odstranit. Zařiď, ať se tak stane po kliknutí na úkol.

Nápověda k poslednímu kroku: Možná by se ti hodila metoda Array.prototype.splice(). Jak se používá, si už jistě najít dokážeš.