Masz już konto? Zaloguj się

Kurs Vue.js

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.

62 lekcji

7h 6min

5 (13 oceny)

Vue.js - od Podstaw

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.

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!

Czego się nauczysz?

  • Najwazniejsze koncepcje Vue

  • Praca z szablonami

  • Reagowania na akcje uzytkownika

  • Praca z klasami i stylami CSS

  • Obsluga formularzy

  • Tworzenie animacji

  • Wlasne komponenty

  • Nowoczesny workflow

Zawartość

Vue.js

17 rozdziały 62 lekcji 7h 6min

  • Wstęp do kursu

    11min

    Wprowadzenie

    Podgląd lekcji

    8min

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

    3min

  • Pierwsze kroki z Vue

    17min

    Instalacja

    8min

    Hello World z Vue

    9min

  • Najważniejsze koncepcje

    37min

    Czym jest Virtual DOM?

    6min

    Metody

    8min

    Wyliczone właściwości

    9min

    Praca z szablonem

    6min

    Atrybuty

    7min

  • Reaktywność

    19min

    Jak działają gettery i settery

    7min

    Instancja Vue z bliska

    12min

  • Cykl życia aplikacji

    16min

    Montowanie aplikacji

    8min

    Zdarzenia cyklu życia

    8min

  • Zdarzenia

    22min

    Przypisywanie obsługi zdarzeń

    6min

    Przekazywanie parametrów

    3min

    Modyfikatory zdarzeń

    6min

    Modyfikatory klawiszy

    8min

  • Najważniejsze dyrektywy

    39min

    Praca z klasami CSS

    9min

    Liniowe style CSS

    Podgląd lekcji

    7min

    Warunkowe pokazywanie elementów

    5min

    Korzystanie z pętli

    9min

    Unikalność elementów

    5min

    Grupowanie elementów

    4min

  • Praktyczny projekt 1

    7min

    Counter - Odliczanie

    7min

  • Praca z formularzami

    32min

    Uchwyty do elementów z DOM

    8min

    Dwukierunkowe wiązanie danych

    6min

    Własna implementacja modelu

    4min

    Praca z radio i checkbox

    3min

    Praca z polem select

    4min

    Kontrolowanie zwracanych wartości

    2min

    Obserwowanie zmian wartości

    6min

  • Filtry i dyrektywy

    17min

    Tworzenie własnych filtrów

    5min

    Sposoby na filtrowanie danych

    5min

    Tworzenie własnych dyrektyw

    6min

  • Komponenty

    38min

    Tworzenie własnych komponentów

    10min

    Przekazywanie danych

    5min

    Walidacja przekazywanych danych

    4min

    Komunikacja pomiędzy komponentami w dół

    4min

    Komunikacja pomiędzy komponentami w górę

    6min

    Synchronizacja właściwości

    3min

    Inne metody komunikacji

    5min

  • Praktyczny projekt 2

    24min

    Edytowalna lista użytkowników cz.1

    10min

    Edytowalna lista użytkowników cz.2

    7min

    Edytowalna lista użytkowników cz.3

    8min

  • Komponenty c.d.

    31min

    Dynamiczna podmiana komponentów

    9min

    Kontrola treści komponentu za pomocą slotu

    5min

    Tworzenie wielu slotów

    8min

    Implementacja modelu na komponencie

    Podgląd lekcji

    9min

  • Animacje

    28min

    Podstawy animacji

    8min

    Animacje zmiany komponentu

    5min

    Animacje listy

    6min

    Integracja z animate.css

    5min

    Własny komponent animacji

    5min

  • Nowoczesny workflow

    27min

    Praca z narzędziem vue-cli

    11min

    Tworzenie własnego komponentu

    10min

    Praca ze stylami CSS

    6min

  • Praktyczny projekt 3

    56min

    Tworzenie komponentów Slideshow

    17min

    Dodanie preloadera obrazów

    10min

    Pobieranie danych z serwera

    10min

    Dodanie obsługi routingu

    14min

    Tworzenie produkcyjnego builda

    5min

  • Podsumowanie

    4min

    Zakończenie

    4min

Autor kursu

Piotr Palarz

Web Developer

Średnia ocen autora: 5

Bio
Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.
Inne kursy tego autora
JavaScript Narzędzia Deweloperskie w Przeglądarce Visual Studio Code Laravel Vue.js

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Jak najbardziej Ok

Łukasz

2 stycznia 2021

Wartościowy, ciekawy kurs przedstawiający w przystępny sposób framework Vue.js

Wojciech Zięciak

7 stycznia 2021

Łukasz

28 stycznia 2021

Patryk

10 lutego 2021

Łukasz Bielecki

16 czerwca 2021

Polecam

Dariusz Bochenski

9 listopada 2021

Polecam

Janusz Marszalek

22 listopada 2021

Bardzo dobrze fajnie wytłumaczone. Wszystko autor świetnie tłumaczy, dając solidną bazę do właściwego zrozumienia działania subtelności Vue.

Adrian Kalinowski

23 grudnia 2021

Adam Wasik

29 kwietnia 2022

Maciej Mikołajczak

19 lipca 2022

Przystępna wiedza!

Tomasz Cichon

20 września 2022

Damian Adamus

24 października 2022

Świetny materiał

Róża Lewinska-Kuchta

3 czerwca 2023

Kurs Vue.js

  • 62 lekcji wideo

  • 7h 6min materiału

  • Ostatnia rewizja 24.05.2020

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych

Dlaczego wybrać właśnie ten kurs?

Efektywna nauka

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!

Wiedza ekspertów

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.

Praktyczne przykłady

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ń.

Pytania i odpowiedzi

Przeczytaj najczęściej zadawane pytania

Masz więcej pytań?

Porozmawiaj z nami na na czacie

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.

Jak jest skonstruowany kurs?

Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.

Jak najlepiej wykorzystać kurs?

Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!

Jak mogę uzyskać dostęp do kursu?

Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.

Czy kurs jest aktualny?

Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.

Czym się różni kurs od warsztatu i ścieżki?

Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.

We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.

Adam Romański

helloroman.com

Zacznij naukę w Vue.js

  • 62 lekcji wideo

  • 7h 6min materiału

  • Ostatnia rewizja 24.05.2020

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych