Vue.js: Wprowadzenie

Vue.js 2.5.x

0:00Witaj z tej strony Piotr Palarz z serwisu eduweb.pl. Mam dla

0:04ciebie kolejny kurs ze ścieżki Web Development, a tym razem jest to kurs framework'a

0:08vue.js. Jeżeli tą tematyką się interesujesz, to myślę,

0:13że jest nieprawdopodobne żebyś o tym narzędzi nie usłyszał w przeciągu kilku

0:17ostatnich miesięcy. Jest to framework, który konkuruje dzisiaj z Angularem

0:21czy React'em. Oczywiście jest w pewnym sensie i pewnych kwestiach

0:25podobny do tamtych rozwiązań, ale także w wielu kwestiach jest inny

0:29i wielu kwestiach może być lepszy. Chciałbym ci w tym kursie przedstawić ten framework

0:33absolutnie od podstaw i będzie to kurs, w którym zakładam,

0:37że wcale nie musisz już znać innych framework'ów. Nie będziemy porównywać Vue do

0:42innych tego typu rozwiązań. Tak więc jest to kurs absolutnie

0:46od podstaw dla osób które znają język JavaScript, więc jeżeli pracowałeś

0:50z tym językiem, znasz też jego pewne ograniczenia, w zasadzie ograniczenia,

0:54które wynikają z tego w jaki sposób pracuje się ze stronami internetowymi, czyli

0:59z obiektowym modelem dokumentu, z użyciem tego języka. Jeżeli na przykład pracowałeś

1:03z biblioteką jQuery, wiesz jak wiele ona dla nas problemów rozwiązywała,

1:08ale jak wiele nowych problemów pojawia się kiedy chcemy stworzyć chociaż troszkę

1:12bardziej zaawansowaną aplikacja. Do tego celu właśnie w ostatnich latach powstało

1:16mnóstwo framework'ów i jednym z nich jest Vue. Natomiast to,

1:20co mnie osobiście urzekło w tym frameworku to fakt, że jest on naprawdę prosty

1:25w użyciu. Łatwo jest zacząć pracować z Vue i nie potrzebujesz do tego

1:29celu znajomości całej otoczki, jak w przypadku innych frameworków, a więc

1:33jeżeli nie chcesz albo nie potrafisz jeszcze pracować z takimi narzędziami jak webpack.

1:37Jeżeli jeszcze nie poznałeś nowej składni EcmaScript6, ale chciałbyś tworzyć

1:41nowoczesne aplikacje internetowe to możesz korzystać z Vue. Możesz

1:45zacząć tworzyć z nim aplikację. Natomiast nie zrozum mnie proszę źle. To

1:49nie jest tak, że Vue nie oferuje nam dodatkowych narzędzi czy że z Vue

1:54nie wykorzystujemy nowego standardu EcmaScript6. Jak najbardziej

1:58możemy to robić i o tym też przekonasz się w tym kursie. Natomiast ja przygotowałem

2:02ten materiał od podstaw w ten sposób, aby na początku nie bombardować cię

2:06całym natłokiem dodatkowych narzędzi strój musiałbyś korzystać, tylko będziemy

2:10pisać prosty kod JavaScript wykorzystując właśnie ten framework. No

2:15zatem mógłbyś mnie teraz zapytać co ten framework może ci zaoferować albo

2:19w zasadzie co w tym kursie zostało przedstawione na temat tego narzędzia, a

2:24więc na samym początku oczywiście omówimy sobie jakie są różne wersje Vue

2:28i którą z nich wybrać żeby rozpocząć swoją przygodę z tym framework'iem. Następnie przejdziemy

2:33przez wszystkie rzeczy które moglibyśmy określić abecadłem Vue,

2:37czyli pokażę ci w jaki sposób możemy kontrolować wybraną

2:42część strony internetowej i ta część będzie kontrolowana

2:46przez Vue i przez naszą aplikacje, którą z użyciem tego framework'a stworzymy. Zobaczysz

2:51jak można manipulować szablonem html i w jaki sposób zmieniać

2:56dane i że te dane będą odzwierciedlone właśnie w wcześniej przygotowanym szablonie. W

3:00trakcie tego kursu poznasz oczywiście wszystkie najważniejsze koncepcje. Zobaczysz

3:05w jaki sposób warunkowo wyświetlać różne elementy. Jak pracować z eventami,

3:10takimi jak na przykład kliknięcie czy dowolny inny event,

3:14zdarzenie wewnątrz przeglądarki internetowej. Natomiast pokażę ci

3:18również bardziej zaawansowane koncepcje, takie jak komponenty z użyciem Vue

3:22i jak możemy się pomiędzy tymi komponentami komunikować. Powiemy

3:26sobie również o animacjach. Jest to świetna rzecz dostępna w tym framework'u. Zobaczysz

3:31jak łatwo można tworzyć płynne wydajne animacje CSS. Oczywiście

3:36w tym kursie nie zabraknie praktycznych przykładów. Na początek kiedy

3:40będziesz miał już wiedzą jaką podstawową z zakresu Vue, to stworzymy sobie counter,

3:45czyli będzie to taki moduł odliczenia od 10 do zera. Wydawałoby

3:49się, że proste rozwiązanie i rzeczywiście takie będzie, ale ono pokażę ci

