Vue.js: Atrybuty

Vue.js 2.5.x

0:00W tej lekcji pokażę ci w jaki sposób możemy pracować z dynamicznymi atrybutami

0:05właśnie w html. Do tej pory już widziałeś, że w tej templatatce Vue,

0:09czyli w zasadzie w naszym kodzie html, w tym fragmencie, który jest kontrolowany

0:13przez Vue.js możemy korzystać z różnych atrybutów i są to tak zwane dyrektywy. Na

0:18przykład v-text wstawi w formie tekstowej tutaj to, co

0:22mamy full name. Okazuje się, że to jest akurat computed property i bez

0:26problemu nam to zadziała tutaj po odświeżeniu. Pokazałem ci również, że wewnątrz takich

0:31atrybutów możemy korzystać z wyrażeń JavaScript'owych, więc gdybym tutaj dodał dwójkę

0:35zostanie to w taki oto sposób połączone, więc to już wiesz, ale

0:39teraz pytanie co by było gdybyś chciał dynamicznie przypisać na przykład adres

0:43URL. Powiedzmy, że mamy tutaj tego pana Jana Kowalskiego i że

0:47on ma jakąś swoją stronę internetową i chciałbym tutaj do niej przypisać link,

0:52moglibyśmy to wydawałoby się zrobić tak, URL

0:57i tutaj byśmy też sobie wyświetlili ten adres, okej.

1:02No i on musi być gdzieś dostępny. Wiem, że na razie to wszystko jest takie statyczne

1:06i może nie widzisz do końca sensu po co mielibyśmy tutaj coś na sztywno wpisywać,

1:11ale zapewniam cię że kiedy na przykład pobierzemy dane json'owe i w pętli je

1:15będziemy wyświetlać to wtedy będziemy z nich mogli takie rzeczy wyciągać i podstawie

1:19jego atrybuty, więc to naprawdę się przyda. Natomiast na razie wpiszemy to w sposób statyczny, byłoby to

1:24Jan Kowalski pl. Powiedzmy coś

1:28w tym stylu, no i sprawdzimy jak nam się to zachowa na naszej stronie. Widzimy,

1:33że tekst się wyrenderował, rzeczywiście. Sprawdźmy jaki

1:37jest atrybut, nic się tutaj nie podmieniło i Vue, co

1:41jest świetne, dał nam ostrzeżenie. Tutaj jest napisane, że interpolation inside attribute has

1:47been removed. Czyli widzimy, że kiedyś i to jest prawda, w Vue js

1:52można było interpolować wartości atrybutów, ale to zostało usunięte i teraz

1:56żeby przepisać coś dynamicznie do atrybutu, musimy to zrobić za pomocą v-bind,

2:01czyli specjalnej dyrektywy i teraz będę chciał ci pokazać jak z niej skorzystać. Nie

2:06będziemy w ogóle mieli wtedy tego prawdziwego atrybutu html, bo

2:10co jest jeszcze niesłychanie ważne. Później w kursie będziemy pracować na templatkach, które

2:14będą prekompilowane zanim w ogóle trafią do przeglądarki, natomiast to tutaj

2:19jest to żywy kod HTML, bo przeglądarka kiedy wczytuje tą stronę, zanim

2:23w ogóle dojdzie do tego skryptu Vue, dla niej to jest normalny kod html, więc

2:27wszystko co jest tutaj musi być w jaki sposób kompatybilne ze specyfikacją

2:32html. No i to co tutaj jest na razie rzeczywiście jest kompatybilne, bo możemy

2:36sobie dowolnie nazywać atrybuty, nie ma problemu i tak dalej, więc Vue jeżeli sobie

2:41później wyszuka tych elementów, może te atrybuty sczytać. Z tą kompatybilnością

2:45będą pewne problemy, ale o tym powiemy sobie później w tym kursie. Natomiast

2:49jeżeli usuniemy atrybut href i skorzystamy

2:53z v-bind, to możemy po dwukropku napisać

2:58href, czyli nazwę docelowego atrybutu i dopiero

3:02tutaj podać wartość, którą tutaj chcemy mieć bez tych nawiasów

3:06interpolacyjnych, tylko po prostu w ten sposób. Ważne, że tutaj też może

3:10być wrażenie, czyli do tego co będzie w URL mogę jeszcze dopisać dwójkę. Mogę

3:14tutaj wywołać metodę, mogę tutaj podać computed property, ale ważne jest, żeby

3:18to było v-bind kropka dwukropek href. Okej,

3:22zobaczmy, czyli przeglądarka jeszcze wracając do tej kompatybilności kiedy wczytuje tą stronę,

3:26nie będzie miała atrybutu href, ale będzie taki oto atrybut i okazuje się, że atrybuty

3:31na przykład z dwukropkiem są poprawne i przeglądarka po prostu taki

3:35element wyświetli, ten atrybut przeglądarka zignoruje ona go doda do

