Vue 3

10. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

TODO list

Práce

Pojdme zhodnotit práci na TODO listech.

Vue 3

v-model

  • interní změny fungování
  • vícekrát v-model
  • odstranění .sync modifikátoru v-bind

v-for a v-if

  • 2.x: v-for má větší přednost než v-if
  • 3.x: v-if má větší přednost než v-for

emits v komponentách

  • vlastnost emits
  • textové pole / objekt
  • jména událostí
  • určení validací

Sledování polí

  • watchers
  • sleduje jen přímé přiřazení pole
  • deep modifikátor

Životní cyklus

  • destroyed → unmounted
  • beforeDestroy → beforeUnmount

Teleporty

  • přemístění části komponenty
  • jiný prvek dle selektoru
  • disabled vypne teleportování

Na co by se mohli Teleporty využívat?

Co se stane, když na jeden selektor budeme mířit více teleportů?

Více root tagů

  • tzv. fragmenty
  • chceme určit kam se vloží atributy z rodiče

Proměnné v CSS

  • CSS funkce v-bind
  • zadáváme jméno proměnné

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>

V dokumentaci Vue najdete všechny stránky přeložené do Composion API.

Dokumentace

Díky dobré rozšiřitelnosti komponent vznikl různé projekty s různými komponenty pro Composion API, jako je např. VueUse.

Doporučení Vue týmu

  • Vue CLI → Vite
  • Vuex → Pinia
  • Vetur → Volar

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í.

Jaký je rozdíl mezí ref a reactive v Composition API?

Rybáři

Práce

Options API zůstává ve Vue a neplánuje se odstraňovat.

Jaké jsou nevýhody systému Options API?

Často kombinujeme Composition API s Options API, proč?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/