Vue.js – wprowadzenie. Podstawowe informacje.

W dzisiejszym wpisie chciałbym pokazać coś nowego. Będzie on zawierać podstawowe informacje o mało znanej, ale szybko zyskującej popularność, bibliotece – Vue.js.

Biblioteka ta pozwala na tworzenie interaktywnych komponentów na stronie WWW. Dzięki niej, można bardzo szybko stworzyć ‚lekką’ i prostą aplikację webową. Do tego, vue.js jest naprawdę proste do poznania. Jeżeli opanowałeś podstawy JS’a, nie będziesz miał żadnego problemu z rozpoczęciem pracy z Vue.

Czym jest Vue.js

Vue.js to biblioteka pozwalająca na tworzenie prostych składających, się z komponentów, aplikacji webowych opartych o architekturę MVVM (ModelView View Model). Posiada ona między innymi takie przydatne mechanizmy jak templateowanie kodu czy powiązywanie danych z elementami DOMu.

Ogromnym plusem vue.js jest to, że jest bardzo kompaktowy i intuicyjny. Nauka vue to świetny sposób aby wejść w świat aplikacji webowych, bez konieczności poznawania od razu takich olbrzymów jak na przykład Angular.

Vue to zresztą ciekawa alternatywa dla Angulara, kiedy potrzebujemy tylko podstawowych funkcjonalności. Czasem wielki, opasły framework to zbyt wiele, gdy chcemy wprowadzić na stronę tylko kilka interaktywnych elementów. W takim wypadku Vue.js nadaje się idealnie.

Instalacja Vue.js

W erze skomplikowanych build systemów i menadżerów paczek, sposobów na instalację biblioteki w projekcie jest wiele. Ja zaprezentuję, najprostszą z nich. Ręcznie ściągnę plik ze strony Vue i dodam go w tagu script do głównego pliku html. Takiego rozwiązania pewnie nikt się nie spodziewał 🙂 .

Cała biblioteka składa się na jeden plik (a przynajmniej te jej elementy, które będą mi potrzebebne). Pobrać można go z tej strony. Na początek radzę pobrać wersję development. Posiada ona trochę dodatkowego kodu, który sprawia, że ewentualne błędy pojawiające się w konsoli, będą dużo czytelniejsze.

Gdy mam już bibliotekę lokalnie, wrzucam ją do folderu lib w folderze projektowy. Od razu tworzę też folder src, w którym umieszczam pusty plik app.js, będzie on zawierał logikę aplikacji. Na koniec bezpośrednio w folderze projektowym tworzę plik index.html. Oto jego zawartość:

Tagi script dodaję na końcu elementu body. Ważna jest kolejność. Ponieważ mój kod będzie opierać się na bibliotece Vue, plik zawierający jej logikę, musi być dodany jako pierwszy.

Ponadto, wewnątrz body tworzę jeden div o id vueApp. W nim znajdować się będzie zawartość aplikacji tworzonej w Vue. Póki co jest on pusty.

Podstawowy używania Vue.js

Teraz kiedy wszystko jest już przygotowane, mogę zacząć korzystać z biblioteki Vue. Pierwszą rzeczą, którą trzeba zrobić, jest stworzenie nowej instancji Vue. W konstruktorze podaje się najważniejsze informacje o aplikacji. Ja na początek podam tylko jedną.

Do pustego pliku app.js dodaję następujący kod:

To jest podstawa podstaw. Aby zacząć korzystać z Vue, muszę najpierw wywołać konstruktor głównego obiektu Vue. W jego argumentach przekazuję obiekt, który zawierać będzie całą potrzebną logikę. Póki co ustawiam tam tylko jedno pole: el. Muszę to zrobić, aby aplikacja działała. Wartość tego pola to selektor do elementu, który zawierać będzie aplikację. Ja wskazuję mój div o id vueApp. Jednak może być to dowolny inny element, nawet body.

Teraz w pliku index.html dodam do vueApp nowy paragraf:

Wewnątrz dwóch kudłatych nawiasów wpisuję proste wyrażenie JS’owe. Gdy otworzę plik html w przeglądarce, zobaczę, że wyświetli się liczba dwa. Wewnątrz elementu zadeklarowanego jako aplikacja Vue, wszystkie wyrażenia zawarte w podwójnych kudłatych nawiasach, będą rozpatrywane jako wyrażenia JS. Bardzo fajne, ale samo w sobie nie jest to jakoś wybitnie przydatne.

Na szczęście Vue ma znacznie więcej możliwości. Czas powrócić do pliku app.js. Wewnątrz obiektu przekazywanego do konstruktora, dodaję nowe pole – data:

data zawiera w sobie kolejny obiekt. Wszystkie pola data, są dostępne bezpośrednio w aplikacji Vue. Mogę się do nich odwoływać po kluczach w kodzie HTML, wewnątrz kudłatych nawiasów:

Jak widać, nie muszę odwoływać się do pól poprzez obiekt data. Vue robi to za mnie. Oznacza to jednak, że tak samo jak el, nazwa data musi być zawsze taka sama.

Gdy odświeżę stronę z moją ‚aplikacją’. Zobaczę wyświetlającą się wiadomość, taką jaką ustawiłem w konstruktorze Vue. Robi się coraz ciekawiej, ale to jeszcze nie wszystko.

Zanim przejdę dalej, napiszę o jeszcze jednej przydatnej cesze Vue. Wspomniałem wyżej że dobrze nadaje się do templatowania htmla. Załóżmy, że chciałbym zmienić zawartość pola dog w taki sposób:

Moim zamiarem jest przełamanie linii po słowie ‚maja’. Na stronie niestety nie uzyskam takiego efektu. Pokaże się łańcuch znaków dokładnie taki sam jak zawartość pola dog. Ale jeśli zmienię jeden szczegół w pliku html:

Jeśli wyrażenie Vue umieszczę w trzech nawiasach, zawarty wewnątrz łańcuch znaków zostanie zinterpretowany jako kod HTML. I tak własnie wyświetli mi się na stronie. Czyli po słowie ‚maja’, linia złamie się. Warto pamiętać o tym, że mamy taką możliwość.

hello world z Vue.js

Ok teraz kiedy mamy już wszystkie podstawy, czas dodać do projektu mały zwrot akcji. Usuwam znacznik br. Tak wygląda ostateczna wersja pliku app.js:

Następnie wprowadzam drobną modyfikację do elementu div, zawierającego aplikację. Wewnątrz paragrafu znów odwołuje się do dog przez podwójne nawiasy i dodaję trochę tekstu po za nimi.

Do tego, pod paragrafem pojawia się nowy element. Tak wygląda ostateczna wersja diva:

Najważniejszy jest właśnie dodany input, a właściwie jego atrybut v-model. Ci którzy pracowali z Angularem, pewnie zauważą podobieństwo. Tak samo jak ng-model, v-model służy do powiązania wartości przypisanego pola.

Od teraz gdy zmienimy zawartość input, zmieni się wartość pola dog obiektu data. Wystarczy odpalić ten prosty przykład w przeglądarce i od razu zobaczymy o co chodzi. Może w tym przykładzie tego nie widać, ale powiązanie danych to bardzo potężna cecha.

Myślę, że ten prosty przykład przedstawia podstawowe zalety Vue. Warto pamiętać, że napisany przeze mnie JS to zaledwie parę bardzo prostych linijek kodu. To jednak dopiero początek, w kolejnych postach pokażę jak wykorzystać te mechanizmy aby stworzyć przydatne i ciekawe aplikacje webowe.

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