Kurs Vue.js krok po kroku – Obliczone właściwości

Dzisiaj zajmiemy się „obliczonymi właściwościami” („computed properties”) (coraz trudniej jest mi tłumaczyć te angielskie terminy, czasami zastanawiam się czy jest sens).

Kiedy przekazujemy zmienną do widoku możemy na niej wykonywać jakieś proste akcje. Dla przykładu:

Póki to coś prostego i jednorazowego to pół biedy. Ale kiedy tylko zaczniemy mieć bardziej skomplikowane wymagania albo będą one potrzebne w wielu miejscach aplikacji to takie działanie staje się mało rozsądne. I tu właśnie z pomocą przychodzą „computed properties”.

Być może spotkałeś się już z taką konstrukcją w innych językach czy bibliotekach. To nic innego jak typowy „accessor” tudzież „getter”. Definiujemy jakąś funkcję, która zwraca nam jakieś dane i do niej się odwołujemy w szablonach.

Sprawdźmy jak to działa na przykładzie, przy okazji wykorzystamy umiejętności z poprzednich odcinków. Zróbmy licznik kliknięć w button, przy czym nadajmy każdemu kliknięciu podwójną wartość.

Jeszcze lepiej widać to na klasycznym przykładzie z zadaniami do wykonania. Mamy listę zadań ze zmienną completed = true/false. Wyświetlamy je w pętli i do ukończonych/nieukończonych podstawiamy funkcję, która zwraca te dane aczkolwiek już przefiltrowane.

I teraz najfajniejsza rzecz we Vue.js. Wystarczy, że dostawimy checkboxa z completed = true/false i teraz działanie na nim w „real-time” powoduje przeskakiwanie zadań do odpowiedniej grupy.

Jedna dyrektywa.

Magia.

Prostota.

Vue.js.

Subskrybuj kanał na YouTube

Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Materiał pojawi się w tym miejscu w ciągu najbliższych 2 tygodni. Nie chcesz przegapić? Subskrybuj kanał na YouTube!

Kurs Vue.js krok po kroku

  1. Wprowadzenie i hello world
  2. Chrome DevTools
  3. Warunki i pętle
  4. Zdarzenia i metody
  5. Przypisywanie atrybutów
  6. Obliczone właściwości
  7. kolejne
  8. odcinki
  9. wkrótce

Przede wszystkim admin, potem webdeveloper choć kiedyś było odwrotnie. Obecnie Full Stack Engineer, CTO i System Architect. Po godzinach fan dobrych seriali, których nigdy nie ma czasu obejrzeć. Kawożłop. Koneser prawdziwego piwa. W czasie pomiędzy kontuzjami biega.

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL