Cvičení - Procvičování komponent

1

Počitadlo

to dáš
  1. Stáhněte si základ Vue.js aplikace z tohoto odkazu.
  2. Nainstalujte všechny závislosti pomocí npm install.
  3. Sestavte aplikaci pomocí npm run build. Na stránce uvidíte prvek s číslem uvnitř. To bude základ našeho počitadla.
  4. Vytvořte komponentu Counter, která bude představovat počitadlo. Když na počitadlo uživatel klikne, navýší si o jedna.
  5. Nechte každé počitadlo začínat na nule. Vložte na stránku několik takových počitadel a vyzkoušejte, že fungují nezávisle.
2

Počitadlo s resetem

to dáš

Pokračujte v aplikaci z předchozího příkladu.

  1. Dejte každému počitadlu prop s názvem color, která bude udávat barvu počitadla. Každému počitadlu na stránce dejte jinou barvu.
  2. Dejte každému počitadlu prop s názvem max, která udává maximální hodnotu počítadla, kterou nelze překročit.
  3. Přijdete do každého počitadla tlačítko reset, které každé počitadlo nastaví zpět na nulu.

Cvičení - Komunikace

3

Menu

to dáš
  1. Stáhněte si základ Vue.js aplikace z tohoto odkazu.
  2. Nainstalujte všechny závislosti pomocí npm install.
  3. Sestavte aplikaci pomocí npm run build. Na stránce uvidíte navigační menu.
  4. Zařiďte, aby kliknutí na poločku menu vyhodilo událost s názvem pageChange. Do hodnoty události vložte název stránky.
  5. Zařiďte, aby hlavní komponenta App reagovala na událost pageChange a zobrazila správný název stránky.
4

Počitadla celkem

zapni hlavu

Pokračujte v aplikaci počitadla. Na stránce máme několik počitadel. Nyní bychom v hlavní komponentě App chtěli zobrazit celkový součet všech počitadel.

  1. Zařiďte, aby každé počitadlo vyhazovalo událost oneUp, která se vyhodí pokaždé, když se počitadlo navýší o jedna.
  2. A hlavní komponentě App vytvořte datovou položku countersSum, která bude obsahovat výsledný součet.
  3. U každého počitadla zareagujte na událost oneUp a přičtěte jedničku k celovému součtu. Součet zobrazte na stránce.
5

Počitadla celkem, reset

zapni hlavu

Pokračujte v aplikaci z předchozího příkladu. Chceme přidat další událost, která nastane, když počitadlo resetujeme. V tomto případě s událostí musíme poslat i hodnotu, která na počitadle byla, když jsme jej restartovali.

  1. Zařiďte, aby každé počitadlo vyhazovalo událost reset, která ponese hodnotu, která na počitadle byla před restartováním.

  2. Zareaguje ne tuto událost v hlavní komponentě App tak, že snížíte celkový součet o hodnotu, která přišla v události.

  3. A hlavní komponentě App vytvořte datovou položku countersSum, která bude obsahovat výsledný součet.

  4. U každého počitadla zareagujte na událost oneUp a přičtěte jedničku k celkovému součtu. Součet zobrazte na stránce.