Vue.js – wprowadzenie. Pierwsza aplikacja.

W ostatnim poście przedstawiłem podstawy korzystania z biblioteki Vue.js. Dziś korzystając ze zdobyteh wiedzy napiszę pierwszą, bardzo prostą aplikację.

Oczywiście, samo wiązanie danych z widokiem, nie wystarczy aby zbudować apkę. Dlatego dojdzie dziś trochę nowych informacji, ale nie wiele. Mam nadzieję, że przedstawienie Vue na przykładzie, jeszcze bardziej uwypukli możliwości tej skromnej biblioteki.

Vue js pierwsza aplikacja

Jaką aplikację napiszę na początek? Będzie to klasyczny wybór – narzędzie do zapisywania rzeczy do zrobienia czyli tak zwany „Todo” 🙂 .

Struktura projektu wygląda tak jak ostatnio. W głównym katalogu umieszczam dwa podkatalogi: lib oraz src. Wewnątrz pierwszego znajduje się kod biblioteki Vue, drugi katalog zawiera jeden plik: app.js. Do tego, w głównym katalogu znajduje się jeszcze index.html.

Zanim przejdę do budowania struktury aplikacji, przygotuję Model Widoku. Kod odpowiedzialny za tę część aplikacji znajduje się w pliku .js. Oto jak wygląda jego zawartość:

Najpierw tworzę nową instancję obiektu Vue. Konstruktor jako argument otrzymuje obiekt ze wszystkimi potrzebnymi danymi. Do tej pory w obiekcie tym dodawałem dwa pola el i data. Tym razem pojawi się jeszcze jedno: methods. Jak łatwo się domyślić, będzie ono zawierało funkcje używane w widoku aplikacji

Jeśli chodzi o element, do którego wstrzyknę moją aplikację, będzie to, jak ostatnio, div o id vueApp. Pole data zawiera dwa obiekt z dwoma elementami: todos oraz currTodo. Pierwsze to tablica, w której zamieszczane będą informacje o wszystkich pozycjach z listy rzeczy do zrobienia. Drugie pole potrzebne jest do połączenia widoku z informacją o nowo tworzonych ‚tudusach’.

Warto teraz wspomnieć o tym jak wyglądać będzie struktura elementów tablicy todos. Będą to obiekty zawierające dwa pola: name oraz editing. Pierwsze to łańcuch znaków – nazwa tudusa, drugie zawierać będzie wartość boolowską mówiącą o tym czy dany tudus jest aktualnie edytowany czy nie.

Ostatni element Modelu Widoku to methods. Zawiera on aż cztery metody. Pierwsza z nich to addTodo. W jej wnętrzu tworzony jest nowy obiekt todo. Jego nazwa równa jest aktualnej wartości pola currTodo. Pole editing, domyślnie ustawione jest na false. Warto zwrócić uwagę, że do elementów obiektu data, odnoszę się poprzez this. Wszystko tak jakby dzieje się w scopie instancji głównego obiektu Vue.

Kolejne trzy metody działają bardzo podobnie. Wszystkie jako argument otrzymywać będą konkretny element listy todos. Najpierw pobieram index tego elementu w tablicy a następnie w zależności od metody, wycinam go z tablicy, lub ustawiam wartość jego pola editing, na true lub false.

Teraz kiedy Model Wiodku jest już gotowy czas przejść do konkretnego widoku, czyli pliku index.html:

Wklejam całą zawartość pliku, tak aby każdy mógł uruchomić go u siebie, jednak najważniejszym elementem jest zawartość diva o id vueApp.

Pierwszą rzeczą, która pojawia się w jego wnętrzu, jest lista ul. W niej wyświetlane będą wszystkie tudusy. Jednak w widoku deklaruje tylko jeden element li. To dlatego, że chce aby były one generowane automatycznie. Osiągam to dzięki Vue i dyrektywie v-for. Dla użytkowników Angulara ten fragment może wydawać się znajomy.

Do dyrektywy przekazuję wartość todo in todos. Oznacza to, że element li zostanie wklejony do widoku tyle razy, ile obiektów zawiera lista todos. Do tego mogę odnosić się do każdego z nich poprzez zmienną todo.

Robię to od razu wewnątrz li. W elemencie span wstawiam tekst, który wyświetlać będzie zawartość pola name. Do tego w spanie używam dyrektywy v-if. Pozwala ona na warunkowe wyświetlanie danego elementu. Nazwa tudusa widoczna będzie tylko wtedy jeżeli wyrażenie wpisane w dyrektywę v-if, będzie prawdziwe. W tym wypadku, sprawdzam po prostu zawartość pola editing aktualnego elementu listy todos. Jeżeli dany element będzie edytowany nie zobaczymy jego nazwy.

Zamiast tego, widoczny będzie kolejny element, czyli tekstowy input. Dzięki dyrektywie v-bind Jest on związany z polem name, aktualnego tudusa. Więc zmiana we wnętrzu tego pola tekstowego, zmieni również ten konkretny kawałek danych.

Następnie do elementu li dodaje kolejne trzy elementy input. Tym razem są to jednak przyciski. One również widoczne są tylko pod konkretnymi warunkami. To co jest nowe to dyrektywa v-on:click, przypisana do każdego z nich. Jej wartość to nazwa funkcji z Modelu Widoku. W wyniku tego przypisania, gdy użytkownik kliknie w któryś z przycisków, wykonana zostanie odpowiednia metoda. W ten banalnie prosty sposób mogę manipulować każdym tudusem z osobna. W połączeniu z pierwszym elementem input, użytkownik może bez problemu edytować i usuwać pozycje na liście.

Jednak na początku lista jest pusta. Najpierw trzeba coś do niej dodać. Do tego służą dwa elementy input znajdujące się pod spisem tudusów. Pierwszy z nich to pole tekstowe, które powiązane jest z polem currTodo z modelu widoku. Drugi input to przycisk, wywołujący metodę addTodo.

W przycisku używam jednak jednej nowej dyrektywy: :disabled. Jako jej wartość przypisuję wyrażenie JSowe. Jeżeli zwraca ono true, przycisk nie będzie aktywny. W tym wypadku sprawdzam, czy pole currTodo nie jest puste. W ten sposób nie dodam do aplikacji tudusa bez nazwy.

I to cała aplikacja. Całość zamyka się w kilkudziesięciu linijkach kodu. Prawda, że bardzo prosta do napisania? Zachęcam do uruchomienia tego kodu u siebie i spróbowania dodania różnych zmian. Aplikacja jest już całkiem potężna, ale wciąż można wiele w niej udoskonalić.

Moim kolejnym krokiem, będzie dodanie filtrów, pozwalających na pokazywania tylko tych elementów, które akurat interesują użytkownika. Na szczęście Vue posiada, naprawdę fajne wbudowane mechanizmy pozwalające na szybką implementację takiej funkcjonalności.

Jednak 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 :).

Jedno przemyślenie nt. „Vue.js – wprowadzenie. Pierwsza aplikacja.”

  1. Bardzo fajny przykład zastosowania aplikacji 🙂 Już kiedyś widziałem tę bibliotekę i zastanawiałem się jakie może mieć ona zastosowanie. Tak jak pisałeś może być ciekawą alternatywą dla kobył takich jak Angular.

Dodaj komentarz

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