Vue.js: Tworzenie własnego komponentu

Vue.js 2.5.x

0:00Okej, jesteśmy w kolejnej lekcji i tutaj znajoma

0:04już dla nas aplikacja, czyli counter, który przygotowaliśmy wcześniej. Będę chciał go

0:08przepisać z użyciem tego nowoczesnego workflow i pokażę ci jak możemy to

0:12zrobić i że rzeczywiście ma to wiele swoich zalet. Sprawdźmy czy tylko

0:16to wszystko działa, okazuje się że jak najbardziej jest w porządku, więc

0:21mamy to wszystko w jednym pliku. Ja chcę przejść teraz do katalogu

0:2652 i tutaj wykonaj u siebie Vue init webpack

0:30lub skorzystaj z plików źródłowych do tego kursu. Ja już to zrobiłem i tutaj do tego katalogu

0:35skopiowałem właśnie ten conter żebyśmy się mogli nim posiłkować, więc pozostało

0:39nam uruchomić npm run dev, żeby uruchomić serwer i powinno

0:43to wszystko tutaj się skompilować i tutaj możemy odświeżyć. Mamy tę startową

0:47aplikację. Natomiast ja będę chciał się jej teraz pozbyć, przejdźmy do katalogu 52

0:52i od razu sobie usuniemy część rzeczy, assets jest nam

0:56zbędne. Chcę usunąć wszystko to co będzie nam po prostu przeszkadzać, components

1:00Hello World usuwam okej i mamy

1:05tutaj app. Będę chciał Większość rzeczy tutaj usunąć, w zasadzie usunę

1:09wszystko. Zmienię sobie tutaj tylko indentację na

1:134 spacje, okej i mamy tutaj main i jeszcze

1:17jedna rzecz, o której ci nie powiedziałem w lekcji poprzedniej, bo być może zastanawiasz się

1:21gdzie jest jakiś główny plik html'owy, do którego to wszystko jest wczytywane, bo tutaj

1:25ta główna aplikacja ten główny plik mówi, że jego elementem

1:29w drzewie DOM będzie app i pytanie gdzie to jest. Jest tutaj główny plik w tym

1:33katalogu index.html i tutaj właśnie to app będzie podmienione. Co

1:37ważne cały ten div, on będzie podmieniony, a nie do niego będzie coś wstawiane. W tym

1:42miejscu zostaną przez webpack'a automatycznie załadowane skrypty, tutaj style

1:46i tak dalej, więc nie musimy się tym martwić, ale ten plik możemy sobie oczywiście zmodyfikować.

1:51No i ja chciałbym to teraz zrobić. Przejdziemy sobie do naszego counter'a. Tutaj

1:55mamy cały nasz kod. Style pozostawię w ten sposób, nie będziemy

1:59z użyciem webpack'a ich importować, okej. Skopiuję

2:03to wszystko i wstawiam do pliku index, w to miejsce. Natomiast

2:07teraz będę chciał się sukcesywnie pozbywać pewnych rzeczy. Po

2:11pierwsze nie potrzebujemy skryptu Vue, bo on jest zainstalowany dla nas z użyciem npm

2:16już automatycznie. Reszta może tutaj pozostać, zmienimy sobie tylko nazwę

2:20na 52 i będziemy chcieli się powoli pozbywać tych rzeczy,

2:24czyli naszą templatką dla aplikacji było wszystko to co widzisz w tym

2:28miejscu, czyli w zasadzie teraz ja chciałbym to wyciąć, a wstawimy

2:33sobie tutaj tylko div'a app, bo on jest konieczny po to, że kiedy

2:37webpack-dev-server to wszystko uruchomi i to do tego div'a app zostanie

2:41wczytane właśnie to, co jest z tym miejscu, czyli wyrenderowana templatka zaimportowana

2:45z pliku app, który jest tutaj, ale ważne żebyśmy na stronie w tym

2:49pliku mieli właśnie id, czyli Vue będzie kontrolować wszystko, co będzie w tym elemencie, więc

2:54przejdźmy do tego app, tutaj i od podstaw pokażę ci,

2:58jak tworzy się takie jednoplikowe komponenty. Po pierwsze tworzymy element template i

3:02w nim będziemy stawiać wszystko. Drugim elementem będzie script, gdzie będzie

3:07logika i możemy stworzyć jeszcze style, ale style nie będą nam na razie potrzebne. Jeszcze

3:12będziemy później z nich korzystać, ale na razie nie i całą logikę czy

3:16całą templatkę naszej aplikacji wklejam w to miejsce, okej i tutaj

3:21nie ma znaczenia, że identyfikator to też jest app, a że drugi jest taki na stronie, bo

3:25to zostanie w całości zamienione, ale tutaj nie musi być app. Możesz to nazwać jak tylko chcesz,

3:29może tutaj w ogóle nie być identyfikatora. Pamiętaj jednak, że w templatce musi być

3:33jeden root element, czyli ten musi być jeden, nie moglibyśmy mieć obok

3:37siebie form tych br'ek i edu counter. Okej, czyli coś tutaj już

3:41powiedzmy ma sens. Wstawiliśmy sobie to w to miejsce, ale jak zapisze

3:45to będzie nam generowało masę błędów, jeżeli tutaj spróbujemy odświeżyć. Vue nam te

3:50błędy pokazuje, oczywiście tutaj z Vue w wersji developmenckiej, więc wszystkie błędy

3:54są wyświetlane. Natomiast błędy pewnie się domyślasz skąd się biorą. Nie

3:59mamy tutaj init value, nie mamy wielu innych rzeczy, bo musimy sobie je dodać, więc

4:03jak to zrobić. Przejdźmy do tego miejsca, gdzie była główna aplikacja, to jest

4:07ta instancja i spróbujmy wszystko stąd skopiować, a tutaj

4:11usuniemy, bo ten plik nie powinien mieć tego kodu, który się tutaj znajduje. Zaraz

4:16go usuniemy w całości i ten obiekt wstawiamy

4:21w to miejsce i eksportujemy go z tego pliku jako Default, Export

4:25Default w ten sposób i to oznacza, że w pliku, w którym

4:29importujemy app vue, czyli tutaj, będzie

4:35zaimportowany jakby ten komponent app przepuszczony jeszcze przez Vue loader, aby odpowiednio

4:40templatki były skompilowane i tak dalej, ale w ten sposób byśmy to robili. Z tym, że

4:44teraz już nie będzie el, bo jeżeli tworzymy komponenty, czyli pliki z rozszerzeniem Vue i nie

4:48podajemy do jakiego elementu mają być zamontowane, dokładnie tak samo jak robiliśmy z komponentami. Pamiętasz,

4:53że tylko główna aplikacja była gdzieś podmontowana, a komponenty miały

4:58swój template, w który wstawialiśmy tutaj pisząc po prostu właściwość template. Teraz ten

5:02template znajduje się po prostu tutaj w osobnym elemencie, który ma ładny syntax highlighting

5:07i tak dalej, więc to usuwamy. Data, z uwagi na fakt, że tak naprawdę

5:11my teraz jesteśmy w komponencie, to musi być funkcja, więc to musi być funkcja,

5:15która zwraca taki obiekt, pamiętaj. Dokładnie

5:19ta sama zasada, która była przy komponentach. Natomiast z uwagi na fakt, że jesteśmy

5:23w EcmaScript6 tak naprawdę, czyli webpack będzie nam kompilował ten kod, to

5:27mogę stworzyć krótszy zapis i to jest dokładnie to samo, zwracamy

5:31sobie stąd data, methods i components pozostaje

5:36bez zmian. Natomiast teraz jeżeli tutaj mówimy że pod edu counter ma być komponent counter

5:40to nie istnieje, więc będzie błąd. Skąd my to możemy tutaj wziąć. Otóż komponenty

5:44będziemy chcieli sobie zaimportować, bo co my teraz zrobiliśmy. Wszystko

5:48zrobiliśmy w ten sposób, żeby tutaj nie było błędów, bo mamy in value, mamy

5:53wszystkie te rzeczy, ale nie mamy komponentu, więc tutaj możemy zrobić import, w EcmaScript6

5:58i będę chciał sobie zaimportować counter from i ścieżka relatywnie

6:02do tego pliku app do katalogu komponent, gdzie go utworzymy, to ten

6:06sam katalog, czyli kropka slash components i następnie

6:11counter. Nie musimy podawać rozszerzenia vue, ale można

6:15to robić i zaimportujemy sobie to, co ten plik będzie eksportował jako default

6:20i zapiszemy pod nazwą counter, którą przekażemy w to miejsce, więc teraz musimy utworzyć taki

6:24plik, czyli katalog 52 src components

6:28counter vue. W nim

6:32znowu będzie template, ale to co ważniejsze to będzie script i export default

6:39i tutaj będzie obiekt. Jaki obiekt zapytasz. Przejdziemy

6:43sobie do tego pliku index, który mieliśmy i cały nasz komponent, który jest w tym miejscu, ja

6:50stąd zabieram i z tym samym możemy już usunąć to, co tutaj było, a

6:54stąd będę go po prostu eksportował, z tym

