Vue.js: Tworzenie komponentów Slideshow

Vue.js 2.5.x

0:00Rozpoczynamy finalny projekt tym kursie, a będzie to aplikacja slideshow,

0:04czyli taki slider gdzie będziemy przewijać obrazy, taka galeria obrazów

0:08w prawo, w lewo będzie można zmieniać obrazki i w kolejnych lekcjach będziemy ją sukcesywnie

0:12rozbudowywać, natomiast polecam ci rozpocząć razem ze mną w plików źródłowych

0:16z katalogu 54 i tutaj po prostu uruchomiłem npm run dev. To

0:21jest templatka wygenerowane z Vue init webpack. Natomiast usunąłem niepotrzebne

0:26rzeczy, żebyśmy zaczęli od czystej kartki. Ważne, że do pliku index

0:30tutaj wstawiłem już tą naszą strukturę, którą mieliśmy przez cały ten kurs i

0:34tu będzie wstrzykiwana nasza aplikacja, więc to już mamy i teraz

0:38będziemy chcieli pracować sobie na tym wszystkim, ważny jest plik main.js, w którym

0:42na razie nic nie zmieniałem, on include'uje sobie apkę główną i wstrzykuje

0:47to do elementu app na stronie, więc tutaj na razie nic nie będziemy zmieniać. Rozpoczniemy

0:51pisanie naszej aplikacji tutaj w pliku app.vue. Zaczniemy

0:55od stworzenia templatki i następnie skryptu ,którym

1:00będzie nasza logika. W templatce tej głównej chciałbym mieć coś takiego div

1:04app, przy okazji zobacz tutaj działa mi na przykład emmet, to nie działało

1:08kiedy pracowaliśmy wcześniej z komponentami w tym template string'u, więc to kolejny powód

1:12żeby korzystać właśnie z takiego workflow i chciałam zrobić coś takiego, że

1:16tutaj będziemy mieli H1, pokaz zdjęć, a tutaj chciałbym

1:21móc osadzić sobie komponent, który się będzie nazywał slideshow. To

1:25jest nasz komponent, który stworzymy, będziemy go domykać w ten sposób. Ten domykający slash

1:29jest ważny żeby nie było błędu, jeżeli nic nie stawiamy do elementu można go od razu domknąć. Okej,

1:34no to oznacza, że skoro go chcemy domknąć i zasadzie w ogóle tutaj wstawić

1:38to potrzebujemy go sobie zaimportować, więc możemy od razu sobie przygotować

1:42tutaj import, import Slideshow from

1:48i będziemy to chcieli mieć w katalogu components, slideshow.

1:53Okej, żeby to mogło działać to tutaj muszę utworzyć taki

1:57plik, więc zróbmy to od razu, żeby wszystko tutaj było tak jak należy src components

2:02slideshow Vue, znowu tutaj

2:06on będzie miał swoją templatkę, tworzymy to wszystko od zera, tutaj nie

2:10mamy już nic, czyli nie wykorzystujemy komponentów, które stworzyliśmy wcześniej w kursie,

2:14on będzie musiał coś oczywiście eksportować, jakiś

2:19obiekt i ten obiekt wiemy, że to jest to co podawaliśmy zawsze do components, czyli teraz

2:23już nie powinno być błędu, tutaj jest to importowane, ale żeby tutaj jeszcze to

2:28działało, no to musimy tutaj zrobić export default, No i stworzyć

2:32obiekt w ogóle tej głównej aplikacji. Podamy jej name, nie wytłumaczyłem

2:36ci jeszcze o co chodzi z name, to się przydaje w debuggerze, który mamy w przeglądarce, więc

2:40name możemy nazwać po prostu app, od tego name to będzie zależeć, a nie od

2:44tego jak nazwiemy tag, więc to name warto sobie w tych komponentach przypisywać

2:49i następnie components. No i tutaj podajemy,

2:53tak jak wiesz, nazwę tego tagu oraz komponent, który ma być pod

2:57nim. Komponent mamy tutaj w takiej stałej, zaimportowanej. Nazwa

3:01tagu, chcę żeby była taka sama dlatego tutaj po prostu wpiszemy slideshow, ale

3:06już wiesz jak to się rozwija, to jest to samo co slideshow dwukropek

3:10slideshow. Teraz nie powinno być błędu jeżeli byśmy tutaj przeszli. Otworzymy

