Kurs Vue.js

Wprowadzenie

Lekcje
  • Opis
  • Recenzje
  • Autor
  • Transkrypt

24 ocen

Lubię to! 336

Wprowadzenie

Vue.js to obok React i Angular najpopularniejszy framework do tworzenia nowoczesnych aplikacji internetowych. Jest jednak coś, co wyróżnia go na tle konkurentów - niski próg wejścia! Oznacza to, że nie musisz posiadać zaawansowanej wiedzy lub znać innych frameworków JavaScript, aby rozpocząć swoją przygodę z zupełnie innym podejściem, do tworzenia interfejsów użytkownika napędzanych danymi.

  1. Najwazniejsze koncepcje Vue
  2. Praca z szablonami
  3. Reagowania na akcje uzytkownika
  4. Praca z klasami i stylami CSS
  5. Obsluga formularzy
  6. Tworzenie animacji
  7. Wlasne komponenty
  8. Nowoczesny workflow

Aby zacząć korzystać z Vue, wystarczy dodać do strony jeden element <script> i zacząć rozszerzać HTML o nowe możliwości prezentacji danych, które w całości kontrolujemy z poziomu kodu JavaScript. Najlepsze jest jednak to, że gdy dane się zmienią, Vue odzwierciedli wszystkie zmiany na stronie. Koniec zatem z odwoływaniem się z poziomu kodu JavaScript do elementów z drzewa DOM i "ręczną" ich manipulacją!

Czy łatwość użycia Vue oznacza, że jest to framework prosty i nienadający się do budowania ambitnych aplikacji internetowych? Absolutnie nie! Jeżeli potrafisz korzystać z workflow opartego na webpacku, znasz nową składnię ES6 i chcesz swoje projekty dzielić na wiele uporządkowanych plików - możesz w ten sposób pracować. Jeśli jednak przy innych frameworkach przytłoczyły Cię wszystkie dodatkowe narzędzia i nie potrafiłeś się skupić na najważniejszym, czyli poznawaniu frameworka, to tutaj tego problemu nie doświadczysz.

Pierwsze kroki z Vue

W kursie tym krok po kroku poznasz ten lekki, acz potężny framework. Zaczniemy od instalcji i obowiązkowego projektu "Hello World!". Dowiesz się czym jest "Virtual DOM" i dlaczego Vue z niego korzysta. Następnie zobaczysz jak kontrolować wybraną część strony internetowej za pomocą metod, właściwości i dynamicznych atrybutów. Aby zrozumieć reaktywność Vue, przyjrzymy się konstrukcjom języka JavaScript, które ją umożliwiają.

Obsługa zdarzeń i praca z dyrektywami

Aby aplikacja mogła być interaktywna, nie może być obojętna na działania użytkownika. Z tego powodu zobaczysz, jak przypisywać obsługę zdarzeń, takich jak np. kliknięcie, jak do funkcji przekazywać parametry oraz jak korzystać z natywnego obiektu Event. Nie zabraknie również informacji o tym, jak modyfikować obsługę zdarzeń tak, by np. przechwycić jednoczesne wciśnięcie wybranej kombinacji klawiszy.

Jak się przekonasz, dyrektywy Vue pozwolą Ci na manipulację nie tylko zachowaniem, ale i wyglądem elementów HTML. Omówimy dokładnie jak kontrolować przypisywane klasy CSS, a także liniowe style. Wszystko to oczywiście na praktycznych przykładach! Poznasz również sposoby warunkowego wyświetlania elementów, a także iteracji. Już na tym etapie będziesz gotowy do stworzenia swojego pierwszego, praktycznego projektu. Będzie do Counter, a zatem licznik odliczający od 10 do 0. Jeśli kiedykolwiek korzystałeś z biblioteki jQuery, zobaczysz totalnie inne podejście - proste i czytelne.

Praca z formularzami

W jednym z rozdziałów kursu omówimy dokładnie techniki pracy z formularzami. Zobaczysz jak przechwytywać wpisywane przez użytkownika dane, na wszystkich rodzajach pól, jakie oferuje język HTML. Abyś wszystko jak najlepiej zrozumiał, spróbujemy wspólnie zaimplementować tzw. dwukierunkowe wiązanie danych, które Vue oferuje za pomocą jednej dyrektywy.

Z kursu dowiesz się także czym są oraz jak tworzyć własne filtry, jak odwoływać się do elementów z drzewa DOM, gdy jest to konieczne, a także co oferują nam własne dyrektywy.

Komponenty

