Vue.js: Praca z klasami CSS

Vue.js 2.5.x

0:00W tej lekcji pokażę ci w jaki sposób możemy kontrolować dodawanie lub usuwanie klas

0:04CSS do elementów html, a co zatym idzie oczywiście

0:08jak możemy kontrolować ich wygląd, więc to co ja będę chciał zrobić w

0:12tej lekcji, to jest to, aby po pierwsze ukryć tę wiadomość. Twoja wiadomość

0:17została wysłana i będziemy chcieli wysłać formularz. Będziemy

0:21chwilę mogli poczekać tutaj przycisk zmienimy na taki wczytujący się i kiedy on się wyśle

0:26ukryjemy cały formularz, a wyświetli mi tę wiadomość. W tym kursie jeszcze później pokażę

0:30ci w jaki sposób możemy korzystać ze specjalnych dyrektyw pokazujących i ukrywających

0:34elementy, ale na razie pokażę ci jak to zrobić z użyciem klas i w Spectre CSS,

0:39czyli we framework'u, z którego tutaj korzystam, mamy taką klasę the pauza none.

0:43Jeżeli ją dodamy do czegokolwiek, to ten element jest ukryty, więc będziemy chcieli

0:47z niej skorzystać. To teraz pytanie jak to zrobić. Ja tutaj mam taki formularz,

0:51który mieliśmy już wcześniej i zrobiłem rzecz taką, że po pierwsze ten

0:55przycisk będę chciał wyłączyć i jeżeli isSending ma wartość true

1:00albo sent ma wartość true i mam tutaj isSending oraz sent

1:04i po kliknięciu w ten przycisk, czyli w zasadzie po wysłaniu formularza, mamy to tutaj. Będziemy

1:09robić metodę submit, a ta metoda sprawi, że isSending ustawię na true,

1:13więc przetestujemy. Widzimy, że ten przycisk się wtedy wyłącza, ale to

1:17nie jest wszystko, co będziemy chcieli zrobić, bo chciałbym się skupić na klasach, przede wszystkim,

1:21więc jak możemy kontrolować klasy. Znowu będzie to w sposób

1:25deklaratywny, czyli tutaj sobie coś deklarujemy, a to będzie zależne

1:29od danych jakie są w tej instancji, więc zauważ, że ja

1:33tutaj mam już dodaną klasę i w niej nie będziemy nic zmieniać, więc dobra wiadomość

1:37jest taka, że do elementu możesz mieć dodane już różne klasy, a dodatkowo

1:41zbindować sobie ten atrybut. No i jak bind'ujemy atrybuty? Dokładnie tak jak

1:45tutaj, czyli albo v-bind. Już to wielokrotnie widziałeś

1:49dzisiaj czy w ogóle w tym kursie. Możemy napisać v-band class lub po

1:53prostu samo class i właśnie to jest ważne, że to co tutaj podamy będzie połączone

1:58z atrybutem, który już istnieje, więc nie ma problemu, że ten atrybut tutaj jest. Tych

2:03klas nie będę musiał dodawać wewnątrz tego atrybutu. No i teraz jest

2:07to specjalnego przeznaczenia atrybut class i również style, o

2:11której będziemy mówić niebawem i to znaczy, że tutaj mamy specjalny zapis

2:15i tutaj możemy podać taki oto obiekt. Wiadomo,

2:20że dla nas jest to tak naprawdę string, ale Vue potrafi sobie to sparsować i w tym obiekcie

2:24podajemy jako klucz nazwę docelowej klasy, którą chcielibyśmy przepisać

2:28i ja do tego przycisku chciałbym przypisać klasę loading, a tutaj podajemy

2:32warunek, czyli jeżeli tutaj będzie true to ta klasa będzie dodana,

2:36a jeżeli false to nie. No i teraz kiedy chcemy dodać klasę loading. Otóż

2:41wtedy, kiedy isSending jest ustawione na wartość true, czyli jeżeli wpisze