3:14sobie konsole, zobaczymy Vue, okazuje się, że mamy aplikacje. W środku

3:18mamy slideshow i te nazwy, które są tutaj app oraz slide show, one właśnie nie zależą

3:22od nazwy tagu jaki byśmy wybrali, ale od name, które przypiszemy, więc

3:27tutaj też warto będzie sobie dodać od razu name slideshow. Jeżeli

3:32jest nie podane to nazwa oczywiście tej właściwości tutaj jest brana pod uwagę. Okej,

3:37no i powiem ci że ogólna idea będzie taka, później będziemy pobierać obrazki z serwera,

3:41czyli w ogóle ich list za pomocą Ajax'a, natomiast na razie chciałbym to wstawić

3:46tutaj na sztywno do tego głównego komponentu, więc stworzymy sobie funkcję

3:50data i z niej będziemy chcieli coś zwrócić. Chciałbym

3:54z niej zwracać prop, która będzie się nazywać images i chciałbym,

3:59żeby to była tablica, mam to tutaj w schowku skopiowane, na razie tutaj są trzy obrazki, ale docelowo ich

4:03będzie 10, tylko nie chciałem tutaj zaśmiecać kodu i te images będziemy

4:07z głównej aplikacji chcieli przekazywać do komponentów slideshow, czyli on ma być uniwersalny,

4:12będzie wyświetlał nam cały slideshow, ale musimy mu podać dane, czyli

4:16mamy tutaj taką tablice z obrazkami, oczywiście mogłaby to być tablica

4:20gdzie bezpośrednio byłyby takie stringi, ja zrobiłem obiekty, bo często w podobny

4:24sposób może to być pobrane z Internetu i do tego slideshow będziemy chcieli to przekazywać

4:28jako prop images, czyli zbindujemy, robimy to co do tej pory już w tym

4:32kursie widziałeś i wiemy, że to wpadnie tam do wewnątrz. No więc teraz skupmy

4:37się na tym komponencie slideshow, żeby mógł to wszystko przyjmować, więc

4:41przejdziemy sobie w to miejsce i musimy mu zdefiniować prop, które on przyjmuje. Ja

4:45będę chciał to zrobić razem z walidacją, więc powiem, że on może przyjmować images, ale

4:50żeby to była tablica. Okej, czyli jeżeli przekażemy coś innego to powinien

4:54pokazać się błąd. No i teraz mając tutaj images moglibyśmy

4:58je w jakiś dowolny sposób tutaj wyświetlać. Natomiast ja będę chciał

5:02żebyśmy stworzyli jeszcze jeden komponent, który się będzie nazywał slajd. Tutaj go zaimportujemy, import

5:07slide from. Teraz jesteśmy już w tym katalogu components, bo tutaj

5:11slideshow, więc bezpośrednio z tego katalogu będę sobie chciał zaimportować

5:15slide. No i musimy go utworzyć 54 src

5:20components slide vue. Znowu template. Jak

5:25się to powtórzy kilka razy, to uwierz mi, jest to bardzo intuicyjne fajnie się to tworzy. No

5:30i tutaj będziemy eksportować z kolei ten moduł, bo chciałbym żeby slideshow w sobie mógł

5:34zawierać wiele elementów slide, które przechowują jeden obrazek, export

5:39default name slide, no i tutaj

5:43będą jakieś jego pozostałe rzeczy. Od razu ci powiem, że on jako prop będzie

5:48przyjmował url, więc chcemy to tutaj przekazać. Chciałbym żeby to

5:52było przekazywane jako string, na razie tyle i może tutaj w templatce zrobimy

5:57sobie na początek H1 url,

6:02żebyśmy wiedzieli, że to się może tutaj wyświetlić i z tego naszego slideshow będziemy

6:06to mogli tam przekazać. Okej, może skupmy się teraz na tej templatce slideshow,

6:11która jest w tym miejscu, ja wkleję gotowy fragment kodu, okej. Tak

6:16to będzie wyglądać. Zobacz, stworzyłem sobie slides wrapper, tak to wygląda

6:20i będę miał dwa przyciski. Chciałbym, żeby to był przycisk w prawo i w lewo, a

6:24tutaj będą nasze główne zdjęcia, główne slajdy, natomiast do nich potrzebujemy teraz jeszcze

6:28przepisać style, więc stwórzmy sobie tutaj style,

6:32może od razu scope, żeby one były jak już wiesz, przypisane bezpośrednio

6:37do tych elementów i wrzucę sobie tutaj troszeczkę styli, okej. Po

6:41prostu, żeby te przyciski były w odpowiednich miejscach, nic tutaj nie ma skomplikowanego i

6:45teraz jeżeli byśmy to odświeżyli, rzeczywiście te przyciski już się pojawiają

6:50tak jak być powinno. Możesz zobaczyć, one tutaj są i zaczyna

6:54to jakoś fajnie wyglądać, do nich będziemy chcieli przypisać zdarzenie kliknięcia, ale to za moment bo

6:58chciałbym się skupić nad tutaj. Tutaj chciałbym wstawiać komponent slide,

7:03który utworzyliśmy, to on będzie odpowiedzialny za wyświetlenie jednego pojedynczego zdjęcia do

7:07którego URL tutaj otrzymał, więc żeby go tutaj wstawić,

7:11zaimportowaliśmy go, musimy dodać jeszcze jako components i wpiszemy

7:18tutaj slide, czyli pod takim tag'iem on tutaj będzie dostępny, slide

7:22domknę go od razu, bo do niego nie będziemy przekazywać żadnej treści html'owej.

7:28Natomiast on oczekuje tak jak to wymyśliłem, jako że otrzyma

7:32URL, okej. No i teraz zaczynamy myśleć

7:36jak to zrobić. Do tego komponentu dostaliśmy całą tablicę, w której

7:40są różne zdjęcia. Moglibyśmy tutaj te slajdy wyświetlić za pomocą v-for

7:44i byłoby i wtedy więcej natomiast ja nie potrzebuję tego robić, bo

7:48my będziemy cały czas tylko jeden widoczny slajd którego URL będziemy zmieniać, ale

7:53jak mu tutaj przekazać ten jeden URL. Otóż, chciałbym zrobić taki computed

7:57prop. Będzie się nazywał active url, więc

8:02tutaj zrobimy sobie computed active url

8:09i wiemy, że to jest funkcja w zapisie ES6, mogę to zrobić w ten sposób i

8:13będę chciał zwrócić this images, czyli

8:17mamy tablicę i teraz jaki tutaj podać indeks, bo będę chciał zwrócić indeks

8:22i następnie URL, bo przypominam ci jak to wygląda. Jeden

8:26element z tablicy to będzie taki obiekt, więc kropka URL da mi ten adres i teraz

8:30chciałbym tutaj sobie zapisać w data, to

8:35musi zwracać obiekt, pamiętaj proszę chciałbym tutaj zapisać

8:40sobie active i domyślnie

8:45będzie to zero, czyli pierwszy element tablicy, tutaj będę chciał zwracać this active, ten active

8:50będziemy mogli później zmieniać. Zobaczysz w jaki sposób będzie to reaktywne,

8:54okej. Zbindujmy to teraz, żeby to wszystko mogło działać, bo skoro

8:59już wiemy, że mamy computed property o nazwie active url to teraz

9:03będziemy musieli to tutaj zbindować, URL, bo tak nazywaliśmy prop, który będzie

9:07tam przyjmowany i active url, czyli do tego slide'a pod

9:12prop url powinien wpaść taki adres, który tutaj wyświetlimy. Zobaczmy

9:16czy nam to w ogóle zadziała, H1 w ogóle gdzieś tutaj powinna się pojawić slideshow

9:21i widzimy, że coś jest nie tak mamy jakiś błąd, okej. Wygląda

9:27na to, że tablica, którą mamy tutaj w slideshow nie

9:31została tutaj poprawnie przekazana, czyli widzimy, że robimy prop images

9:35to jest coś czego oczekujemy, więc this images powinno tutaj być. Widzę

9:40gdzie jest błąd, teraz go zauważyłem, mamy tutaj s, jak widzisz jest to super istotne i

9:44tak a propos nie została przyjęta. Teraz jest w porządku

9:48i wreszcie do naszego na samym dole komponentu, który jest tutaj slide

9:52zostało dobrze dostarczone, taki adres został

9:56dostarczony, więc jest wszystko w porządku, więc możemy sobie osadzić zdjęcie, które będzie

10:00nam wyświetlać właśnie obrazek, który znajduje się pod takim adresem,

10:05zatem zróbmy sobie to w tym miejscu. Zamiast wyświetlać tutaj taki url, to ja

10:09wstawię taki fragment kodu, więc mamy obrazek i skoro wiemy,

10:13że tutaj url jest przekazywany to zbindujmy sobie atrybut

10:17src tego obrazka na wartość url i to będzie templatka po

10:21odświeżeniu, wow, wreszcie zaczęło to działać poprawnie. Super to wygląda

10:25i teraz będziemy chcieli zmieniać tylko ten active url. Jeżeli go zmienimy to

10:29wszystko powinno być propagowane na dół, więc spróbujmy, wiem

10:33że może się to wydawać zagmatwane, ale proszę na spokojnie również może zapauzuj

10:37i zaglądnij do tego kodu. Spróbuj to napisać razem ze mną. Jeżeli na slideshow tutaj

10:42zmienimy sobie active to zmieniają się obrazki. Mógłbyś

10:46pomyśleć, wow, jakim cudem to działa. Zmieniamy active na slideshow. Jeżeli

10:52zmieni się active, to zmienia się też computed property, które na nim bazuje i

10:56z tablicy zwraca kolejny element. Jeżeli się zmieni active url computed,

11:00to zmieni się również tutaj w tym prop, który jest przekazany do slide, a skoro

11:05się zmieni slide, to musi się zmienić również w tym miejscu, no i w ten sposób zaczyna

11:09to naprawdę fajnie działać i jest jeszcze jedna rzecz, którą tutaj możemy dodać. Chciałbym

11:13tutaj wyświetlać coś takiego. Wrzucę kawałek kodu, żebyśmy widzieli, że na przykład mamy

11:17zdjęcie drugie z dziesięciu figcaption i tutaj będzie

11:21number, więc chciałbym, żeby tutaj w props również przyjmować number. No

11:26i to może być przekazane w zasadzie, trudno powiedzieć jako string lub jako number,

11:30tak sobie to zwalidujemy, bo to nie będzie miało znaczenia, tutaj będę chciał

11:35to przekazywać chociaż w zasadzie nie, bo to będzie gotowy string, więc może

11:39tak to zapiszmy, bo to będzie powiedzmy 1 ukośnik 10 i teraz skąd to

11:43możemy przekazać tutaj w slideshow byśmy sobie do wyliczyli może

11:47zróbmy taki computed property w tym miejscu number. Jeśli

11:53go zrobimy to od razu może dodajmy go w to miejsce, żeby mieć pewność, że to pójdzie

11:58po prostu tam gdzie powinno i chciałbym tutaj przekazać taki

12:02oto string return. Skorzystam w ES6 z template string'u i on będzie i

12:06tak przekompilowany później. Chciałbym zrobić this

12:10active, czyli jeżeli pierwszy element jest aktywny to jest zero, więc dodamy 1, ukośnik

12:16i zrobimy sobie this images length,

12:20czyli długość tej naszej całej tablicy, więc będziemy mieli aktywny element i

12:24powinno pozostać tutaj odzwierciedlone. Zobaczmy, dokładnie jeden

12:28obrazek na trzy, jak widzisz i teraz jeżeli tutaj active zmienimy na 2,

12:33to również nam się nam będzie poprawnie zmieniać, super to zaczyna działać, już

12:37sporo zrobiliśmy, ale jeszcze chciałbym dodać jedną rzecz tej lekcji i dopiero później

12:41przejdziemy do kolejnej. Mianowicie chciałbym dodać, żeby po kliknięciu w

12:45te strzałki rzeczywiście zmieniały się te obrazki, więc chciałbym

12:49dodać do tych przycisków zdarzenie click i chciałbym

12:54wywołać metodę na slideshow, która się będzie nazywała change slide i przekazać jej

12:58parametr, czyli jeżeli klikam prev, tak jak tutaj, to chciałbym przekazać im wartość

13:03minus 1, skopiuję sobie to, co tutaj mamy i przypisze

13:07do drugiego przycisku, to jest przycisk next i tutaj chciałbym przekazywać wartość

13:121. Okej, więc teraz musimy sobie stworzyć taką metodę change slide, oczywiście

13:17w tablicy methods, więc zróbmy to może tutaj. Ona

13:27będzie przyjmowała parametr jakiś. Może na początku nazwijmy go dir,

13:31jak direction, czy to będzie w jedną stronę czy w drugą i tutaj będziemy mogli sobie zrobić

13:36logikę następującą. Napiszę sobie let

13:40index równa się i będziemy mieli this active,

13:45czyli na przykład, jeżeli pierwszy slajd jest aktywny to mamy tam 0 i do tego będę chciał

13:49dodać wartość, którą przekazaliśmy pod dir. Tutaj ta wartość to może

13:53być 1 lub minus 1. Jeżeli dodamy minus 1, to tak jakbym odjął po prostu, więc

13:57chcę mieć wartość tego indeksu i teraz będę chciał sprawdzić czy w ogóle w tej tablicy się

14:01coś znajduje pod takim indeksem, więc będziemy tutaj mogli sprawdzić

14:05jeszcze tworząc zmienną slide this

14:09images index, czyli powiedzmy byliśmy na

14:14trzecim obrazku. To active miało wartość 2. Klikam

14:18tutaj next, mam jedynkę. Dodaję to do siebie, mam trójkę i chcę sprawdzić czy

14:22w tej tablicy pod indeksem 3, a więc czwarty element czy on istnieje i tutaj

14:26możemy to sprawdzić. Jeżeli slide nie jest równy undefined, to

14:30znaczy, że coś tam się znajduje i tylko wtedy będziemy chcieli wykonać kod,

14:35który jest tym miejscu, czyli zmienić wartość tak naprawdę active. Będziemy chcieli ustawić

14:39this active równa się właśnie indeks,

14:43okej. Zapiszmy i sprawdźmy, ja tutaj sobie odświeżę, zobaczymy

14:47czy to działa. Klikam w prawo i jak widzisz, jak najbardziej działa. Jeżeli

14:52dojdziemy do końca, tutaj byśmy sprawdzili, że active ma wartość 2, więc ja klikam

14:56na to. Do tej dwójki sobie dodajemy i mamy wartość

15:003, a trzeci index to byłby element czwarty w tablicy, którego

15:04tam nie ma, więc to nie działa i w drugą stronę również, jak widzisz działa to poprawnie, więc

15:08jeszcze tylko chciałbym zablokować te przyciski, jeżeli nie ma już kolejnych elementów, jak

15:13widać nic się nie dzieje, ale chciałbym pokazać użytkownikowi, że tak rzeczywiście jest,

15:17więc jak byśmy to mogli zrobić. Może po prostu na

15:21te przyciski dodamy sobie disabled i zbindujemy

15:26go w zależności od computed property, czyli ten przycisk to jest prev, a więc

15:30pierwszy, czyli jeżeli jesteśmy na starcie, to

15:34chcę żeby ten przycisk był zablokowane. A tutaj jeżeli jesteśmy na końcu, więc musimy

15:39sobie dodać dwie computed properties, start oraz end i jak

15:46określić czy jesteśmy na początku. No wystarczy sprawdzić czy this active

15:50to jest 0, wtedy jesteśmy na początku, a end jak

15:54sprawdzić czy jesteśmy już przy ostatnim elemencie. Sprawdzimy czy this images

15:58length, tutaj jeszcze może this active najpierw, czy

16:03this active równa się. Jeżeli

16:08powiedzmy aktywny jest drugi to chcemy sprawdzić czy on się równa ilości czy liczbie

16:12elementów tablicy minus 1. Okej, jeżeli tam są trzy elementy to

16:16lenght zwróci nam trzy, odejmujemy sobie od tego jedynkę to jest 2 i

16:20aktywny to powinien być drugi. Mamy 012. Teraz po odświeżeniu, jak

16:26widzisz działa to dokładnie tak jak chcieliśmy, ten przycisk jest zablokowany, bo jesteśmy na starcie. Jeżeli

16:30przejdziemy dalej on się automatycznie odblokuje. Jeżeli wrócimy to się zablokuje. No

16:35i jeżeli dojdziemy tutaj do końca to ten przycisk również, jak widzisz, się zablokował,

16:40więc trochę długa lekcja, ale wiele tutaj zrobiliśmy, jak widzisz wszystko działa

16:44sposób reaktywny. Również tutaj z tym licznikiem, a w kolejnej lekcji będę

16:48chciał tutaj dodać freeloader obrazów po to, żebyśmy mogli po kliknięciu

16:52wyświetlić tutaj ładowanie i pobrać obrazek z serwera, żeby

16:56dopiero później to zamienić, kiedy uda nam się go pobrać z serwera.