Vue.js: Hello World z Vue

Vue.js 2.5.x

0:00W tej lekcji stworzymy sobie swoją pierwszą aplikację i będzie to Hello World. Oczywiście

0:05tego nie może zabraknąć w żadnym kursie, gdzie omawiamy jakiś język programowania czy

0:09nowe narzędzie i będzie to oczywiście z użyciem Vue, więc

0:14zobacz mam taką prostą stronę na której na razie nie ma nic dynamicznego mamy

0:18aplikację, czyli w zasadzie jest to div z identyfikatorem app, który moment

0:23tam się przyda i dwa teksty wstawione na sztywno i teraz będziemy

0:27chcieli te teksty móc podmienić dynamicznie z użyciem Vue. Vue jest

0:31dołączone do strony, więc tak jak ci w lekcji poprzedniej pokazałem, tutaj będzie można z niego

0:35korzystać. Nic nie stoi na przeszkodzie, żeby ten kod, który tutaj wpiszę podłączyć

0:39w osobnym pliku JavaScript'owym, ale na razie będzie go na tyle mało, że możemy go wpisywać

0:44tutaj ręcznie czy w zasadzie bezpośrednio w tym pliku html'owym

0:48i teraz z Vue korzysta się na jeden

0:53z kilku sposobów, ale na początek kiedy jeszcze nie będziemy mówić o

0:57komponentach i o tego typu rzeczach to będziemy tworzyć nową instancję, czyli

1:01mamy globalny taki konstruktor Vue i możemy stworzyć

1:06za jego pomocą nową instancję, czyli w języku JavaScript możemy

1:10tak tworzyć nowe obiekty, a Vue możemy postrzegać jak swego rodzaju klasę i oczywiście

1:15możemy to przechwycić i zapisać w jakiejś zmiennej. Często zapisujemy to w zmiennej vm jak Vue

1:21model. Do tego wrócimy jeszcze później. Aczkolwiek w tym przykładzie

1:25nie będzie to konieczne. Po prostu tworzymy new Vue i super

1:29ważna rzecz, przekazujemy tutaj obiekt konfiguracyjny. Nie musi on być w

1:33tej przekazane jak to bywa w javascripcie bezpośrednio możesz go mieć jakieś

1:37zmiennej i tutaj przekazać jej nazwę. Natomiast wpiszemy go tutaj bezpośrednio i

1:41pierwszą z rzeczy, która będzie dla nas ważne jest to, aby powiedzieć Vue,

1:45którą część stronę ma kontrolować i ważne jest to że

1:49Vue może być dodany do strony i może kontrolować tylko wybraną jej

1:54sekcję, dlatego chciałbym żeby Vue kontrolowało to co znajduje się tutaj wewnątrz

1:59tego div'a app. Stąd tutaj możemy napisać el jak element i pobrać

2:03selektor CSS, który będzie właśnie odpowiadał elementowi

2:08na stronie, a więc hash app to jest po identyfikatorze ten element i

2:12to oznacza, że ten element i wszystko co jest wewnątrz będzie kontrolowane przez

2:16Vue pytanie brzmi co się stanie kiedy odświeżymy. Zupełnie

2:20nic, bo teraz musimy jeszcze dodać sobie kilka rzeczy,

2:25żeby to wszystko mogło działać poprawnie. Po pierwsze i co jest również

2:29szczególnie ważne, dodać obiekt o nazwie data. Jak

2:33widzisz jest to zwyczajny obiekt, ale w niej wpisujemy wszystkie dane, które chcemy, aby

2:37mogły być wykorzystywane wewnątrz szablonu, a szablonem

2:41będzie teraz tutaj wszystko, co znajduje się wewnątrz tego elementu. Jeśli

2:45zatem Hello World będę chciał za moment podmienić na message, to

2:50mogę tutaj napisać message lub może lepiej tutaj będzie  napisać heading i

2:54wpiszemy sobie Hello World. A to co jest poniżej to będzie

2:58powiedzmy text. Wpiszemy sobie to co jest w tym miejscu. Będę