Jedną z największych zalet frameworka Vue.js jest możliwość tworzenia komponentów. Są to własne elementy HTML, które możemy umieszczać w wybranych miejscach naszej aplikacji. Element taki to jednak nie tylko wygląd, który definiujemy za pomocą szablonu, ale także (a może i przede wszystkim) logika, kontrolowana z poziomu kodu JavaScript.

Zobaczysz jak zarejestrować własny komponent lokalnie oraz globalnie, jak sprawić, aby był reużywalny, przyjmując różne dane oraz jak komunikować się pomiędzy komponentami, by aplikacja pozostawała w synchronizacji. W tym celu omówimy dwa kierunki komunikacji, najpierw rodzic-dziecko, a później dziecko-rodzic. Na tym etapie wykonamy bardzo ciekawy, praktyczny projekt. Będzie to tabela napędzana danymi. Każdy wiesz tabeli prezentował będzie dane jednej osoby, a kliknięcie ikony kosza pozwoli na jej usunięcie. Ikona edycji zaś, zamieni wiesz w pola input, za pomocą których zaktualizujemy dane. W projekcie tym wykorzystamy niemal całą wcześniej zdobytą wiedzę!

Animacje

Vue.js oferuje możliwość animowania elementów, kiedy są one pokazywane lub ukrywane. I omówienia tego tematu nie mogło również zabraknąć w tym kursie. Poznasz sposoby na animowanie elementów w użyciem CSS, zobaczysz jak animować podmianę jednego komponentu na drugi, a także jak uzyskać taki efekt dla listy elementów. Mając już wiedzę z zakresu tworzenia własnych komponentów, stworzymy wspólnie element, który pozwoli na animację innych, zawartych w nim elementów. W tym celu zintegrujemy nasz komponent z biblioteką animate.css.

Nowoczesny workflow

Przez większą część kursu pracować będziemy pisząc kod JavaScript w standardzie ES5, a więc tym najpopularniejszym. Nie będziemy również korzystać z żadnych skomplikowanych narzędzi. Wszystko to po to, abyś mógł jak najlepiej zrozumieć sedno Vue.js, a nie zastanawiać się, który zapis jest specyficzny dla tego frameworka, a który to część nowego standardu JavaScript lub syntactic sugar dodany przez narzędzie uruchamiane z poziomu terminala.

Nie oznacza to jednak, że z Vue nie da się pracować w sposób nowoczesny! Oczywiście jest taka możliwość i doskonale się o tym przekonasz. W jednym z rozdziałów kursu omówimy narzędzie vue-cli, które pozwoli nam przygotować startowy projekt nowej aplikacji, a także środowisko skonfigurowane z użyciem webpack'a, które umożliwi nam wydajną pracę. Na tym etapie zobaczysz, że komponentu Vue można tworzyć w zupełnie oddzielnych plikach z rozszerzeniem .vue, gdzie umieścimy zarówno szablon jak i logikę komponentu, a także (opcjonalnie) jego style CSS.

Kurs ten zwieńczymy stworzeniem nowoczesnej aplikacji, wykorzystując najnowszy zapis ES6 i workflow stworzony z użyciem vue-cli. Projektem tym będzie Slideshow, a więc galeria zdjęć. Stworzymy od podstaw kilka komponentów, dodamy własny preloader obrazów, a także możliwość pobierania listy obrazów z serwera. Do tego celu wykorzystamy popularną bibliotekę axios, która umożliwia łatwe wykonywanie zapytań HTTP. Pod koniec dodamy do naszej aplikacji również routing, aby na pasku adresu odzwierciedlać aktualnie wyświetlany obraz, a także umożliwić nawigację za pomocą przycisków "Wstecz" i "Do przodu" dostępnych w przeglądarce internetowej. To zadanie ułatwi nam bardzo popularny plugin dla Vue, który nazywa się vue-router. Zobaczysz jak go zainstalować, a także skonfigurować. Następnie omówimy dynamiczne parametry, które odczytamy w komponencie. Finalnie zaktualizujemy adres URL z poziomu kodu JavaScript.

Ostatnim krokiem jaki wykonamy, będzie stworzenie builda produkcyjnego naszej aplikacji, który gotowy będzie do na stronę internetową.

Dla kogo jest ten kurs?

