Vue.js: Uchwyty do elementów z DOM

Vue.js 2.5.x

0:00W tej lekcji pokażę ci w jaki sposób możemy przypisywać referencje do

0:04elementów z obiektowego modelu dokumentu po to, abyśmy się mogli do

0:08nich odwoływać w naszej aplikacji Vue i przy okazji pokażę ci

0:12pewien problem, który będzie rozwiązany przez kolejną rzecz, którą poznasz

0:16o Vue, w lekcji kolejnej. Natomiast chciałbym ci to pokazać, żebyś po prostu lepiej

0:21to zrozumiał, więc mamy taki oto formularz i teraz chciałbym zrobić tak,

0:25że jak tutaj wpiszę sobie jakieś dane i kliknę wyślij, to te dane zostaną tutaj

0:29wyświetlane jako twoje dane. Teraz to wygląda tak, że twoje

0:34dane wyświetlam tutaj jako full name, a to full name, jak widzisz jest puste i

0:38teraz chciałbym po kliknięciu przycisku, kiedy przechwycimy

0:42zdarzenie submit, wywołać metodę submit. Ona jest tutaj

0:46i w niej chciałbym się móc odwołać do pola input, które jest

0:50tutaj i do tego pola input. Pytanie, jak to zrobić, ciekawa

0:54wiadomość jest taka, że Vue pozwala ci przepisywać do dowolnego elementu atrybut ref. Nie bindujemy go w

1:00żaden sposób, po prostu go przypisujemy przekazując mu nazwę. Możesz ją dowolnie

1:04tutaj sobie wstawić, jaką tylko chcesz, napisz my first name i last

1:08name i jeżeli zrobisz coś takiego, bardzo ważna rzecz. Odświeżmy, jeżeli

1:14przejdziemy tutaj do wm0 i zrobimy console.dir,

1:18chociaż w zasadzie nie musimy robić console.dir, od razu się odwołajmy do vm0 dollar,

1:23czyli wiemy, że jest taka rzecz specyficzna dla Vue i mamy coś takiego jak

1:27refs, to będzie to obiekt, w którym będziemy mieli first name i last name. Dokładnie

1:32to, co podaliśmy tutaj, jako te nazwy. Jako wartość pod taką właściwością

1:37będzie odwołanie do elementu z drzewa DOM, normalnie dokładnie tak

1:41samo jak byśmy go wyszukali za pomocą query selector lub jeżeli go tutaj kliknę

1:45i mam dolar zero taką zmienną w przeglądarce. Jak

1:49widzisz dokładnie tak samo to wygląda, czyli to jest natywny element i

1:53teraz na tym natywnym elemencie mogę się odwołać do value, więc mając coś takiego,

1:57moglibyśmy zrobić na submit, coś takiego, że będziemy robić

2:01this full name i tę wartość, ona jest reaktywna. Jeżeli ją ustawimy,

2:05to na stronie będzie odzwierciedlona, moglibyśmy ustawić na this, refs, first

2:10name i połączyć to oczywiście z this refs,

2:15last name. Okej, zobaczymy.

2:20Jeżeli tutaj coś sobie wpiszę i spróbuję

2:24wysłać, jak widzisz pojawiło się to tutaj, ale mamy

2:28reprezentacje taką, bo first name i last name to są elementy input, więc

2:32muszę value z nich zczytać oczywiście, ich właściwości value. Zobaczmy

2:37raz jeszcze i mamy to teraz

2:41tutaj. Natomiast nie jest to najlepszy sposób na to, żeby z pól input

2:45zczytować wartości value. W kolejnej lekcji zobaczysz

2:49jak zrobić to lepiej, ale ja jeszcze w tej lekcji pokażę ci lepsze użycia dla ref. Natomiast

2:54od razu ci powiem że ref nie są reaktywne, czyli nie

2:58jesteś w stanie zrobić sobie czego takiego, że dodasz computed full

3:05name i gdybyś

3:10tutaj chciał zwracać, return. Coś

3:16takiego, tutaj full name wtedy byśmy musieli usunąć, okej. No

3:21i tutaj jeszcze to przypisanie, byśmy usunęli. Wydawałoby się, że

3:25to nam zadziała. Natomiast jak widzisz pojawia się

3:29problem. Po pierwsze dlatego, że w momencie kiedy to computed jest

3:34tworzone, to jeszcze nie są utworzone te referencje

3:38do drzewa DOM, bo pokazywałem ci lifecycle diagram i to nie

3:42bez powodu, warto sobie teraz do tego sięgnąć warto o tym pomyśleć.

3:46Mianowicie kiedy jest można instancja to nie ma ona jeszcze dostępu

3:50do drzewa DOM, dopiero kiedy wywoła się zderzeniem mounted, jak być może pamiętasz,

3:55to dopiero wtedy to co jest w drzewie DOM, jest

3:59dla nas dostępne, więc z tego powodu nam to nie zadziała, ale nawet gdybyśmy to obeszli

