Vue.js: Metody

Vue.js 2.5.x

0:00Wiesz już w jaki sposób wyświetlać dane z użyciem Vue na

0:04stronie internetowej. Oczywiście są to na razie podstawy, ale już to zobaczyłaś. Również

0:08dowiedziałeś się w jaki sposób działa Virtual DOM, czyli

0:12w jaki sposób Vue wie, które części drzewa ma zmieniać,

0:17a których nie. W tej lekcji natomiast, pokażę ci jak

0:21możemy pracować z metodami, dlatego że tutaj do data dodajemy

0:25sobie wszystkie rzeczy, które chcemy gdzieś wyświetlać na stronie

0:30lub z których chcemy skorzystać na przykład w metodach i teraz

0:34ważne jest to, że metody również dodajemy w tym obiekcie, czyli w zasadzie ten obiekt konfiguracyjny

0:38na nowej instancji Vue jest niesłychanie ważny, bo wszystkie istotne

0:42rzeczy dodajemy właśnie tutaj, więc będziemy chcieli tutaj sobie dodać

0:47obiekt methods, zwyczajny

0:51obiekt i w nim będziemy mogli dodawać metody w taki oto sposób. Na

0:55przykład dodamy sobie metodę powiedzmy toUppercase i

1:00będzie to po prostu funkcja. Ja bym chciał, żeby

1:04ta funkcja przyjmowała jakiś parametr, więc powiedzmy, że będzie

1:08to tekst albo value, bo

1:12nie chciałbym ci tutaj pomieszać, że jeżeli tutaj mamy nazwę tekst, to to ma z tym coś

1:16wspólnego. Chciałbym, żeby ona zwracała return value

1:21toUppercase, powiem ci od razu, że do tego konkretnego celu, żeby

1:25string zamienić na wielkie litery, lepszy będzie filter. O filtrach powiemy

1:29sobie później. Natomiast chciałbym ci pokazać w jaki sposób w ogóle wywołuje się metody, jak się przekazuje

1:34parametr, a więc w miejscu gdzie normalnie wywołaliśmy tekst i mówiłem

1:39ci, że wszystko co wpisujemy tutaj to jest odzwierciedlenie tego co jest w data, czyli data kropka

1:43text. To tutaj samo text, to okazuje się, że możemy tutaj również skorzystać

1:47z metody. Mogę napisać toUppercase, tylko że z metody

1:51korzystamy w ten sposób, czyli wywołujemy ją jako funkcję. Nie musimy jej przekazywać

1:56żadnej wartości i będzie to działać poprawnie jeżeli ta metoda zwraca

2:00jakiś string lub inną wartość, która może być zamieniona na string i tutaj podstawiona.

2:04Natomiast ja od razu stworzyłem funkcję, która przyjmuje jakąś wartość, żeby ci pokazać

2:08jedną ciekawą rzecz. Mogę tutaj wstawić tekst w taki oto sposób. Odświeżymy

2:16to i zobaczymy Witaj Świecie zamienione na wielkie litery, ale nie muszę tego

2:20wpisywać sposób ręczny. Mogę tutaj napisać samo tekst i okaże

2:24się, że Vue wie, że chodzi o tekst, właśnie który znajduje się

2:28w data. Zobacz co tutaj się wydarzy. Witaj świecie. Witaj

2:33w świecie Vue.js, czyli taki prosty napis pozwoli mi

2:37wywołać metodę podaną w obiekcie methods i przekazać

2:41jej tekst, czyli właściwość, która znajduje się w tym miejscu i to co

2:46jest niesłychanie ważne, jeżeli teraz byśmy zmienili tekst to Vue wywoła tę

2:51metodę od nowa i to tutaj podmieni na razie jeszcze ci nie pokazałem

2:55w jaki sposób można obsługiwać zdarzenia, żebyśmy mogli to zmienić, dlatego będziemy pracować

2:59tutaj w tym narzędziu deweloperskim. Zmieńmy sobie ten heading na,

3:03znaczy w zasadzie ten tekst na Witaj w Świecie Vue.js,

3:07dodam sobie tutaj trzy wykrzykniki wciskam enter i zobacz Vue to odzwierciedlił

3:12tutaj na stronie, czyli po pierwsze zmienił się tekst. Po drugie została

3:16wywołana metoda, która zamieniła go na wielkie litery i tekst tego paragrafu

3:20został zaktualizowany, co ważne za pomocą Virtual DOM, Vue w ogóle

3:24nie ruszył tego oto elementu h1, dlatego może być tak bardzo wydajny,

3:29nie zmienia wszystkiego, jeżeli dane się nie zmieniły, heading się nie zmienił,

3:33więc nie ma potrzeby renderowania tego od nowa. Jak zatem widzisz,