Kurs ten jest dla wszystkich osób, które znają już język JavaScript i sposoby na pracę z Obiektowym Modelem Dokumentu. Aby go rozpocząć, nie jest wymagana znajomość innych frameworków, ale taka wiedza na pewno nie zaszkodzi, a pomoże lepiej zrozumieć te zagadnienia, które są dla nich wspólne. Nie jest również wymagana wiedza z zakresu EcmaScript 6 czy webpack'a, lecz na pewno będzie pomocna w ostatim rozdziale tego kursu. Nieważne zatem czy Vue.js będzie pierwszym frameworkiem, który poznasz, czy będzie to odskocznia od React'a czy Angulara - na pewno to narzędzie Cię zaskoczy!

Dlaczego wybrać właśnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
  2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
  3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
84 minut

Mini CMS z Vue

Vue.js to jeden z najpopularniejszych framerowków JavaScriptowych ostatnich lat. Z pomocą tego uniwersalnego narzędzia rozszerzysz swoją stronę internetową o dynamiczny interfejs lub od podstaw stworzysz nawet rozbudowaną aplikację internetową. Pracę z Vue.js omówiliśmy już dokładnie w dwóch kursach: <a href="http://eduweb.pl/kursy/javascript/vuejs-od-podstaw.html">Vue.js od Podstaw</a> oraz <a href="http://eduweb.pl/kursy/javascript/vuejs-techniki-zaawansowane.html">Vue.js Techniki Zaawansowane</a>. <br><br> W warsztacie tym skupimy się natomiast na napisaniu z użyciem tego frameworka praktycznej aplikacji, a będzie to mini system CMS w formie aplikacji SPA (Single Page Application), bazujący na stworzonym wcześniej API typu REST. Zobaczysz w jaki sposób stworzyć aplikację po stronie klienta, która komunikować się będzie z serwerem, a także generować cały widok. Jej możliwości to wyświetlanie wpisów, możliwość ich dodawania, edycji czy usuwania. Dodatkowo zaimplementujemy możliwość logowania z użyciem JWT (JSON Web Tokens). <br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

Recenzje Kurs Vue.js

5

24 dodanych ocen

2018-02-10

Świetne wprowadzenie do Vue.js. Po tym kursie z łatwością można zacząć pisać proste aplikacje oparte na tym frameworku. Polecam.

Przemysław Tyczyński

2018-02-26

Kurs extra! Wyjaśnone krok po kroku jak zacząć z Vue.js. Bardzo polecam! Przydałby się tez warsztat Vue.js w połąćzniu z Wordpress API

Przemysław Lewtak

2018-03-24

Bardzo dobrze zrealizowany kurs i bardzo ciekawy framework. Polecam obie te rzeczy.

Marcin Korzeniowski

2018-03-31

Bardzo ciekawy i bardzo dobrze przygotowany kurs. Dziękuję!

Grzegorz Szymkowiak

2018-04-03

Bardzo dobrze przygotowany kurs! Wszystko zostało wyjaśnione krok po kroku. Kurs idealny dla osób, które zaczynają pracę z frameworkiem Vue.js. Panie Piotrze, dziękuję za solidną dawkę wiedzy! Teraz czas na techniki zaawansowane :)

Patryk Mazur

2018-04-12

Bardzo dobry kurs dla tych, którzy nie korzystali jeszcze z frameworków JS. Nie mogę się doczekać kiedy rozpocznę Techniki Zaawansowane. Polecam.

Michał Leszczyński

2018-04-15

Jak zawsze pełen profesjonalizm w bardzo "zjadliwej" formie. Wiedza w pigułce aby wystartować z tym frameworkiem. Jeden z najlepszych nauczycieli na Eduweb. Bardzo duża wiedza połączona z umiejętnością jej przekazania.

Marcin Wachciński

2018-04-26

Kurs został dokładnie przemyślany. Co za tym idzie, jakość kursu jest na najwyższym poziomie. Z całą przyjemnością mogę polecić ten kurs każdemu początkującemu w VUE.js.

Bartosz Pazdur

2018-09-13

Świetny przekaz materiału od zupełnych podstaw do ostatecznej formy zaawansowanej aplikacji łączącej kilka technik i możliwości Vue. Zapewne skorzystam z kursu zaawansowanego. Polecam

Artur Chochla

2018-10-29

Świetny kurs na początek, od zupełnych podstaw do bardziej zaawansowanych technik pracy z Vue. Wszystkie omówione bardzo dokładnie. Zdecydowanie polecam

Hubert Kochanek

2019-01-11

Fajne, podoba mi się

Krzysztof Kaczyński

2019-01-11

Fajne, podoba mi się

Krzysztof Kaczyński

2019-01-11

Fajne, podoba mi się

Krzysztof Kaczyński

2019-01-11