6:58że teraz on nie będzie miał template podany w ten sposób i też by nam to nie zadziałało, bo pamiętasz

7:03już pewnie poprzedniej lekcji, że wybrałem wersję Vue bez kompilatora templatek i to

7:07by nam nie zadziałało, ale kompilator templatek działa na tych templatkach, bo jest załadowany jako

7:11osobny w ogóle loader, więc to sobie musimy wyrzucić, ale wycinając,

7:17tutaj data od razu już mamy zrobione tak jak powinno być, w komponencie

7:21wszystkie inne rzeczy są w porządku, nic nie musimy zmieniać i templatkę umieszczamy

7:25w tym miejscu, okej.

7:29No i teraz skoro go wyeksportowaliśmy, w app vue go zaimportowaliśmy,

7:33można go tutaj przekazać i to nam powinno w jakiś sposób

7:37już działać. Widzimy, że pojawia się jakiś błąd, warto sobie tutaj przeczytać,

7:42fajnie błędy są wyświetlane, również w konsoli, bo on będzie podobny. Widzę, że

7:46gdzieś zabrakło przecinka, dokładnie tutaj, okej to

7:50się odświeżyło. Wow i nawet prawdopodobnie będzie działać, jak widzisz

7:54już nam to wszystko działa poprawnie, zobaczmy

8:00czy odliczanie się zakończy to się odblokuje, tak jest. Natomiast

8:04pokażę ci jedną fajną rzecz, że jeżeli nie chcesz nazywać tego

8:08komponentu edu counter tutaj, tylko chciałbyś skorzystać na przykład małej litery counter

8:12albo z wielkiej, to tutaj nie ma znaczenia, to

8:17mógłbyś tutaj napisać counter równa

8:21się counter, ale w EcmaScript6 można zrobić coś takiego i jeżeli

8:26zrobimy coś takiego to jest dokładnie taki zapis. Czy jeśli chciałbym

8:30nazwać komponent counter, tutaj z niego korzystać, może być mała litera, może być wielka, a do

8:34niego przypisać komponent pod zmienną counter to w ES6 jest taki skrót, że w

8:38obiekcie wstawiamy coś takiego i to dokładnie jest rozwijane to counter dwukropek counter,

8:43więc często się z tym spotkasz i to oznacza, że możemy z takiego tutaj komponentu

8:47korzystać i tutaj tej templatce nie ma tych wszystkich ograniczeń, które były w żywej

8:52templatce w DOM'ie, czyli tutaj nie musimy mieć z pauzą tych komponentów nazwanych

8:56i tak dalej. Możemy komponent od razu domknąć i to wszystko będzie działać poprawnie,

9:00nie przekazujemy mu żadnej treści do slota, więc mogę go po prostu domknąć, tutaj to

9:04powinno być automatycznie odświeżane, ale dla pewności odświeżę i jak

9:09widzisz, to wszystko działa poprawnie. Myślę zatem,że na tym etapie widzisz,

9:13jakie są tutaj zalety korzystania z tego w ten sposób.. Po

9:18pierwsze możemy korzystać z nowego zapisu ES6, który jest kompilowany automatycznie

9:22za nas. Po drugie bardzo wygodnie sobie od separujemy komponenty, mamy template,

9:26super się tutaj pracuje. Tutaj jest logika tego komponentu, mogę sobie zaimportować co chce.

9:30Może jakiś funkcje pomocnicze, jakieś inne rzeczy z których bym tutaj korzystał i dodatkowo

9:35można tutaj jeszcze przepisać style, ale tym zajmiemy się w kolejnej lekcji. Możemy

9:40te komponenty dzielić na różne pliki. Myślę, że naprawdę widzisz jaka

9:44jest przewaga tego, wobec tego co robiliśmy prosto tutaj w przeglądarce, chociaż

9:48te skrypty, które tutaj wpisywaliśmy można było oczywiście odseparować do

9:52osobnych skryptów i jakoś tutaj podłączyć lub jeżeli masz jakiś swój własny workflow, czy

9:56z użyciem gulp'a czy z webpack'a czy jakikolwiek inny, mogłeś sobie bez problemu

10:00z tego korzystać. Natomiast w webpack'u fajne jest to, że mamy Vue loader,

10:04który pozwala nam takie jednoplikowe komponenty odpowiednio zamieniać na kod

10:08JavaScript i wszystko to później działa poprawnie, a więc bardzo wygodnie się tutaj pracuje. To zatem

10:14tyle w tej lekcji, w kolejnej rzucimy jeszcze okiem na pracę ze stylami CSS w tych jednoplikowych

10:18komponentach.