Vue.js: Liniowe style CSS

Vue.js 2.5.x

0:00Kiedy z góry wiesz jakie będą style dla elementu, najlepiej

0:04jest mu przypisywać klasy CSS a nie modyfikować styli na nim bezpośrednio.

0:08Czyli to co widziałeś lekcji poprzedniej. Możemy dodać klasę, a w arkuszu CSS

0:13definiujemy, co ma się dziać z elementem, jak ma wyglądać. Natomiast czasami

0:17wolimy, czy potrzebujemy zmodyfikować style bezpośrednio

0:21i to będę chciał ci pokazać w tej lekcji. Czyli atrybut style dodawany do elementów.

0:26Mamy tutaj taki oto obrazek i chciałbym zrobić sobie taki mini przykład,

0:30że jeżeli kółkiem myszy będziemy kręcić na tym obrazku, to po pierwsze strona się

0:34nie będzie przewijać, czyli zapobiegniemy domyślnej akcji, a po drugie będziemy powiększać

0:38ten element przypisując mu transform scale i właśnie tą skalę

0:42będziemy odpowiednio ustawiać, czyli jest to po prostu zapisz CSS3. Niemożliwe

0:46tutaj do wykonania za pomocą klas, bo ja będę chciał dynamicznie tą skalę zmieniać, a

0:50więc nie mogę jej za zadefiniować wcześniej i pokażę ci teraz jak możemy

0:54to zrobić. Mamy taką aplikację, którą już tutaj po części przygotowałem,

0:59mamy ten oto obrazek i chciałbym do niego po pierwsze przypisać zdarzenie will. Jest

1:04takie zdarzenie kiedy kręcimy kółkiem i możemy go przypisać w

1:08ten sposób will i następnie zrobimy

1:13sobie prevent, bo chcę ci pokazać, co nam to da. Jeżeli teraz kręcę

1:17kółkiem, na tym elemencie zauważ, że strona się nie przewija, obok tak, a na kółku nie,

1:21czyli zapobiegłem domyślnej akcji przeglądarki, ale dodatkowo chciałem wtedy

1:25wywołać metodę, która się nazywa zoom i będziemy chcieli ją sobie

1:29tutaj dodać, okej. Do

1:34tego będziemy potrzebowali właściwości level, czyli wartość tego powiększenia

1:38na początek ustawimy to na 1 i tutaj jeszcze w

1:42computed będę chciał zwracać style dla tego oto elementu, więc chciałbym mu zbindować

1:46atrybut style, czyli w lekcji poprzedniej widziałeś jak robiliśmy class. Natomiast

1:51tutaj możemy zrobić style. Podobnie v-bind dwukropek style

1:56też by zadziałało, ale w tym skrócie moim zdaniem wygląda

2:00to czytelniej, czyli dwukropek style. Chcemy zbindować. No i tutaj możemy podawać

2:05to podobny sposób jak w przypadku klas, czyli mógłbym tutaj napisać jaki styl,

2:09na przykład font size, a tutaj jaka ma być jego wartość. W przypadku klasy tutaj

2:13był warunek czy ona ma być dodana. W przypadku styli tutaj będzie wartość.

2:18Czyli jeżeli bym tutaj podał powiedzmy font size,

2:22to musiałbym coś takiego mieć w computed property lub type of data. Mogę

2:26podać literalnie oczywiście, w ten sposób też będzie to działać

2:30poprawnie. Mogę podać 12 plus px,

2:34też będzie działać. Mogę tutaj podać wartość font, font

2:39size to byłoby tak jak mówiłem w computed lub w data i do tego dołączyć piksele,

2:43dowolne wyrażenia tutaj działają, ale ja będę chciał ten obiekt, który jest tym

2:47miejscu zwrócić z computed property, dlatego napiszemy tutaj img

2:52style i dodamy sobie taki computed, który będzie

2:56nam to zwracać i teraz

3:01ja będę chciał przypisać style transform. W ten

3:05sposób, czyli widzisz, że zwracam obiekt, w zasadzie jeszcze tego nie zrobiłem,

3:09tutaj dopiero będzie return, okej i style to będzie transform. To

3:14jest dokładnie ten obiekt, który mogliśmy tutaj wpisać literalnie i teraz jaka będzie wartość. Ja

3:19będę chciał tutaj ten level zinterpolować, więc korzystam z zapisu ES6,

3:24bo będzie to prostsze i będę musiał za pomocą plusa dodawać. Zróbmy to w ten sposób, scale

3:29i wiemy, że w CSS wtedy można podać na przykład scale 1, więc tą jedynkę ja tutaj

3:33po prostu chcę zinterpolować. W EcmaScript6 przy takich backtick'ach można

3:37to zrobić w ten sposób, this level, bo oczywiście poprzez this musimy się z tego odwoływać