Fajne, podoba mi się

Krzysztof Kaczyński

2019-03-01

Bardzo fajny kurs, wiedza jest przekazana w prosty i zrozumiały sposób oraz poparta sensownymi przykładami

Krzysztof Kaczyński

2019-03-01

Bardzo fajny kurs, wiedza jest przekazana w prosty i zrozumiały sposób oraz poparta sensownymi przykładami

Krzysztof Kaczyński

2019-03-01

Bardzo fajny kurs, wiedza jest przekazana w prosty i zrozumiały sposób oraz poparta sensownymi przykładami

Krzysztof Kaczyński

2019-03-01

Bardzo fajny kurs, wiedza jest przekazana w prosty i zrozumiały sposób oraz poparta sensownymi przykładami

Krzysztof Kaczyński

2019-03-05

Też polecam ES6

Krzysztof Kaczyński

2019-03-05

Też polecam ES6

Krzysztof Kaczyński

2019-03-05

Też polecam ES6

Krzysztof Kaczyński

2019-03-05

Też polecam ES6

Krzysztof Kaczyński

2019-09-11

Świetny kurs, spójny i logicznie poprowadzony krok po kroku w bardzo przystępny sposób.

Róża Lewińska-Kuchta

2019-09-19

Świetne wprowadzenie do frameworku Vue.js. Łatwy, prosty przekaz informacji. Zdecydowanie polecam osobą chcącym rozpocząć przygodę z tworzeniem reaktywnych stron i aplikacji www.

Marcin Wisniewski

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje
Wykup w abonamencie od 79zł
Przetestuj za darmo przez 7 dni!

Autor: Piotr Palarz

Czas: 7 godzin

Wersja:

  • Pliki źródłowe
  • Certyfikat Ukończenia
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół

Wstęp do kursu

  • Wprowadzenie

  • Jak korzystać z plików źródłowych

Pierwsze kroki z Vue

  • Instalacja

  • Hello World z Vue

Najważniejsze koncepcje

  • Czym jest Virtual DOM?

  • Metody

  • Wyliczone właściwości

  • Praca z szablonem

  • Atrybuty

Reaktywność

  • Jak działają gettery i settery

  • Instancja Vue z bliska

Cykl życia aplikacji

  • Montowanie aplikacji

  • Zdarzenia cyklu życia

Zdarzenia

  • Przypisywanie obsługi zdarzeń

  • Przekazywanie parametrów

  • Modyfikatory zdarzeń

  • Modyfikatory klawiszy

Najważniejsze dyrektywy

  • Praca z klasami CSS

  • Liniowe style CSS

  • Warunkowe pokazywanie elementów

  • Korzystanie z pętli

  • Unikalność elementów

  • Grupowanie elementów

Praktyczny projekt 1

  • Counter - Odliczanie

Praca z formularzami

  • Uchwyty do elementów z DOM

  • Dwukierunkowe wiązanie danych

  • Własna implementacja modelu

  • Praca z radio i checkbox

  • Praca z polem select

  • Kontrolowanie zwracanych wartości

  • Obserwowanie zmian wartości

Filtry i dyrektywy

  • Tworzenie własnych filtrów

  • Sposoby na filtrowanie danych

  • Tworzenie własnych dyrektyw

Komponenty

  • Tworzenie własnych komponentów

  • Przekazywanie danych

  • Walidacja przekazywanych danych

  • Komunikacja pomiędzy komponentami w dół

  • Komunikacja pomiędzy komponentami w górę

  • Synchronizacja właściwości

  • Inne metody komunikacji

Praktyczny projekt 2

  • Edytowalna lista użytkowników cz.1

  • Edytowalna lista użytkowników cz.2

  • Edytowalna lista użytkowników cz.3

Komponenty c.d.

  • Dynamiczna podmiana komponentów

  • Kontrola treści komponentu za pomocą slotu

  • Tworzenie wielu slotów

  • Implementacja modelu na komponencie

Animacje

  • Podstawy animacji

  • Animacje zmiany komponentu

  • Animacje listy

  • Integracja z animate.css

  • Własny komponent animacji

Nowoczesny workflow

  • Praca z narzędziem vue-cli

  • Tworzenie własnego komponentu

  • Praca ze stylami CSS

Praktyczny projekt 3

  • Tworzenie komponentów Slideshow

  • Dodanie preloadera obrazów

  • Pobieranie danych z serwera

  • Dodanie obsługi routingu

  • Tworzenie produkcyjnego builda

Podsumowanie

  • Zakończenie