Kurs Vue.js

Wprowadzenie

Lekcje
  • Opis
  • Recenzje
  • Autor
  • Transkrypt

7 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. Zaawansowane techniki pracy z Vue.js
  2. Praca z wieloplikowymi komponentami
  3. Zarzadzanie stanem aplikacji z VueX
  4. Routing z uzyciem vue-router
  5. Praca z danymi z uzyciem axios
  6. Techniki walidacji formularzy
  7. Praktyczne projekty
  8. Masa przydatnych wskazówek

Kurs, który masz przed sobą, to kontynuacja wydanego wcześniej kursu Vue.js od Podstaw. W pierwszym kursie omówione zostały najważniejsze koncepcje pracy z Vue, a w tym materiale poruszamy już bardziej zaawansowane tematy. Przede wszystkim skupimy się na pracy z użyciem nowoczesnego workflow, co da nam niezwykłą swobodę tworzenia aplikacji internetowych. Jeśli zatem znasz już podstawy pracy z tym frameworkiem i chcesz wskoczyć na kolejny poziom wtajemniczenia, ten kurs jest zdecydowanie dla Ciebie. A co znajdziesz w materiale?

Zaawansowane koncepcje

Na początku zobaczysz, jak szybko tworzyć pliki startowe do nowej aplikacji z użyciem narzędzia vue-cli. Omówimy możliwość dzielenia kodu na wiele plików, tworzenia szablonów, a także wykorzystywania bezpośrednio funkcji renderującej, do której zamieniane są na etapie builda wszystkie szablony.

Zobaczysz również czym są i jak pracować z komponentami funkcyjnymi i tzw. mixinami, które pozwolą reużywać raz napisany fragment kodu.

Zarządzanie stanem aplikacji z VueX

Przepływ informacji to bardzo ważny temat w każdej aplikacji internetowej. Vue oferuje kilka sposobów na to, aby komponenty mogły się ze sobą komunikować. Ich omówienie zaczniemy od najprostszych technik, które świetnie sprawdzają się w wielu przypadkach. Następnie rozszerzymy możliwości instancji Vue w ten sposób, aby wszystkie komponenty miały dostęp do scentralizowanego miejsca, gdzie przechowywany będzie stan aplikacji.

Tam jednak, gdzie aplikacja wymaga zarządzania większą ilością danych jednocześnie, powyższe techniki mogą być niewystarczające. Z tego powodu, podobnie jak w innych frameworkach, Vue posiada oficjalny wzorzec oraz bibliotekę do zarządzania stanem aplikacji. Rozwiązanie to nazywa się VueX i w kursie zostanie ono dokładnie omówione. Zobaczysz zatem jak skonfigurować tzw. store, jak przechowywać w nim dane, jak je wyświetlać w widokach, aktualizować za pomocą tzw. mutacji czy pracować z nimi wykorzystując akcje. Przekonasz się, że początkowa większa ilość pracy, aby wszystko skonfigurować, w pewnym momencie zaczyna się opłacać.

Routing w aplikacji

Tworzenie nowoczesnych aplikacji typu SPA (Single Page Application) nie może się obejść bez zmian widoków. Dobrą praktyką jest, aby wraz z takimi zmianami, aktualizowany był również pasek adresu. Wykonanie takiego zadania umożliwiają nam tzw. routery. Vue posiada oficjalny dodatek o nazwie vue-router, który w tym kursie dokładnie omówimy.

Zobaczysz jak dołączyć router do swojego projektu, a także jak konfigurować ścieżki. Poruszymy tematy takie jak generowanie odnośników, dynamiczne parametry, tworzenie zagnieżdżonych ścieżek czy nawigacja z poziomu kodu JavaScript. Dowiesz się również, jak tworzyć tzw. guardy, które umożliwią lub zablokują możliwość wyświetlania wybranego widoku, np. w zależności od tego czy użytkownik jest aktualnie zalogowany.

Praca z danymi z serwera

Trzecim, po zarządzaniu stanem aplikacji i wykorzystaniu routingu, komponentem, który niezbędny jest do tworzenia aplikacji napędzanych danymi, jest możliwość wysyłania zapytań HTTP.

Tę czynność umożliwi nam bardzo popularna, acz niezależna od Vue biblioteka axios. Zobaczysz jak za jej pomocą pobierać i wysyłać dane. Aby jednak jak najwygodniej pracować z tym rozwiązaniem, połączymy axios z Vue, udostępniając tak naprawdę jej metody wewnątrz każdego komponentu.

Walidacja formularzy

W jednym z rozdziałów kursu podejmiemy temat walidacji formularzy. Zobaczysz jak z pomocą popularnego pluginu dla Vue, robić to w bardzo prosty sposób.

Omówimy różne funkcje walidujące, które umożliwią sprawdzenie poprawności pól tekstowych, radio czy checkboxów. Zobaczysz jak w łatwy sposób wyświetlać komunikaty o błędach i warunkowo zmieniać wygląd pól. Nie zabraknie również informacji o asynchronicznej walidacji, która pozwoli nam na żywo sprawdzać czy wpisany adres email jest dostępny czy też nie.

Praktyczne projekty

Kurs ten oczywiście to nie tylko niezbędna teoria, ale także praktyczne przykłady. Aby jak najlepiej poznać omawiane techniki, wykorzystamy je do stworzenia ciekawych aplikacji.