3:37nie tylko właściwości dodane w data są proksowane do głównej instancji,

3:41bo możemy na niej się odwoływać właśnie dolar vn0 kropka

3:46heading, da nam ten string, ale kropka toUppercase

3:51pozwoli nam się odwołać do tej metody, czyli na główną instancje są proksowane

3:55wszystkie rzeczy, które znajdują się w data, ale również w methods i nie

3:59tylko, bo jeszcze będziemy mieli coś co nazywa się computed properties i o tym powiemy

4:03sobie w lekcji kolejnej. Jak później się przekonasz metody będziemy wykorzystywać

4:08na przykład po kliknięciu na jakiś element i tak dalej, więc będzie opcja

4:12taka, aby je wywoływać w sposób inny niż wpisując

4:16je tutaj, bo oczywiście można to robić, ale metody mogą być bardziej ogólne. Metody

4:21wcale nie muszą być tutaj wykorzystywane, bo możemy mieć metodę, która na przykład pobiera

4:25jakieś nowe dane serwera i po prostu aktualizuje coś wewnątrz data. Jeżeli

4:30metoda to zrobi to vue to odzwierciedli na stronie, dlatego teraz jeszcze

4:34chciałem dodać sobie jedną metodę i może to będzie

4:38metoda o nazwie get name i będę

4:47chciał zrobić tutaj jeszcze jeden paragraf, imię

4:53i tutaj będę chciał podstawić name, więc

4:58co jest bardzo ważne, że to nam w ogóle zadziałało muszę już na początku

5:02tworzenia tej instancji dodać tutaj name. Może

5:06to być pusty ciąg znaków, ale być tutaj musi i teraz dodamy

5:10sobie metodę get name, która zapyta użytkownika o jego

5:14imię i przepisze to do name i teraz żeby

5:18się w metodach odwołać do tych wartości, które są tutaj w data to

5:22robimy to poprzez this kropka nazwa metody. This jest

5:27to cała instancja, czyli to samo co byłoby zwrócone tutaj gdybym to przechwycił w zmiennej

5:31i to samo co mamy tutaj pod taką utworzoną przez Vue devtools zmienną,

5:35czyli tak jak wspomniałem wszystko jest proksowane z obiektu data na

5:39główną instancje, dlatego this kropka name będzie kierować tutaj, więc

5:43jeżeli napiszę sobie this name równa się prompt.

5:47Podaj swoje imię to

5:52w momencie kiedy wywołamy metodę get name, powinniśmy w ten sposób przypisać

5:58to do name, to co ktoś poda, a Vue automatycznie powinien zmienić treść tego paragrafu. Po

6:02odświeżeniu nic się nie zmieni, ale jeśli tą metoda wywołamy i wiemy, że możemy

6:06to zrobić za pomocą vn0 i wywołanie

6:11metody, czyli get name. Okej,

6:15mamy tutaj błąd, to było chyba dolar vn0.

6:19Zobaczymy czy to na pewno nazwałem

6:23w ten sposób, zgadza się. Odświeżmy, widzimy,

6:29że vn0 nie jest tutaj dostępne, a być powinno, za

6:33pomocą tego oto zapisu. Okej, czyli

6:38to musi być kliknięte, nie wiem czy jest jakiś back czy tak być powinno. Jeżeli kliknąłem to vm0,

6:43to wtedy to się pojawia tutaj, więc ta metoda rzeczywiście wreszcie nam się odwołała. Pojawi

6:48się prompt i ten prompt tak naprawdę blokuje wykonywanie kodu JavaScript, więc

6:52dopiero jak podam wartość, to ona jest zapisywana tutaj. No więc napiszmy sobie

6:56tutaj jakieś imię Piotr i zobacz od razu

7:00to się pojawiło na stronie, czyli z tej lekcji zapamiętaj tyle, że

7:05z metod możemy korzystać wewnątrz tutaj tych interpolacji, gdzie

7:09chcemy coś wstawić, może będą przekazywać parametry. Nazwa parametru tutaj

7:13od razu jest brana na przykład z data, ale nie tylko, bo

7:17będzie również mogła być brane z computed properties o której w lekcji kolejnej, a po

7:21drugie metody można również wywoływać inny sposób, czyli wcale nie muszą być gdzieś tutaj

7:25w taki sposób wywoływane, będziemy mogli później po kliknięciu w jakiś element

7:29wywołać metodę, która na przykład pobierze dane serwera, przypisze je do

7:33jakiegoś obiektu, czy do jakieś tablicy, która będzie wewnątrz data jeżeli gdzieś z niej korzystaliśmy

7:38w templatce, czyli w szablonie to Vue nam to na stronie zaktualizuje.