3:42i taki obiekt będzie ustawiony. No i ważne jest to, że przy kolejnych rerenderingach,

3:47jeżeli level się nie zmieni to ta computed property nie będzie musiała być

3:51wyliczana od nowa, więc tutaj nic się będzie zmieniać. O to już Vue zadba, ale jeżeli zmienimy

3:55level to wtedy ta computed property będzie musiała się zmienić

3:59i style również się zmienią, więc zobaczymy jak by to mogło wyglądać gdybyśmy

4:03to zmodyfikowali w tym miejscu. Będę te wartości dodawał i można je dodawać

4:07jak tutaj dymek pokazuje na przykład co 5 czy co 10, ale

4:11może dodajmy sobie tutaj co jedno. Jeżeli będę zmieniał level tego powiększenia.

4:16Zauważ, że na stronie to się zmienia. Dodałem overflow hidden do tego rodzica,

4:20żeby ten cały obrazek nie wypływał na zewnątrz, tylko żeby tutaj się

4:24powiększał i teraz będę chciał zrobić tak, że jak będziemy kręcić kółkiem to

4:28będę chciał po prostu zmieniać level o wartości jednej dziesiątej i

4:33to zrobimy właśnie w zoom, bo przypisaliśmy na kręcanie kółkiem właśnie

4:37metodę zoom i tutaj będziemy musieli przechwycić event, który automatycznie tutaj

4:42zostanie przekazany i będę chciał w tym evencie sobie sprawdzić

4:46coś takiego. Jeżeli byś zrobił jego console.log to zobaczyłbyś dlaczego korzystam

4:50z takich właściwości, ale zrobimy sobie If event delta y

4:55większe od zera. To oznacza, że kręcimy kółkiem w dół. Czyli

5:00wtedy będę chciał po prostu powiększać ten element, więc this level plus

5:04równa się 0, 1, będziemy to zwiększać. Sprawdźmy czy to działa. Jak

5:10widzisz, tak. Natomiast jeżeli będę kręcił w drugą stronę, to delta będzie mniejsza od

5:14zera i wtedy będę chciał tę wartość zmniejszać, czyli w przeciwnym wypadku this

5:19level minus równa się 0 1. Tylko problem

5:23jest taki, że zjedziemy do wartości poniżej jedynki, więc powiększam, zmniejszam,

5:27ale możemy zjechać poniżej jedynki i to nam będzie generował problem,

5:31więc tutaj trzeba jeszcze zrobić jedno sprawdzenie, if this

5:35level większa od 1, to tylko wtedy chcemy to zmniejszać. Jeżeli

5:40już dojdziemy do takiej wartości 1, to nie chcemy tutaj robić

5:44nic, więc nie ma tutaj wydaje mi się nic skomplikowanego. Sprawdźmy jak to będzie działać. Kręcę

5:49w jedną stronę, powiększam, kręcę w drugą, zmniejszam, aż do wartości

5:531 i tutaj super istotne jest to żeby sobie zerknąć co tak naprawdę się dzieje. Style,

5:58które zdefiniowaliśmy w computed property po prostu są tutaj przypisywane, czyli transform

6:02scale 3.1, kręcę, to się zmienia. Jak

6:06zatem widzisz, znowu działa to w sposób reaktywny, czyli tutaj powiedzieliśmy jakie

6:10mają być style. W computed property je wyliczamy, a zmieniamy je za

6:14pomocą zdarzenia will i super, to wszystko już

6:19działa. Co jeszcze jest ważne. Podobnie jak w przypadku klas, gdybyśmy

6:23tutaj mieli atrybut style przypisany z naszymi stylami to będzie wszystko połączone

6:27w jedno i będzie działać poprawnie. Druga ważna rzecz, tutaj też można podawać

6:31zapis tablicowy, gdzie może być więcej takich obiektów. Bo może byśmy te style

6:35w jaki sposób importowali, szczególnie w EcmaScript6, gdzie możemy robić importy i może

6:40mielibyśmy większy, wiele takich obiektów. To warto wiedzieć, że można tutaj podać

6:44to w formie tablicy, gdzie będą te obiekty później połączone. Okej,

6:49no i ostatnia rzecz, o której warto wiedzieć to to, że Vue dodaje vendor prefiksy, czyli

6:53jeżeli tutaj raz jeszcze byśmy przeszli, widzisz, że zostało tutaj dodane transform.

6:59Natomiast w starszych przeglądarkach mogą być tutaj dodane webkit transform czy ms transform.

7:04Ważne jest to, że Vue zadba o to za nas, więc wystarczy, że podamy

7:08poprawne oficjalny zapis taki jak transform, bez żadnego vendor

7:12prefiks'a. No i jak widzisz ta aplikacja, bardzo prosta do zrobienia

7:16z użyciem Vue.js a bardzo efektowna.