2:45isSending to wtedy ta klasa ma być dodana do tych klas,

2:49które są już tutaj. Czyli jeżeli klikamy na przycisk i isSending ustawimy na true, powinna

2:54ta klasa zostać dodana i powinniśmy taki spinner widzieć na tym przycisku, więc

2:58sprawdźmy. Jak widzisz dokładnie tak się stało. Oczywiście, jeżeli podejrzymy, to

3:03tutaj się pojawi na tym przycisku gdziekolwiek

3:07on jest, czyli tutaj klasa loading, więc do tych klas zostało

3:11to dodane, no i ważne jest to, że tutaj oczywiście możesz dodawać sobie kolejne właściwości

3:16do takiego obiektu i będą to kolejne klasy, przy każdej możesz mieć warunek. Natomiast

3:21to, co jest ciekawe, to nie musisz tego tutaj wpisywać w taki sposób. Mógłbyś

3:25sobie tutaj podać nazwę na przykład computed property,

3:29która byłaby wyliczona w jakiś sposób, w zasadzie jest

3:33to dosyć proste, bo potem moglibyśmy napisać button styles i

3:37tutaj moglibyśmy dodać computed button

3:45styles, wiemy że computed properties są twoje funkcje tak naprawdę tutaj i

3:49stąd byśmy mogli zwrócić taki oto obiekt, więc powinno to zadziałać

3:53w tak samo, sprawdźmy. Tylko, że isSending, no właśnie, bardzo ważna

3:57rzecz, tutaj musi być podane z this. Okej, zobaczymy. Jak

4:02widzisz działa to dokładnie tak samo, więc jak masz więcej takich styli może lepiej

4:06ci to będzie zapisać po prostu tutaj w takiej computed, ale wiedz,

4:10że możesz to również wstawić w taki oto sposób bezpośrednio w tym

4:14wyrażeniu w wartości atrybutu. Okej, zatem teraz jeszcze chciałbym

4:19dodać sobie klasę tutaj do tego post'a. Będzie to klasa, może tutaj ją wpiszemy

4:24w taki sposób, żebyś sobie również to utrwalił. Tak jak mówiłem d-none, czyli display

4:28none, taka klasa jest zdefiniowana i ustalimy tutaj not sent, czyli

4:33jeżeli sent nie ma wartości true to ten

4:37element powinien być niewidoczny. Jest niewidoczny, chociaż w drzewie

4:41DOM oczywiście on istnieje, ale ma podaną klasę display none, która

4:45właśnie w ten sposób ten element ukrywa, a ten element jest pokazany, więc jemu

4:49może zrobimy rzecz odwrotną. Jest to cały ten formularz. Zauważ,

4:55że on też tutaj ma klasę. Może mieć, może nie mieć, to wszystko jest łączone w jedno.

4:59Jemu chcę dodać taką klasę jeżeli sent ma wartość true. Okej,

5:03sprawdźmy i jak widzisz wysyłamy, tylko że

5:08nigdy nie zmieniliśmy wartości sent, więc tutaj będę chciał może po jednej

5:12sekundzie czy po dwóch sekundach ją zmienić, a więc ustalimy sobie timeout. Przy

5:16okazji zobaczysz jaki jest problem przy timeout'ach. Jeżeli

5:20ustawimy timeout na dwie sekundy i chciałbym tutaj zmienić this sent

5:25na true to nam to nie zadziała. Być może

5:29wiesz dlaczego. Otóż this wewnątrz tej funkcji jest zupełnie w

5:33zupełnie innym kontekście, czyli nie odwołuje się do naszego obiektu, więc tutaj musiałbyś

5:38zrobić coś takiego, na przykład i tutaj zmienić to na vm. Wtedy

5:42wiemy, że odwołujemy się do odpowiedniego obiektu lub możesz skorzystać, co

5:46jest lepszym rozwiązaniem z funkcji strzałkowej w EcmaScript6. Polecam

5:51ci EcmaScript6, korzystanie z tego i wtedy, jeżeli