4:03i tutaj sprawdzili sobie if. Na przykład this

4:07is mounted, oczywiście coś takiego

4:11nie istnieje, ale już ci spieszę z wyjaśnieniem. Moglibyśmy to zrobić w

4:15ten sposób. Jeżeli this is mounted ma wartość true, to

4:20moglibyśmy dodać sobie is mounted na false, a w

4:24tym zdarzeniu, które ci pokazywałem, które się nazywa właśnie mounted. Moglibyśmy this

4:31is mounted ustawić na true, czyli zrobilibyśmy swego rodzaju obejście,

4:35żeby tego problemu nie było, kiedy będzie zamontowana ta instancja już do drzewa DOM,

4:40to refs będzie dostępne. Wydawałoby się, że powinno to zadziałać, ale

4:46jak widzisz nie działa w sposób reaktywny, nie jest tutaj wstawiane, więc warto

4:50zapamiętać, że refs nie są reaktywne w żaden sposób. Jeżeli w

4:54nich się coś zmieni, tutaj w value, nie jest to żaden sposób odzwierciedlane. Warto

4:58o tym pamiętać i z tego powodu nam to nie będzie działać, ale ja to zostawię tak

5:02w tym chodzi żebyś mógł sobie do tego zerknąć. Natomiast teraz chciałbym ci jeszcze pokazać na

5:06koniec, jakie będzie poprawne użycie takich ref'ów, do czego one się

5:10mogą przydać. Utworzymy sobie nową instancje Vue, bo oczywiście można to

5:14robić chociaż jeszcze tego nie robiliśmy. Ja będę chciał wkleić fragment kodu

5:18tutaj z odtwarzaczem,

5:23już ci pokażę na czym sprawa polega. Okej,

5:27tutaj pojawił się błąd, zaraz do tego przejdziemy, ale mamy jakieś wideo i po kliknięciu

5:31na przycisk, tutaj będę chciał

5:35wywołać metodę play pause, ta metoda nie istnieje i ważne

5:39jest to, w ogóle może wytniemy to z tego miejsca i wstawmy poza app, żeby Vue tego

5:43nie kontrolowało. App kończy się w tym miejscu, wstawimy to tutaj. Teraz

5:48tego błędu nie będzie, bo jest to fragment zupełnie nie kontrolowany przez Vue i dodamy

5:53sobie po prostu nową instancje. Nikt nie powiedział, że nie możemy tego zrobić, new vue

5:57i tutaj el podajmy sobie player, czyli ta instancja

6:01będziemy kontrolować wyłącznie tego playera i pozwól, że resztę kodu

6:05tutaj wkleję, jeżeli będziesz chciał sobie go przećwiczyć to będziesz mógł go przepisać,

6:09okej, data

6:14is playing to jest false i mamy metody play, pause. No właśnie i

6:18teraz ważna rzecz, którą zrobiłem tutaj. Konkretnie do elementu video przepisałem

6:22ref, właśnie z wartością video. To mi pozwoli się odwołać

6:26do tego elementu, a ważne jest to, że w przeglądarce, jeżeli mamy taki element,

6:30teraz jeśli to odświeżę to będzie działać. Czyli mam to video pod dolar zero

6:35to mogę na nim wywołać metodę play i to

6:39wszystko się odtwarza, metoda pause, zatrzyma mi odtwarzanie

6:43tego filmu, więc to natywnie po prostu tak działa w przeglądarce i to jest świetny

6:47moment, żeby użyć ref'a. W momencie kiedy kliknę na ten przycisk, chcę wywołać

6:51metodę play, pause i też ustawić tekst z tego przycisku za pomocą v-text,

6:56jeżeli jest odtwarzanie, to chcę ustawić na pause, jeżeli nie

7:00to na play. Metoda play, pause jest bardzo prosta. Ona się odwoła to this refs

7:04video, czyli konkretnie do tego elementu. Zapiszę go sobie w zmiennej i sprawdzę,

7:08jeżeli on jest z otrzymanych, chcę go odtworzyć isPlaying ustawić na true, w przeciwnym

7:13wypadku zatrzymać. To jest bardzo dobre użycie dla

7:17ref, czyli potrzebowałem odwołanie do tego elementu, bo jest to jedyny sposób w

7:21jaki mogę odtwarzać wideo w przeglądarce i zobaczymy w jaki sposób to działa.

7:25Jeżeli kliknę play, video jest odtwarzane, tekst się zmienił, klikam pause,

7:29video jest zatrzymywane, więc zapamiętaj w tym momencie, że jeżeli

7:33będziesz chciał pobierać wartości pól formularza to nato będziemy mieli lepsze rozwiązanie

7:38natomiast. Natomiast ref sprawdzi się świetnie wszędzie tam, gdzie Vue nie oferuje

7:42ci rozwiązania, które jest ci potrzebne, aby odwołać się w jakiś sposób do elementu

7:46bezpośrednio z drzewa DOM.