3:02chciał żeby Vue wstawiło to za dynamicznie w te miejsca i teraz

3:06kiedy Vue kontroluje jakiś element, jakąś wybraną sekcje naszej

3:10strony, to okazuje się, że jej elementy html mogą być

3:15w ciekawy sposób używane. Po pierwsze będzie mieli różne dyrektywy

3:19dodawane w postaci atrybutów, o tym powiemy później, ale

3:23dodatkowo wewnątrz takiego elementu, czyli w jego treści będziemy mogli korzystać z takiego

3:28oto zapisu. Jest to system templating'u dla Vue, troszeczkę

3:32podobny na przykład do Moustashe lub do Handlebars.js. Natomiast działa

3:36on nieco inaczej, ale w ten sposób możemy wyświetlić jakieś dane i mogę

3:41tutaj wpisać heading, a pod spodem możemy zrobić to samo i wpisać

3:47tutaj tekst i to co jest ważne. No to już się pewnie domyślasz, że

3:51heading i tekst to są właściwości obiektu data, czyli ten obiekt zawsze się tak nazywa,

3:55ale to co jest wewnątrz, zależy już od nas i to powinno zostać tutaj podstawione,

4:00więc jeżeli przejdę i odświeżę. Zauważ, że nic się na naszej stronie

4:04nie zmieniło. Dokładnie tak też jest. To działa bardzo szybko,

4:08bo pliki chociaż wczytaliśmy je tutaj z zewnątrz, to są wczytywane w

4:12pamięci podręcznej, ale gdybyśmy w network przeszli i zaznaczyli disable

4:16cashe, to wtedy one są pobierane z internetu i widzisz kiedy

4:20ja odświeżam, że przez chwilkę widać ten oryginalny tekst

4:24czyIi właśnie to, co widzimy tutaj. Przeglądarka to renderuje,

4:28a dopiero kiedy wczyta Vue. Kiedy Vue to podmieni to to się zmienia, więc to po prostu tutaj

4:32widać i żeby to obejść to od razu pokaże ci pierwszą dyrektyw

4:37dostępną w Vue Wszystkie dyrektywy Vue są to

4:41atrybuty, które są poprzedzone takim przedrostkiem v pauza i jedną

4:46z takich dyrektyw jest cloak v-cloak

4:50i nie ma żadnej wartości, jest tylko taki atrybut. Sam sobie ten atrybut tutaj

4:54nic nie robi, ale okazuje się, że Vue kiedy się wczyta to

4:59usuwa ten atrybut, czyli zobacz, aplikacja już nie ma tego atrybutu i dzięki

5:03temu możemy w CSS do wszystkich elementów, które

5:07mają takie atrybut v-cloak. Przypisać na przykład

5:11display none lub visibility hidden, to zależy od ciebie. Dzięki temu

5:15kiedy przeglądarka wczytuje ten kot zobacz taki atrybut to po prostu ukryje

5:19ten element, a kiedy Vue się wczyta usunie ten atrybut i element zostanie pokazany

5:24i zobacz teraz kiedy odświeżam, nie widzimy już tych oryginalnych

5:28wartości, które są tutaj i dzięki temu wygląda to nieco lepiej. Natomiast ja wrócę

5:32do zaznaczenia tutaj czy oznaczenia disable cashe, żeby

5:36te pliki były wczytywane. Jak widzimy tutaj z pamięci podręcznej, co

5:40ważne, w obiekcie data możemy również wstawiać zagnieżdżone

5:44jakieś wartości. Tutaj mogą być tablice, tutaj mogą być obiekty, tekst to

5:49mógł być obiekt, w którym będą kolejne właściwości i wtedy tutaj po kropce byśmy się do

5:53nich odwoływali. Więc jak najbardziej jest to możliwe. Natomiast teraz jeszcze chcę ci

5:57pokazać, że jeżeli byśmy przeszli do tego naszego panelu Vue, czyli Vue devtools, które zainstalowaliśmy, to

6:03okaże się, że po kliknięciu na root mamy dostęp do tych

