Vue.js: Funkcja renderująca vs. szablon
Techniki Zaawansowane
5 godz. 11 min · Vue.js · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Zaawansowane techniki pracy z Vue.js
- Praca z wieloplikowymi komponentami
- Zarzadzanie stanem aplikacji z VueX
- Routing z uzyciem vue-router
- Praca z danymi z uzyciem axios
- Techniki walidacji formularzy
- Praktyczne projekty
- Masa przydatnych wskazówek
Kurs, który masz przed sobą, to kontynuacja wydanego wcześniej kursu Vue.js od Podstaw. W pierwszym kursie omówione zostały najważniejsze koncepcje pracy z Vue, a w tym materiale poruszamy już bardziej zaawansowane tematy. Przede wszystkim skupimy się na pracy z użyciem nowoczesnego workflow, co da nam niezwykłą swobodę tworzenia aplikacji internetowych. Jeśli zatem znasz już podstawy pracy z tym frameworkiem i chcesz wskoczyć na kolejny poziom wtajemniczenia, ten kurs jest zdecydowanie dla Ciebie. A co znajdziesz w materiale?
Zaawansowane koncepcje
Na początku zobaczysz, jak szybko tworzyć pliki startowe do nowej aplikacji z użyciem narzędzia vue-cli. Omówimy możliwość dzielenia kodu na wiele plików, tworzenia szablonów, a także wykorzystywania bezpośrednio funkcji renderującej, do której zamieniane są na etapie builda wszystkie szablony.Zobaczysz również czym są i jak pracować z komponentami funkcyjnymi i tzw. mixinami, które pozwolą reużywać raz napisany fragment kodu.
Zarządzanie stanem aplikacji z VueX
Przepływ informacji to bardzo ważny temat w każdej aplikacji internetowej. Vue oferuje kilka sposobów na to, aby komponenty mogły się ze sobą komunikować. Ich omówienie zaczniemy od najprostszych technik, które świetnie sprawdzają się w wielu przypadkach. Następnie rozszerzymy możliwości instancji Vue w ten sposób, aby wszystkie komponenty miały dostęp do scentralizowanego miejsca, gdzie przechowywany będzie stan aplikacji.Tam jednak, gdzie aplikacja wymaga zarządzania większą ilością danych jednocześnie, powyższe techniki mogą być niewystarczające. Z tego powodu, podobnie jak w innych frameworkach, Vue posiada oficjalny wzorzec oraz bibliotekę do zarządzania stanem aplikacji. Rozwiązanie to nazywa się VueX i w kursie zostanie ono dokładnie omówione. Zobaczysz zatem jak skonfigurować tzw. store, jak przechowywać w nim dane, jak je wyświetlać w widokach, aktualizować za pomocą tzw. mutacji czy pracować z nimi wykorzystując akcje. Przekonasz się, że początkowa większa ilość pracy, aby wszystko skonfigurować, w pewnym momencie zaczyna się opłacać.
Routing w aplikacji
Tworzenie nowoczesnych aplikacji typu SPA (Single Page Application) nie może się obejść bez zmian widoków. Dobrą praktyką jest, aby wraz z takimi zmianami, aktualizowany był również pasek adresu. Wykonanie takiego zadania umożliwiają nam tzw. routery. Vue posiada oficjalny dodatek o nazwie vue-router, który w tym kursie dokładnie omówimy.Zobaczysz jak dołączyć router do swojego projektu, a także jak konfigurować ścieżki. Poruszymy tematy takie jak generowanie odnośników, dynamiczne parametry, tworzenie zagnieżdżonych ścieżek czy nawigacja z poziomu kodu JavaScript. Dowiesz się również, jak tworzyć tzw. guardy, które umożliwią lub zablokują możliwość wyświetlania wybranego widoku, np. w zależności od tego czy użytkownik jest aktualnie zalogowany.
Praca z danymi z serwera
Trzecim, po zarządzaniu stanem aplikacji i wykorzystaniu routingu, komponentem, który niezbędny jest do tworzenia aplikacji napędzanych danymi, jest możliwość wysyłania zapytań HTTP.Tę czynność umożliwi nam bardzo popularna, acz niezależna od Vue biblioteka axios. Zobaczysz jak za jej pomocą pobierać i wysyłać dane. Aby jednak jak najwygodniej pracować z tym rozwiązaniem, połączymy axios z Vue, udostępniając tak naprawdę jej metody wewnątrz każdego komponentu.
Walidacja formularzy
W jednym z rozdziałów kursu podejmiemy temat walidacji formularzy. Zobaczysz jak z pomocą popularnego pluginu dla Vue, robić to w bardzo prosty sposób.Omówimy różne funkcje walidujące, które umożliwią sprawdzenie poprawności pól tekstowych, radio czy checkboxów. Zobaczysz jak w łatwy sposób wyświetlać komunikaty o błędach i warunkowo zmieniać wygląd pól. Nie zabraknie również informacji o asynchronicznej walidacji, która pozwoli nam na żywo sprawdzać czy wpisany adres email jest dostępny czy też nie.
Praktyczne projekty
Kurs ten oczywiście to nie tylko niezbędna teoria, ale także praktyczne przykłady. Aby jak najlepiej poznać omawiane techniki, wykorzystamy je do stworzenia ciekawych aplikacji.Pierwszą z nich będzie konfigurator produktu, który umożliwi użytkownikowi wybór podzespołów zamawianego komputera. Każdy taki wybór będzie wpływał na końcową cenę, która będzie na bieżąco aktualizowana. Po wybraniu wszystkich opcji, dane prześlemy na serwer. To projekt który pokaże Ci jak przechowywać dane z użyciem VueX, a także jak na ich podstawie wyświetlić widok i napisać logikę.Innym projektem, który wykonamy, będzie Quiz. To aplikacja, gdzie użytkownik odpowiadał będzie na serię pytań pobranych z serwera, a do wyboru będą 3 odpowiedzi. Po przejściu przez wszystkie pytania, wyślemy do serwera zapytanie, a ten w zamian zwróci nam listę poprawnych odpowiedzi. Dzięki temu pokażemy użytkownikowi, gdzie miał rację, a gdzie popełnił błąd. Aplikacja ta wykorzystywać będzie wszystkie najważniejsze techniki, tj. VueX, routing, a także Ajax.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które czują się już swobodnie w pracy z frameworkiem Vue. Jeśli zatem masz już solidną wiedzę podstawową lub przerobiłeś kurs Vue.js od Podstaw, to zdecydowanie jesteś gotów na poszerzenie swoich umiejętnośći w pracy z tym frameworkiem. Co ważne, doświadczenie w pracy z innymi frameworkami JavaScript nie jest tutaj wymagane, a jedyne co będzie bardzo pomocne, to znajomość nowej składni EcmaScript 6.
Vue.js 2.x.x
W tej lekcji, jak obiecałem, zerkniemy,
jak działa funkcja renderująca i czym się różni w stosunku do szablonu, więc uruchomiłem już czwarty
przykład npm start wystarczy wpisać po zainstalowaniu wszystkich zależności i przejdziemy sobie tutaj i
zobacz, mamy tutaj w głównej instancji funkcję renderującą. Dlaczego we wszystkich komponentach mamy
template, a tutaj mamy funkcję renderującą
Okazuje się że możemy w dowolnym komponencie nie korzystać z templatki, ale z funkcji renderującej
i ma to pewne zalety,
w niektórych okolicznościach. Będę chciał ci teraz o tym powiedzieć więc jeżeli przejdziemy do App, to mamy
tutaj template i pamiętasz jak pokazywałem ci kilka lekcji temu jak instalowaliśmy sobie Vue CLI i tworzyliśmy
nowy projekt, że tam było pytanie czy chcemy mieć Vue z kompilatorem templatek czy bez.
Ja wybrałem bez, bo mówiłem ci że templatki będą prekompilowane na etapie build'a, czyli taka templatka jak tutaj, jest analizowana
przez Vue i zamieniona na funkcję renderującą.
Czyli w momencie kiedy nasz kod dostarczamy później do przeglądarki, Vue nie musi już w locie po stronie
klienta renderować sobie takiej funkcji, czyli tworzyć funkcji z templatki, którą mamy tutaj.
Vue może od razu wykonać jakieś operacje, czyli otrzymuje dane i może wygenerować widok HTML. Jeżeli natomiast
chcielibyśmy na stronie internetowej móc bezpośrednio w drzewie DOM tworzyć sobie właśnie szablony Vue,
to musimy mieć wersję, również, z kompilatorem.
I teraz ta templatka jest zamieniona do funkcji renderującej, ale w jaki sposób taka funkcja mogłaby wyglądać,
ja ci to pokażę,
nie tutaj w aplikacji, ale zrobimy sobie to w komponencie HelloWorld, który jest dosyć prosty.
Jeżeli tutaj podamy templete to Vue loader, który jest tutaj skonfigurowany zamienia to na funkcję regulującą.
Ale gdybyśmy tego nie podali, to sami możemy taką funkcję stworzyć.
Możemy ją tutaj wpisać i normalnie podajemy funkcję, która otrzyma tak naprawdę createElement pod pierwszym
parametrem, ale przyjęło się w branży, że ten parametr nazywamy h,
dlatego tutaj, w tej głównej aplikacji jest to h
i zauważ, że tutaj jest po prostu funkcja strzałkowa w ECMAScript6, czyli to jest tak naprawdę odpowiednik funkcji,
którą ja teraz stworzę, ale zapisze ją w takim starszym standardzie, żebyś dokładnie widział, co się dzieje.
Czyli mamy funkcję, która pod pierwszy parametr otrzyma funkcję na podstawie której można tworzyć wirtualne
node'y, czyli węzły tego, tego wirtualnego obiektowego modelu dokumentu.
Mam nadzieję, że wiesz jak działa virtual DOM, ja w kursie podstawowym Vue.js to tłumaczyłem.
Czyli wszystkie te elementy tutaj, tak naprawdę są zamieniane na i ich odpowiedniki Virtual DOM.
I spróbujmy teraz je odzerować za pomocą tej funkcji. Zawsze musi być jeden nadrzędny element.
Tutaj jest to div, więc najpierw zrobimy return,
jest to bardzo ważne.
To jest odpowiednik createElement, tak jak Ci powiedziałem, jako pierwszy parametr,
tutaj możemy podać nazwę tagu, więc jeżeli byśmy tutaj wpisali div, to stworzymy sobie taki oto element
div,
więc ja wykomentuję tę templatkę i jako drugi parametry podam tak naprawdę jego tekst. Napiszemy sobie tekst i zapisze,
bo chcę Ci pokazać, co tutaj się stanie.
Zobacz, mamy diva, który w środku ma tekst, ale co ciekawe, jako drugi parametr możemy podać również obiekt
konfiguracyjny, w którym podamy props i wiele innych rzeczy.
Zaraz do tego wrócimy.
A jako trzeci, możemy podać tablicę z dziećmi tego elementu, czyli chciałem utworzyć dwoje dzieci, czyli
h1 i p.
Zatem tutaj w zasadzie nawet chyba od razu, możemy tę tablicę podać, jeżeli nie podajemy drugiego parametru.
Za pomocą funkcji h, utworzę sobie element h1 i będę chciał, żeby jego tekst to było this
następnie heading,
czyli będzie to dynamiczne i teraz po przecinku za pomocą funkcji h, utworzę drugi element i będzie to
paragraf i wpiszemy this.message i sprawdźmy, czy to nam zadziała.
Okazuje się, że tak.
Jest to dynamiczne, bo gdybym tutaj przeszedł i coś edytował, zobacz, jest to na stronie odzwierciedlane.
Czyli można powiedzieć, że teraz za pomocą funkcji renderującej stworzyliśmy swój własny widok.
Albo inaczej mówiąc potem ta templatka, ładna, dla nas, czytelna.
Tak naprawdę jest zamieniona, na mniej więcej taką funkcję renderującą.
I co ciekawe wszystkie rzeczy, które my tutaj możemy podać czyli np. onclick, można również tutaj odzwierciedlić,
czyli jeżeli na h1 chciałbym kliknięcie, to podaję jako drugi parametr taki obiekt konfiguracyjny i
tam można podać coś takiego jak on i następnie można tutaj podać obiekt i też będzie click i też podamy
metodę, która nas interesuje, czyli w zasadzie tutaj można wszystko zrobić i znajdziesz to w dokumentacji Vue,
ale nie tak bardzo często jest nam to potrzebne, więc ja nie będę tak bardzo się w to zagłębiał.
Natomiast jeszcze na koniec, chciałbym ci krótko powiedzieć, kiedy może się nam przydać właśnie taka funkcja
renderująca, bo mógłbyś się nad tym zastanawiać.
Otóż wyobraź sobie, że ten nasz komponent HelloWorld, który tutaj mamy, przyjmuje taką pro, którą moglibyśmy
przekazać która będzie nazywała np. headingTag, powiedzmy w ten sposób i powiedziałbym, że chce żeby
to była h2.
I teraz tutaj mógłbym przyjąć props i jedną z tych props,
to byłoby headingTag i gdybyśmy tutaj nie mieli tej funkcji renderującej, zrobimy to w ten sposób, tylko mieli
templatkę, to do tej prob, mógłbym się odwołać
tutaj wewnątrz, w ten sposób, this.headingTag.
Zobaczymy czy to zadziała. Jakiś błąd się tutaj pojawił.
Być może przez ten przecinek, ok i w zasadzie nie tutaj nie powinno być this, w templatce oczywiście nie korzystamy z this, teraz
to powinno zadziałać, jednak nie, tutaj przed data jeszcze jest problem. Tutaj brakuje przecinka.
Ok, powinno być teraz w porządku i zauważ, że ta h2 jest tutaj podstawiona.
Ale teraz pytanie, czy ja jestem w stanie tą h2 podstawić w tym miejscu i wiemy, że tego się zrobić
nie da, więc jeżeli ja chciałbym tworzyć sobie komponent, który dynamicznie będzie takieś tagi tworzył, to nie
mogę tego zrobić z użyciem templatki. Jest to jedno z ograniczeń Vue.
Natomiast tutaj już mógłbym to zrobić.
Zauważ, bo mogę tutaj, gdzie powiedziałem h1 tak naprawdę powiedzieć this.headingTag
I kiedy to zapiszemy, powinno nam to tutaj zadziałać, teraz musimy tu jeszcze postawić przecinek, z powrotem
i okaże się, że ten element, teraz jest h2, a nie h1, czyli jeżeli będziesz chciał w jakiś sposób,
dynamicznie generować sobie tag'i czy jakąś listę itd., to możesz stworzyć funkcję renderującą.
Zapamiętaj, że zwracamy stąd jeden główny element, jako drugi parametr można mu podać obiekt, w którym będzie
jego konfiguracja, czyli na przykład jakie props przyjmuje i czy w zasadzie jakie props powinny być do niego
przekazane itd.
A później tablica z jego dziećmi.
Oczywiście każdy z tych dzieci, jak tutaj sobie tworzymy, również może zawierać kolejne dzieci w sobie.
Więc to jest bardzo ważne i mniej więcej na taki zapis zamieniane są, tworzone przez nas templatki.
Ja to kliknięcie może tutaj usunę i pozostawie to w takiej formie, w tej lekcji i mam nadzieję że dobrze
zrozumiałeś.
Nie jest to coś, do czego będziesz sięgał bardzo często, ale dzięki temu teraz już wiesz, co dzieje się
w tym miejscu.
Na koniec może jeszcze jedna ważna rzecz.
Zauważ, że do tej funkcji h, jako pierwszy parametr przekazałem nazwę tagu,
ale okazuje się, że tam można przekazać również cały komponent, czyli jeżeli komponent był zaimportowany,
to możemy go również przekazać i ten komponent zostanie wyrenderowany.
A więc ta główna instancja, nie ma jakby swojej templatki, ale ma funkcję rednderującą i mówi, co ona zwraca.
Więc, co tak naprawdę powinno zostać w miejscu App wyrenderowane.