Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Meditation Life Purpose Coaching Emotional Intelligence
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Cleaning
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 7 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Vue JS

Kurs Vue.js od Podstaw

Nowoczesne Technologie Front-End
Rating: 4.7 out of 54.7 (5 ratings)
9 students
Created by eduweb.pl - Kursy Wideo
Last updated 6/2019
Polish
30-Day Money-Back Guarantee

What you'll learn

  • Najważniejsze koncepcje Vue
  • Reagowania na akcje użytkownika
  • Obsługa formularzy
  • Własne komponenty
  • Praca z szablonami
  • Praca z klasami i stylami CSS
  • Tworzenie animacji
  • Nowoczesny workflow

Course content

17 sections • 65 lectures • 7h 9m total length

  • Preview08:03
  • Jak korzystać z plików źródłowych
    03:14

  • Instalacja
    08:08
  • Hello World z Vue
    09:12

  • Czym jest Virtual DOM?
    06:30
  • Metody
    07:43
  • Wyliczone właściwości
    09:16
  • Praca z szablonem
    06:23
  • Atrybuty
    07:29
  • Bonus
    00:55

  • Jak działają gettery i settery
    06:51
  • Instancja Vue z bliska
    12:17

  • Montowanie aplikacji
    07:55
  • Zdarzenia cyklu życia
    08:21

  • Przypisywanie obsługi zdarzeń
    05:41
  • Przekazywanie parametrów
    03:08
  • Modyfikatory zdarzeń
    05:30
  • Modyfikatory klawiszy
    08:01

  • Praca z klasami CSS
    08:50
  • Preview07:20
  • Warunkowe pokazywanie elementów
    05:11
  • Korzystanie z pętli
    08:50
  • Unikalność elementów
    05:28
  • Grupowanie elementów
    03:38

  • Counter - Odliczanie
    06:34

  • Uchwyty do elementów z DOM
    07:48
  • Dwukierunkowe wiązanie danych
    06:08
  • Własna implementacja modelu
    03:41
  • Praca z radio i checkbox
    03:13
  • Praca z polem select
    03:35
  • Kontrolowanie zwracanych wartości
    02:05
  • Obserwowanie zmian wartości
    05:39
  • Bonus
    00:55

  • Tworzenie własnych filtrów
    05:29
  • Sposoby na filtrowanie danych
    05:00
  • Tworzenie własnych dyrektyw
    06:26

Requirements

  • Znajomość języka JavaScript
  • Znajomość podstawowych technologii internetowych.

Description

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.

  • Najważniejsze koncepcje Vue

  • Praca z szablonami

  • Reagowania na akcje użytkownika

  • Praca z klasami i stylami CSS

  • Obsługa formularzy

  • Tworzenie animacji

  • Własne komponenty

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

Who this course is for:

  • 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 będzie pierwszym frameworkiem, który poznasz, czy będzie to odskocznia od React'a czy Angulara - na pewno to narzędzie Cię zaskoczy!

Instructor

eduweb.pl - Kursy Wideo
https://eduweb.pl
eduweb.pl - Kursy Wideo
  • 4.5 Instructor Rating
  • 3,882 Reviews
  • 26,236 Students
  • 103 Courses

Na stronie eduweb znajdziesz multimedialne kursy wideo oprogramowania Adobe, tworzenia grafiki, fotografii, wideo, postprodukcji, projektowania stron WWW - HTML i wiele więcej! Poza kompleksowymi kursami online prowadzimy zajęcia na żywo w ramach Eduweb Live i ścieżek specjalizacji, jak również oferujemy Certyfikaty i wsparcie na każdym etapie nauki. Nasi trenerzy to najwyższej klasy eksperci z branży, którzy na co dzień pracują dla największych firm, dzięki czemu mogą zaprezentować najwyższy poziom praktycznych materiałów szkoleniowych.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.