6:08wartości i możemy je zmienić i to co jest esencją Vue, to to,

6:13że jeżeli zmienią się dane, które są tutaj w obiekcie data, to zostanie

6:17to odzwierciedlone w drzewie DOM, czyli na stronie. No i Vue jest bardzo wydajne,

6:21bo potrafi ocenić, że na przykład zmieniliśmy tylko dane w heading

6:26i wtedy zmieni tekst wyłącznie w tym elemencie. Natomiast nie będzie

6:30zmieniać elementu p. Natomiast niektóre frameworki, szczególnie

6:34dawniej, renderowały wszystko od nowa. Tutaj przy okazji zauważyłem, że to powinno

6:38być zamykające h1. W jaki sposób zatem Vue wie,

6:42które elementy ma zmienić. Otóż korzysta z czegoś co nazywa się Virtual

6:47DOM i omówimy to w kolejnej lekcji. Natomiast chce ci pokazać, że jeżeli coś tutaj zmienimy

6:51i możemy to zrobić w tym narzędzia Hello World i trzy wykrzykniki. Wciskam Enter,

6:55od razu jest na stronie odzwierciedlane. Natomiast oczywiście nie będziemy

6:59tego zmieniać i później tylko za pomocą różnych metod, ale o tym w kolejnych

7:03lekcjach. Co jednak jest ważne, to tutaj mamy zmienną dolar

7:07vm0 i możemy z niej skorzystać w konsoli vm0

7:12i to nam zwróci instancję Vue, czyli to jest dokładnie to samo, jakbym

7:17tutaj sobie przechwycił, napisał vm, to w przeglądarce

7:21również mógłbym napisać vm kropka i coś wykonać. Natomiast jeżeli tego

7:25nie zrobię to to narzędzie za mnie tworzy taką zmienną i co

7:29ważne, mogę się odwoływać bezpośrednio do właściwości, które dodaliśmy na data, czyli

7:34nie muszę tutaj pisać w żaden sposób data i następnie na przykład tekst, ale

7:38od razu mogę zmienić tekst, na przykład na Witaj Świecie,

7:43wciskam enter i zobacz na

7:47stronie zostało to od razu zmienione. Czyli to co jest ważne i

7:51o tym jeszcze będzie mówić w jednej z kolejnych lekcji, to wszystko to co my dodamy

7:55w data za pomocą Vue jest proksowane do głównej instancji,

7:59czyli instancja, która tu jest zwracana zawiera na sobie bezpośrednio

8:03to co oddaliśmy tutaj, czyli Vue, można powiedzieć, że iteruje przez ten obiekt data i

8:07jeżeli tutaj widzisz heading to do this heading dodaję sobie coś, ale

8:12co to jest to powiemy o tym później i dzięki temu bezpośrednio możemy się w ten

8:16sposób na tych instancjach odwoływać. Natomiast później w metodach, które ci pokażę w jednej

8:20z kolejnej lekcji, będziemy mogli napisać na przykład this.heading i zmieniać te

8:24wartości. Okej, zatem to jest nasz prosty przykład, takiej

8:28aplikacji Hello World, dowiedziałeś się w jaki sposób możemy podmieniać

8:33tekst. W jaki sposób dodajemy dane i bardzo ważne, jest to obiekt obiekt

8:37data, bo to jest tak zwany Single Source of Truth, czyli zawsze coś

8:41będziemy zmieniać tutaj, a zadaniem Vue będzie odzwierciedlenie to tego

8:45na stronie i również dowiedziałeś się już co nieco na temat dyrektyw. Dyrektywy są

8:50to atrybuty, które czasami mają wartości i zawsze są poprzedzone

8:54przedrostkiem v pauza, w tym przypadku v-cloak sprawia,

8:58że możemy ukryć taką aplikację, taki fragment naszej strony

9:02do momentu aż Vue zostanie wczytane. Zatem to tyle w tej lekcji,

9:06w kolejnej lekcji odpowiemy sobie na pytanie jak tak naprawdę działa wirtualny

9:11DOM.