3:39drzewa DOM, ale go zignoruje i Vue.js może znaleźć taki atrybut, odetnie

3:44sobie powiedzmy tę część, sczyta to co jest tutaj i będzie wiedział o

3:48jaki atrybut docelowy nam chodzi, więc teraz jeżeli odświeżymy, nie ma błędu i jeżeli

3:53tutaj przejdziemy to widzimy, że href został poprawnie dodany, więc zadziałało

3:57to jak najbardziej poprawnie. Mógłbyś natomiast się zastanawiać, to

4:01też tak w formie ciekawostki. Jak Vue sobie pobiera na przykład wszystkie takie

4:05atrybuty. Można to zrobić na jeden z wielu sposobów, ale powiedzmy, że tutaj byśmy

4:10taki atrybut dali, czyli do miejsca, gdzie niektóre nie jest kontrolowany przez Vue,

4:14na przykład Vue bind coś,

4:19równa się coś innego, bo

4:24chcę ci tylko pokazać, że tak długo, jak te nazwy tutaj są kompatybiln,e

4:28a twórcy Vue zadbali o to, żeby to działało w przeglądarkach, tak długo później ten

4:32framework może się do nich odwołać, czyli tutaj jeżeli dodaliśmy coś takiego, to

4:36po zaznaczoniu tego elementu taki trik w konsoli przeglądarki to jest niezależne

4:41od Vue. Pod dolar zero mamy ten element pod który kliknęliśmy i można

4:45się odwołać do takiego obiektu tablicopodobnego, który się nazywa attributes. To

4:50jest dostępne w przeglądarkach i to nam wraca taką mapę gdzie mamy wszystkie te atrybuty,

4:54więc powiedzmy, że gdybyś ty pisał Vue, mógłbyś na elemencie się odwołać do attributes,

4:58przeliterować po tej pseudotablicy, pseudoobiekcie i zobaczyć,

5:03że tam jest coś takiego jak v-bind, odciąć sobie pewną

5:07część i mamy docelową nazwę atrybutu, to tak w formie tylko ciekawostki

5:11i żebyś pamiętał, że to wszystko musi być jeżeli te

5:15templatki są w przeglądarce renderowane, kompatybilne ze specyfikacją html i tak

5:20też jest w tym momencie. Okej, no i oczywiście wszystkie rzeczy możesz

5:24sobie tutaj w taki sposób zapisywać. Moglibyśmy mieć obrazek, który

5:28miałby tag img i src, zapisałby

5:33za pomocą v-bind src i tutaj łapie wartość tego

5:37oto obrazka. Też by to zadziałało jak najbardziej poprawnie, ale co ciekawe jest to

5:41pewnie skrót i żebyś ty pamiętał o pełnej wersji o skrócie, to ja w tym kursie wielokrotnie

5:46jeszcze będę o tym mówił. Zamiast pisać v-bind href, wystarczy, że napiszemy

5:50samo dwukropek href, oczywiście samo href będzie natywne

5:54w przeglądarce i to nam nie zadziała. Natomiast dwukropek href jest też poprawną

6:00w htmlu nazwą atrybutu, czyli przeglądarka go doda,

6:04nie usunie go, kiedy się wczyta Vue będzie mogła taki atrybut znaleźć i go podmienić,

6:08czyli v-bind dwukropek href albo samo dwukropek href. Działa

6:12to dokładnie tak samo, jak widzisz i dowolny atrybut w ten sposób

6:17można będzie dodać do wspomnianego obrazka byłoby to dwukropek src. Pamiętaj,

6:21że tutaj można dowolne wyrażenia JavaScript'owe również wpisywać. Mówiłem

6:26ci tylko, że w takich wyrażeniach nie można korzystać na przykład z if, ale pamiętaj, że taki

6:30ternarny operator działa, czyli tutaj na przykład można by było powiedzieć, że jeżeli

6:35coś jeżeli jest URL to tutaj wyświetl

6:39coś, jeżeli go nie ma to coś innego. Wiem, że w tym przypadku nie

6:43ma to sensu, ale chodzi mi o to, że tutaj if'y w jaki sposób wyrażenia zrobić

6:47można. No i wtedy tutaj docelowo pojawi się coś bo URL

6:51tutaj istniał. Natomiast, żeby tego nie psuć

6:55zostawmy to w takiej formie i mamy z zbindowany

6:59atrybut href. Oczywiście więcej atrybutów tutaj można dodać ten sposób

7:03v-bind dwukropek nazwa lub dwukropek nazwa i tutaj wartość. Poza

7:09tym tyle w tej lekcji i jak widzisz już ten cały system tego

7:13templating'u zaczyna nabierać więcej sensu, mamy interpolacje, mamy

7:18dyrektywy, które pozwalają nam dynamicznie przepisywać atrybuty, później

7:22zobaczysz, że mamy jeszcze instrukcję warunkową wyświetlająca treść oraz instrukcje

7:27tworzące nam pętle.