3:53jak Vue zupełnie inaczej podchodzi do tematu aktualizowania danych na

3:57stronie niż robiliśmy to do tej pory w klasycznym podejściu. W jednym

4:02z projektów stworzymy sobie tabelę użytkowników, z której będzie można takiego użytkownika

4:06usunąć lub na przykład klikając na przycisk włączyć jego edycję

4:10wtedy cały wiersz zamieni się takie pole edycyjne będzie można dane

4:15z aktualizować i zapisać. To wszystko oczywiście będzie odzwierciedlone

4:19w jednym miejscu gdzie trzymane są dane i dzięki temu propagowane również

4:23później do naszego szablonu. Po kilku godzinach tego kursu, kiedy będziesz

4:27miał już solidną wiedzę z zakresu Vue będziesz wiedział jak ten framework działa

4:31będziemy mogli przejść do trochę bardziej zaawansowanych tematów gdzie włączymy

4:35już te wszystkie narzędzia, które na początku mogą odstraszać. Pokażę

4:40ci jak korzystać z Vue CLI i za pomocą tego narzędzia oficjalnego od Vue

4:45będziemy mogli utworzyć sobie taki projekt startowy i od razu skonfigurować webpack'a

4:50żeby mieć serwer taki deweloperski hot reloading, czyli

4:54przeładowywanie modułów danych w przeglądarce automatycznie i wiele

4:58innych ciekawych rzeczy i na tej podstawie pokażę ci jak można komponenty,

5:02które stworzyliśmy w kursie do tej pory przełożyć na taki nowy

5:07zapis gdzie każdy komponent będzie w osobnym pliku z rozszerzeniem vue. Później

5:11wykonamy sobie finalny, moim zdaniem bardzo ciekawy projekt aplikacji

5:15z użyciem Vue i właśnie tego nowoczesnego podejścia z webpack'iem

5:20i z EcmaScript6, a będzie to projekt slideshow gdzie będzie

5:24mogli załadować obrazy. No i oczywiście przewijać w prawo czy w

5:28lewo wczytując kolejne obrazki. Dodamy sobie takie rozwiązanie jak na przykład preloader

5:32obrazów, aby obrazek pokazywał się na stronie dopiero wtedy, kiedy w całości

5:36został załadowany. Oczywiście do momentu aż się nie załaduje będziemy wyświetli

5:40spinner, aby użytkownikowi o tym dać znać. Na

5:44tym etapie wykorzystamy również popularną bibliotekę axios, która służy

5:49do wysyłania zapytań AJAX. Pobierzemy sobie listę zdjęć

5:53dla naszego slideshow właśnie z serwera. Później

5:57do tej aplikacji dodamy jeszcze z użyciem Vue Router możliwość wyświetlania

6:01aktualnego slajdu jako parametru w adresie URL dzięki

6:06czemu będziemy mogli również korzystać z przycisku wstecz i do przodu w przeglądarce

6:10i to będzie nam aktualizowało zdjęcia wyświetlane na stronie. Ten

6:15projekt naprawdę zbierze całą wiedzę zdobytą do tej pory w kursie i dzięki

6:19temu będziesz mógł zobaczyć jak wszystkie te kawałki połączyć w jedną całość, a

6:23na koniec tego projektu wykonamy jeszcze produkcyjnego build'a. Powiem ci na co zwrócić

6:27uwagę, żeby przygotować aplikację już do produkcji. Ten kurs

6:31to prawie 7 godzin wiedzy z zakresu vue. Od absolutnych podstaw,

6:35a więc nieważne czy korzystałeś wcześniej z innych framework'ów czy nie. Myślę,

6:40że w tym kursie bez problemu się odnajdziesz. Starałem się od początku nie przytłoczyć

6:44się takimi dodatkowymi narzędziami, które często są towarzyszami

6:48różnych frameworków i mogą właśnie być onieśmielające na samym początku.

6:52Ja starałem się skupić wyłącznie na esencji pracy z Vue,

6:56żebyś doskonale poznał ten framework, a wtedy dowolny workflow, który

7:01już masz będziesz mógł zaaplikować do pracy z tym framework'iem. Natomiast

7:05jak wspominałem nie zabrakło również informacji na temat tego nowoczesnego workflow,

7:09w którym całą dosyć sporą aplikacje w tym kursie przygotowujemy. Tak

7:14więc ja myślę, że warto poznać Vue. Jeżeli znasz podstawy języka JavaScript.

7:18Tworzyłeś już w nim jakieś rozwiązania to warto dać Vue szansę. No

7:23i na koniec warto również skupić się na tym, że Vue jest dzisiaj wymieniany

7:28jako coraz bardziej pożądana przez pracodawców umiejętność, bo ten framework naprawdę

7:32w ostatnich miesiącach zyskał gigantyczną popularność i zapewniam cię, że

7:36nie bez powodu. Zatem mam nadzieję, że chociaż trochę zachęciłem cię do

7:41tego żebyś rzucił okiem na Vue. Myślę, że warto temu framework'owi dać

7:45szansę i dzięki temu wzbogacić swoje umiejętności i pracować

7:50z kodem JavaScript i z nowoczesnymi aplikacjami w sposób bardziej wydajny. Zatem

7:55nie pozostaje mi nic innego jak zaprosić cię do pierwszych lekcji tego kursu. Zatem

7:59do usłyszenia.