Pierwszą z nich będzie konfigurator produktu, który umożliwi użytkownikowi wybór podzespołów zamawianego komputera. Każdy taki wybór będzie wpływał na końcową cenę, która będzie na bieżąco aktualizowana. Po wybraniu wszystkich opcji, dane prześlemy na serwer. To projekt który pokaże Ci jak przechowywać dane z użyciem VueX, a także jak na ich podstawie wyświetlić widok i napisać logikę.

Innym projektem, który wykonamy, będzie Quiz. To aplikacja, gdzie użytkownik odpowiadał będzie na serię pytań pobranych z serwera, a do wyboru będą 3 odpowiedzi. Po przejściu przez wszystkie pytania, wyślemy do serwera zapytanie, a ten w zamian zwróci nam listę poprawnych odpowiedzi. Dzięki temu pokażemy użytkownikowi, gdzie miał rację, a gdzie popełnił błąd. Aplikacja ta wykorzystywać będzie wszystkie najważniejsze techniki, tj. VueX, routing, a także Ajax.

Dla kogo jest ten kurs?

Kurs ten jest dla wszystkich osób, które czują się już swobodnie w pracy z frameworkiem Vue. Jeśli zatem masz już solidną wiedzę podstawową lub przerobiłeś kurs Vue.js od Podstaw, to zdecydowanie jesteś gotów na poszerzenie swoich umiejętnośći w pracy z tym frameworkiem. Co ważne, doświadczenie w pracy z innymi frameworkami JavaScript nie jest tutaj wymagane, a jedyne co będzie bardzo pomocne, to znajomość nowej składni EcmaScript 6.

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

7 dodanych ocen

2018-03-25

Polecam bardzo dobry materiał!

Grzegorz Róg

2018-04-15

Jak zawsze pełen profesjonalizm w bardzo "zjadliwej" formie. Bardzo duża wiedza połączona z umiejętnością jej przekazania. Pan Piotr jest jednym z najlepszych nauczycieli w Eduweb. Kolejny bardzo udany kurs w jego wykonaniu

Marcin Wachciński

2019-04-08

Jako Vue.js developer dowiedziałem się sporo rzeczy, o których nie wiedziałem - a mogło przyśpieszyć pracę w poprzednich projektach, zamiast pisać od nowa i wymyślać koło na nowo! Bardzo dziękuję i przyda się zdobyta wiedza na przyszłość!

Mikołaj Lewandowski

2019-05-31

Dobry kurs. Polecam każdemu, kto chce poszerzyć swoją wiedzę!

Piotr Wiktorowicz

2019-07-31

Materiał jak zawsze świetny. Piotr Palarz to zdecydowanie jeden z najlepszych nauczycieli na Eduweb oraz Polskiej scenie na którego można natrafić.

Dawid Owczarz

2019-09-26

Podoba mi się w tym kursie podejście prowadzącego. Tłumaczy dokładnie sposób działania a nie tylko podaje gotowe rozwiązania. Proporcje teorii do praktyki są wyważone, choć projekty praktyczne mogły by być trochę bardziej rozbudowane .

Rodia

2019-11-26

Dość dobry kurs i jedynie czego szkoda, że temat modułów z Vuex potraktowano jak temat tabu czyli jak przeważającej części kursów i materiałów, bo z tym tematem oceniłbym ten kurs na 5, a tak to oceniam go na 4.

Paweł Wilczek

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: 5 godzin 15 minut

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

Sposoby pracy z Vue

  • Klasyczne podejście do pracy z Vue

  • Bootstrap aplikacji z vue-cli

  • Jednoplikowe komponenty

Zaawansowane koncepcje

  • Funkcja renderująca vs. szablon

  • Komponenty funkcyjne

  • Korzystanie z mixin

Zarządzanie stanem aplikacji

  • Przepływ informacji w aplikacji

  • Globalny bus do komunikacji

  • Rozszerzanie Vue

  • Czym jest VueX?

  • Pierwsze kroki z VueX

  • Pobieranie danych

  • Gettery

  • Mutacje

  • Akcje

  • Funkcje pomocnicze

  • Lepsza organizacja kodu

  • Debugowanie VueX

Routing w aplikacji

  • Pierwsze kroki z vue-router

  • Tworzenie tabeli routingu

  • Generowanie odnośników

  • Dynamiczne parametry

  • Zagnieżdżone ścieżki

  • Nawigacja z poziomu kodu

  • Nazwane ścieżki

  • Nazwane widoki

  • Przekierowania

  • Uniwersalne komponenty

  • Tryb History API

  • Tworzenie guardów

  • Animacje

  • Dynamiczne wczytywanie modułów

  • Ustawienia pozycji suwaka

Praca z danymi z serwera

  • Pierwsze kroki z axios

  • Pobieranie i wysyłanie danych

  • Integracja axios z Vue

Praktyczny projekt 1 - Konfigurator produktu

  • Założenia wstępne projektu pierwszego

  • Pobieranie danych do VueX

  • Generowanie widoku konfiguratora

  • Dodanie logiki konfiguratora

Praktyczny projekt 2 - Quiz

  • Założenia wstępne projektu drugiego

  • Pobranie danych do VueX

  • Generowanie widoku quizu

  • Dodanie logiki quizu

  • Obsługa routingu

  • Wyświetlanie podsumowania

Walidacja formularzy

  • Pierwsze kroki z vuelidate

  • Definiowanie reguł walidacji

  • Wyświetlanie błędów

  • Sprawdzanie poprawności haseł

  • Asynchroniczna walidacja

Podsumowanie

  • Zakończenie