Vue jest jednym z najpopularniejszych frameworków do tworzenia aplikacji internetowych. Ten kurs pokazuje, jak wykorzystać go od podstaw w praktyce. Zaczynasz od instalacji narzędzi, generacji projektu i poznania jego struktury oraz wtyczki Vue devtools. Następnie przechodzisz przez podstawy: interpolację tekstu, obsługę zdarzeń i pracę ze stylami. Uczysz się list, tablic i obiektów, formularzy, komponentów oraz wymiany danych. Na końcu poznajesz Router i bibliotekę Vuex.

Narzędzia, instalacja i struktura projektu

Zaczynasz od fundamentów potrzebnych do sprawnej pracy z Vue. Poznasz narzędzia, które ułatwiają codzienny rozwój aplikacji, a następnie przejdziesz przez proces instalacji oraz wygenerowania projektu. Krok po kroku zobaczysz, z jakich części składa się świeżo utworzona aplikacja i jak jest zorganizowana jej struktura. W programie znajdzie się też oficjalna wtyczka Vue devtools, dzięki której łatwiej podejrzysz stan i elementy swojej aplikacji podczas pracy. Ta część przygotowuje solidny start do kolejnych rozdziałów.

Podstawowe elementy Vue

Po przygotowaniu środowiska skupisz się na podstawach pracy z Vue. Zaczniesz od interpolacji tekstu, aby bezpośrednio wyświetlać dane w widoku. Następnie nauczysz się obsługi zdarzeń elementów HTML, co pozwoli reagować na działania użytkownika. Pojawi się także manipulacja stylami CSS, dzięki której łatwo zmienisz wygląd elementów. Zobaczysz, jak sterować widokiem aplikacji w zależności od danych, tak aby jej części pojawiały się lub zmieniały w odpowiednich sytuacjach. To solidna baza do dalszych tematów.

Tablice, obiekty i listy

Vue pozwala w przejrzysty sposób pracować na strukturach danych. W tej części poznasz wyświetlanie list oraz praktyczne operacje na tablicach i obiektach. Zobaczysz, jak dzięki reaktywności zmiany w danych natychmiast przekładają się na widok, co ułatwia tworzenie dynamicznych elementów interfejsu. Nauczysz się modyfikować pozycje i prezentować je w uporządkowany sposób. Dzięki temu zbudujesz sekcje aplikacji, które sprawnie pokazują dane i reagują na ich zmiany.

Formularze

Formularze to źródło danych od użytkownika. W tym module dowiesz się, jak pobierać informacje każdego typu i wiązać je z logiką aplikacji. Przećwiczysz reagowanie na zmianę wartości pól oraz aktualizowanie widoku tak, aby zawsze odzwierciedlał bieżące dane. Zobaczysz, jak wygodnie obsługiwać różne kontrolki formularza oraz jak wykorzystać te dane w dalszej części interfejsu. Po tej części swobodniej zbudujesz ekrany wymagające wprowadzania informacji.

Komponenty, Router i Vuex

Aplikacje w Vue składają się z komponentów, dlatego nauczysz się tworzyć własne i łączyć je w spójną całość. Pokażemy, jak wymieniać dane pomiędzy komponentami, aby poszczególne części interfejsu współpracowały ze sobą. Następnie dodasz do projektu Router, zdefiniujesz ścieżki i przygotujesz strukturę właściwą dla Single-page application (SPA). Na koniec poznasz Vuex, bibliotekę do centralnego zarządzania stanem aplikacji. Ta część domyka pełną ścieżkę tworzenia aplikacji w Vue.