5:55tak zrobimy, stworzymy taką funkcję, to this nie jest tutaj od nowa

5:59przypisywane, czyli this jest dziedziczone z kontekstu wyżej i wtedy to zadziała. Natomiast

6:03pamiętajmy, że ten kod bezpośrednio wykonujemy w przeglądarce, jeżeli przeglądarka

6:07nie wspiera ES6, to będzie błąd, dlatego ja do tej pory nie korzystałem w tym

6:11się jeszcze ze zbyt wielu rzeczy w ES6, ale potem pokażę ci jak

6:16pracować w taki sposób, że ten kod będzie transmitowany do EcmaScript5 i

6:20wtedy nie będzie problemu. Niemniej jednak zostałem sobie to w ten sposób, w jaki

6:24sposób obejdziesz ten problem z this, to zależy od ciebie, czyli teraz wysyłamy

6:28i po dwóch sekundach zmieniliśmy wartość i jak widzisz wszystko tutaj zostało

6:32odzwierciedlone, więc znowu widzimy jak Vue jest bardzo przydatne. Wszystko

6:37możemy tutaj zadeklarować, co się ma dziać na podstawie jakich

6:41danych, a później te dane zmieniamy tylko w tym miejscu i jak widzisz dodawanie

6:45klas i wielu innych rzeczy, takie jak na przykład tutaj disabled

6:49dla atrybutu, tego przycisku jest bardzo proste i dzieje

6:53się w sposób automatyczny. Na koniec chciałbym ci pokazać jeszcze jedną

6:58rzecz, mianowicie, taki obiekty, jak są tutaj, można podawać również w zapisie

7:02tablicowym, czyli gdybyś miał więcej takich obiektów, możesz je podać w ten sposób. Oczywiście,

7:06jeżeli je wpisujemy ręcznie to w zasadzie w jednym obiekcie można uzupełnić pozostałe właściwości,

7:10ale jeżeli podawałbyś je jako computed property to właśnie tutaj z takiej

7:14funkcji mógłbyś zrobić tablice z wieloma takimi obiektami również by to zadziałało

7:18poprawnie. Co ciekawe tutaj można również przekazać klasy w sposób

7:23bezpośredni. Moglibyśmy napisać klasa, klasa 2, oczywiście

7:28jeżeli nie dam cudzysłowów, takich apostrofów, to wtedy jest traktowane jako

7:32computed property lub element z data. Warto o

7:36tym pamiętać, a także można to połączyć, czyli mogę tutaj zrobić coś

7:40takiego, że mam obiekt, w którym jest warunek, że display

7:44none ma być dodane jeżeli not sent, ale drugą klasę mogę dodawać zawsze. Jeżeli

7:49zawsze dodaje taką samą, w zasadzie lepiej ją dopisać tutaj bezpośrednio, ale

7:53chcę ci pokazać, że można to zrobić i powiedzmy napiszemy sobie message class

7:59i dodam sobie w tym miejscu, to oznacza, że ona może być dynamiczna,

8:04może być zmieniona. Jeżeli zostanie zmieniona, zmieni się tutaj. No i zmieni się również na

8:08tym elemencie i jest tam taka klasa jak post

8:12primary i ten post będzie miał po prostu

8:16inny kolor. Zobaczymy, kiedy on się pojawi. Jak widzisz, ma zupełnie

8:20inny kolor i post primary zostało tutaj dodane, więc z tej lekcji zapamiętaj,

8:24że klasy można dodawać w taki sposób, że dajemy obiekt. Nazwa klasy

8:28i warunek możemy podać również tablice z nazwami klas, jeżeli

8:33damy to w apostrofach. Jeżeli podam tylko takie nazwy, to jest to wtedy data

8:37lub computed property i tutaj możesz również zwracać

8:41computed property tak jak zrobiliśmy to w tym miejscu, która zwraca po prostu

8:45obiekt. Okej, zatem to tyle w tej lekcji, przejdźmy do kolejnego tematu.