Vue.js – wprowadzenie. Pierwsza aplikacja – część druga.

Od ostatniego razu, trochę popracowałem nad moją aplikacją napisaną z użyciem Vue.js. Muszę przyznać, że praca z tą biblioteką daje mi dużo radości 🙂 .

W aplikacji, mogę teraz odhaczać te elementy, które uznam za wykonane. Ten dodatek nie jest może specjalnie duży, ale do jego wprowadzenia użyłem nowych mechanizmów Vue – filtrów. A o to własnie chodzi żeby nauczyć się czegoś nowego.

Pisanie pierwszej aplikacji w Vue js

W strukturze projektu nic się nie zmieniło. Katalogi i pliki wciąż rozmieszczone są w taki sam sposób. Wszystkie zmiany zaszły w plikach app.js oraz index.html. Jednak ważniejsze pojawiły się w tym drugim.

Aby zmiany wprowadzone w aplikacji działały jak trzeba musiałem zmienić Model Widoku. Oto jak wygląda aktualna wersja app.js:

Przede wszystkim, do tablicy todos dodałem dwa przykładowe tudusy. Przy okazji, od razu widać, że zmieniła się trochę ich struktura. Oprócz pól name i editing, posiadają teraz pole complete. Przechowuje ono wartość boolowską, będącą informacją o tym czy dane zadanie zostało już wykonane czy jeszcze nie.

Siłą rzeczy zmieniła się też metoda dodająca nowe tudusy. Teraz elementy te, mają domyślnie pole complete ustawione na false.

Oprócz tego, do obiektu methods, doszła nowa metoda: changeCheck. Będzie ona wywoływana, gdy zmieni się stan checkboxa w widoku. W argumencie metoda ta otrzymuje referencje do konkretnego zadania. Jeżeli wartość jego pola complete jest równa true, zmienia się na false. W przeciwnym wypadku dzieje się na odwrót.

To wszystkie nowości w modelu widoku. Więcej zmian zaszło w samym widoku, czyli w pliku index.html. Wkleję tylko element div, do którego dodaję aplikację Vue. Reszta kodu jest identyczna jak ostatnim razem.

Teraz w aplikacji znajdują się dwie listy. Pierwsza z nich to praktycznie to samo co w ostatniej wersji, z kilkoma drobnymi (ale ważnymi!) zmianami. Druga lista jest nowa i pokazywać będzie ona tylko wykonane elementy. Ta lista ma znacznie mniej opcji.

Skupię się jednak na zmianach wewnątrz pierwszego elementu ul. Kiedy te będą jasne, mechanizmy drugiego będą oczywiste.

W pierwszej liście pojawiły się dwie duże zmiany. Do wnętrza elementu li doszedł jeden nowy element: input typu checkbox. Dodałem go na samej górze li, tak aby pojawiał się przed nazwą zadania. Wartość atrubutu checked tego elementu równa jest aktualnej wartości complete obiektu todo, któremu odpowiada. Do tego przy checkboxie użyłem dyrektywy v-on:change. Za każdym razem, gdy zmieni się stan checkboxa wywołana zostanie funkcja, którą tu przypisałem. Będzie to oczywiście checkChange, o której pisałem wyżej. W ten sposób użytkownik może manipulować stanem tudusa.

A teraz ta ważniejsza zmiana. Do dyrektywy v-for dodałem filtry. Filtry to mechanizmy wbudowane w bibliotekę, wbrew temu co sugeruje nazwa służą nie tylko do filtorwania informacji 🙂 Można używać ich zarówno do kolekcji (czyli razem z dyrektywą v-for, tak jak robię to tutaj) jak i do zwykłych wpisywanych z widoku danych. W tym pierwszym wypadku filtr może służyć do filtrowania lub modyfikacji danych. W drugim, tylko do modyfikacji.

Aby dodać do widoku filtr, wystarczy postawić w odpowiednim miejscu symbol pipe ( | ) i podać nazwę filtra plus ewentualne parametry.

Wracając do dyrektywy v-for w pierwszej liście mojej aplikacji. Dodałem tu dwa filtry. Pierwszy, filterBy, służy do sortowania danych i można używać go tylko z kolekcjami. false in ‚complete’, oznacza, że dyrektywa v-for, pokaże tylko te elementy, które w polu complete mają wartość równą false. I już, to takie proste :). Drugi filtr OrderBy, służy do sortowania danych. Ja ustawiłem tu sortowanie po zawartości pola name. Nie liczyłbym aby JS posortował to jakoś rewelacyjnie, ale na potrzeby prezentacyjne nadaje się ok 🙂 .

Filtry przypisywać można również do wartości nie będących kolekcjami. Widać to w elemencie span, znajdującym się wewnątrz li. Do pobieranej nazwy tudusa, dodaję filtr capitalize. Sprawia on, że pierwsza litera pobieranej wartości zamieniana jest na wielką.

I to już prawie wszystko. Druga lista pojawiająca się w aplikacji, filtrowana jest tak, że pokazuje tylko wykonane zadania. Jeśli odpalimy tę aplikację i zaczniemy klikać checkboxy przy elementach listy, zobaczymy jak ‚przeskakują’ między obiema listami. Prawda że fajnie?

Na dziś to wszystko. Jeżeli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem :).

5 thoughts on “Vue.js – wprowadzenie. Pierwsza aplikacja – część druga.”

  1. Cześć,
    Po pierwsze – dzięki za przygotowanie kursu. Fajna sprawa 🙂

    Po drugie, z tego co udało mi się zorientować to w Vuejs 2.0 (z której korzystam przerabiając ten kurs) zostały usunięte wbudowane filtry, o których piszesz 🙁 Żeby skorzystać np z filterBy muszę sobie samemu zdefiniować jego działanie.
    https://github.com/vuejs/vue/issues/2756

  2. Info dla uczących się z tych wpisów: w vue.js 2.x nastąpiły zmiany np.
    1. by pokazać checkbox zaznaczony/odznaczony należy w htmlu zrobić tylko tak:

    2. by filtrować po toodusach wykonanych i nie należy w app.js zrobić taki wpis:
    computed: {
    completeTodos: function() {
    return this.todos.filter(function (todo) {
    return todo.complete === false;
    })
    },
    noCompleteTodos: function() {
    return this.todos.filter(function (todo) {
    return todo.complete === true;
    })
    }
    },

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *