Vue.js: Tworzenie własnych komponentów

Vue.js 2.5.x

0:00Tą lekcją rozpoczynamy dział o komponentach i jest to jedna z najważniejszych

0:04rzeczy jeśli chodzi o pracę z nowoczesnymi aplikacjami webowymi i

0:09dlatego też Vue.js to wspiera. Chociaż to, co do tej pory widziałeś tym kursie

0:13to już mnóstwo rzeczy które przydadzą ci się w budowaniu różnej

0:17wielkości aplikacji, może prostych widgetów, na twoje strony internetowe. To

0:21dopiero komponenty dają nam niesamowitą moc, dlatego będę chciał ci w tej

0:25i w kilku kolejnych lekcjach pokazać na czym sprawa polega. Zauważ,

0:30że mamy przykład naszego counter'a, który mieliśmy wcześniej. On działa świetnie. Natomiast

0:34chciałbym go przerobić komponent, tak aby można było go wielokrotnie

0:38osadzać i choć ten konkretny przykład może nie jest najciekawszy

0:43jeżeli chodzi o wielokrotne użycie, to na nim doskonale będziesz mógł zobaczyć jak

0:47coś to już znasz, bo ten przykład zakładam, że razem ze mną przerobiłeś, przerobić

0:51na komponent i czym komponenty są. Więc przyjdziemy sobie do kodu. Jest

0:55to przykład w niezmienionej formie, tak jak mieliśmy go wcześniej. Natomiast będziemy go chcieli

1:00przerobić na komponent. Teraz pytanie. Czym jest komponent? Komponent jest

1:05to element HTML można powiedzieć własny, czyli

1:10do tej pory tutaj korzystaliśmy z elementów takich jak na przykład div, znamy je

1:14z języka html. Natomiast możemy utworzyć własny element

1:18i chciałbym go nazwać na przykład eduweb counter,

1:23otworzyć i zamknąć. W kolejnych lekcjach będziemy na nim jeszcze

1:27później pracować. Natomiast chcę kilka słów na ten temat powiedzieć. Ważne

1:32jest to, że my wciąż pracujemy na żywym DOM'ie, czyli ta

1:36templatka jest wczytana przez przeglądarkę, więc przeglądarka taki element zobaczy

1:40zanim Vue zdąży się wczytać i co ważne, nie jest to błędem, czyli

1:45dla przeglądarki ona nie rozumie tego elementu, ale wstawi go do drzewa DOM i nie

1:49będzie go specjalnie jakoś traktować. On będzie traktowany podobnie jak element div. Dlaczego jednak

1:54zrobiłem go tutaj z pauzą? Właśnie z tego powodu, że specyfikacja

2:00HTML i specyfikacja Custom Elements,

2:04jest coś takiego zakłada, że powinniśmy tworząc własne

2:08elementy poprzedzać je jakimś przedrostkiem i pauzą. Z tego powodu nigdy

2:12nie wejdziemy w konflikt z dzisiejszymi lub przyszłym i elementami specyfikacji

2:16HTML, czyli innymi słowy jak będą powstawać elementy takie jak kilka lat

2:20temu powstało na przykład section i tak dalej to na pewno nie będą one z żadnym

2:25przedrostkiem i pauzą są. Stąd jeżeli my będziemy swoje w ten sposób tworzyć nie

2:29będzie problemu. Natomiast co ciekawe to nie będzie dla nas miało znaczenia kiedy ta templatka

2:34nie będzie już żywa w drzewie DOM, ale kiedy będziemy z niej korzystali

2:38później jak się przekonasz przy pracy jeszcze z webpack'iem Vue CLI albo

2:42gdybyś całą tą templatkę zapisał w skrypcie lub w template string'u

2:46wtedy nie ma to do końca znaczenia. Niemniej jednak jest dobrą praktyką, aby nasze

2:50własne komponenty tworzyć w ten sposób. Okej, zatem mamy taki

2:54komponent wstawiliśmy go tutaj i pytanie co dalej, jeżeli odświeżę stronę to Vue mówi, że

3:00nie rozumie takiego customowego elementu jak edu counter, czyli widać

3:04że Vue sobie to próbowało sforsować, ale my jeszcze nie zarejestrowaliśmy żadnego komponentu.

3:08Zróbmy to zatem teraz. Zrobimy

3:12to tutaj i znowu można tak jak filtry czy dyrektywy tworzyć komponenty

3:17globalne, które będą działały w całej aplikacji lub lokalne,

3:21które będą działały tylko tutaj gdzie aplikacja je kontroluje. Na razie

3:25zrobimy sobie komponent globalny. W Vue component wpiszemy

3:29i podajemy jego nazwę będzie to edu counter i tutaj podajemy

3:33obiekt konfiguracyjny i wszystko co do tej pory już wiesz, czyli

3:37ten obiekt konfiguracyjny ci się przyda, dlatego że jest to nie ma dokładnie

3:41to samo z jedną bardzo istotną różnicą. Po pierwsze

3:46tutaj nie podajemy el, bo nie będziemy kontrolować konkretnego elementu

3:50tylko będziemy kontrolować elementy, które będą w templatce. Gdzie ta

3:54templatka jest zaraz zobaczysz, bo o ile tworząc taką instancję naszą

3:58templatką było to co ona kontroluje, o tyle tworząc komponent

4:03on potrzebuje osobnej templatki. Zatem potrzebujemy template

4:07i tutaj możemy podać albo hash i id jakiegoś skryptu

4:11w którym przechowujemy templatkę albo musimy ją tutaj wpisać sposób ręczny, więc ES6

4:16z użyciem template stringu, będzie można ją łatwo wpisać w ten sposób. Witaj, natomiast

4:23w zasadzie zamiast tego wpisanego ręcznie sting'u możemy

4:27tutaj wpisać coś dynamicznego na przykład message. Zaraz sobie do tego przejdziemy i teraz

4:32utworzyli byśmy data. Natomiast jedna kluczowa różnica

4:36jeżeli to zapisze i odświeżę to Vue nam o tym powie, jest taka, że tutaj obiekt

4:40data nie może być zapisany w ten sposób, dlatego że komponentów można tworzyć wiele,

4:44można będzie kilka razy wstawić ten komponent i wszystkie te komponenty przez

4:48to jak działa język JavaScript, dziedziczyłyby jeden obiekt data. Czyli jeżeli w

4:52jednym zmienił message, zmieniłby się we wszystkich. Tutaj nie było z tym problemu,

4:57bo new vue to zawsze była tylko jedna instancja. Tutaj komponentów

5:01może być wiele i z tego powodu data to musi być funkcja zwracająca obiekt i

5:05tutaj dopiero zwracamy obiekt. W ten

5:09sposób ten zwracany obiekt za każdym razem będzie nowy dla każdego nowego komponentu

5:13Vue wykona tę funkcje i tak właśnie działa JavaScript, że ten obiekt

5:17będzie unikalny i tak powinniśmy to robić, więc to jest kluczowa różnica i w

5:22tym obiekcie to co wpiszę to jest dokładnie to co wpisywaliśmy w data w tym

5:26miejscu. Natomiast wszystkie inne rzeczy jak computed i tak dalej możemy tutaj sobie dodawać

5:31normalnie już oprócz tego dlatego, że computed to zawsze są funkcje i nie

5:36będzie tam tego problemu. Wpiszmy message Witaj i po

5:40zapisaniu tego na naszej stronie to Witaj się pojawiło dwa razy i nasz

5:44komponent, zauważ, został podmieniony. Mamy H1 Witaj oraz H1

5:49Witaj dwa razy dokładnie to samo, a samo to edu counter nie istnieje,

5:53więc to nie jest nigdzie osadzone później w drzewie DOM. Niemniej jednak my

5:57będziemy chcieli coś zrobić coś innego, skoro nasz counter przerabiamy, to chciałbym wszystko

6:01co tutaj w nim było, zróbmy to w ten sposób wstawić

6:06sobie do tego komponentu, czyli to będzie jego template i tutaj

6:11robiąc taki template string, wszystkie rzeczy o których mówiłem ci wcześniej, tak

6:15naprawdę nie mają już znaczenia, czyli gdybyśmy tutaj osadzali inne komponenty one

6:19wcale nie muszą być tak jak tutaj z pauzą i wiele innych rzeczy z którymi

6:23mógł być problem, kiedy osadzaliśmy je tutaj w drzewie DOM, że przeglądarka mogła jej nie poprawnie

6:27sprasować. W takim template one już nie mają znaczenia. Okej,

6:32ja będę chciał na razie jeden taki edu counter tutaj wstawić. Natomiast, żeby to wszystko mogło

6:36teraz działać to to co mieliśmy tutaj w data wytnę i wstawię

6:40do data tego oto komponentu i zasadzie wszystkiego metody również,

6:45więc jeżeli zrobimy sobie coś takiego. Tutaj data w naszej instancji

6:49głównej nawet nie jest potrzebne. To powinniśmy mieć komponent,

6:53który powinien działać, okej widzimy, że coś jeszcze tutaj jest nie tak, więc przeczytajmy.

6:57Zgadza się. Super ważna rzecz. Otóż możemy

7:02mieć tylko jeden root element, a tutaj w tej templatce mamy dwa. Jeden i drugi, więc

7:06zawsze musimy to opleść w taki sposób żeby tutaj był tylko jeden główny

7:10element. Dlatego najlepiej jest tutaj dodać sobie na przykład takiego div'a, zobaczymy.

7:15No i teraz wszystko działa poprawnie, jeżeli kliknę start to powinno to

7:19działać dokładnie tak samo jak wcześniej, czyli stworzyliśmy sobie reużywalny komponent,

7:23który można w dowolnych miejscach wstawiać. Jak widzisz odliczanie się zakończyło,

7:28ale to co jest fajne. To teraz możemy sobie skopiować to drugi raz i jeden

7:33uruchomimy w tym miejscu drugi uruchomimy później i każdy z nich ma izolowany

7:37scope, czyli zakres tych zmiennych, które mają w data tych danych i każdy

7:41operuje na swoich własnych niezależnie. Pokażę ci jeszcze jeden ciekawy

7:45trick. Jeżeli chcielibyśmy odsunąć ten element, to możemy tutaj dodać

7:50sobie albo klasę, która potem zostanie dodana do elementu poniżej albo możemy

7:54normalnie przypisać style i co ciekawe wszystkie rzeczy, które robiliśmy do tej pory tutaj

7:58będą działali v-for, bindowanie i tak dalej. Natomiast jeżeli style bym

8:02tutaj dodał na przykład margin top 50 pikseli to

8:06ten element się odsunie, bo okaże się że te style będą przypisane do pierwszego

8:10elementu stempla, czyli dokładnie do tego div'a, w którym to wszystko opletliśmy. Taki

8:15ciekawy trik. Podobnie jeżeli klasy CSS przypiszesz to ona zostanie dodana tutaj. Nawet

8:19jeżeli element, który jest tutaj miałby już swoją klasę, zostaną one po prostu połączone

8:24w jedną. Okej i na sam koniec tej lekcji chcę ci jeszcze tylko pokazać

8:28jedną rzecz. Jak możemy stworzyć komponent lokalny, czyli jeżeli nie chcę żeby on w

8:32globalny, to mogę ten obiekt konfiguracyjny zapisać w jakiejś

8:36zmiennej. Możemy ją nazwać counter i przepisać tutaj teraz

8:40on już nie będzie działał poprawnie, ale wewnątrz instancji, gdzie chcemy korzystać z

8:44komponentu, tutaj ważne żeby jeszcze usunąć ten nawias, możemy zrobić coś

8:48takiego, że napiszemy tutaj components i będzie

8:54to obiekt w którym podajemy nazwy tagu z jakiego chcemy korzystać, czyli edu

8:59counter i dokładnie obiekt, który nas interesuje,

9:03czyli counter. W ten sposób mogę sobie zdefiniować jak się ma nazywać tag,

9:08który wewnątrz mojej aplikacji, czyli tutaj będzie używany i który

9:12komponent ma być do niego przypisany, czyli tutaj jest counter. Cały ten obiekt oczywiście mógł

9:16być wstawione też tutaj, ale lepiej to mieć na zewnątrz, będzie to można importować później i

9:20eksportować no i zobaczymy, to wszystko nam działa, co to ciekawe

9:25możemy tutaj przejść i to narzędzie nam to fajnie pokazuje, który zaznacza

9:29to ten będzie pod vm0 dostępny w konsoli i będę mógł sobie

9:33na nim coś podejrzeć. To są zatem podstawy tworzenia komponentów. Za

9:37moment będziemy je oczywiście rozszerzać o kolejną wiedzę, ale jak

9:41widzisz tak to działa, że możemy stworzyć globalne lub lokalne podajemy

9:45mu jego template i jego data jako funkcję zwracającą obiekt

9:49a później metody czy computed properties jest dokładnie tak samo jak robiliśmy to

9:53do tej pory.