Mô tả

Join this bestselling Vue course to learn how to use the latest version of VueJS to build amazing, modern web apps!

No matter at which metric you look at (Google Trends, Github Stars, Tweets ...) - VueJS is the shooting star in the world of JavaScript frameworks - it simply is amazing!

This bestselling course teaches the latest version of Vue (Vue.js 3) from the ground up and in great detail. We'll cover all the core basics but we'll not stop thereafter - this course also dives into advanced concepts like the Composition API introduced with Vue 3.

Frontend frameworks like Vue JS are extremely popular because they give us this reactive, great user experience we know from mobile apps - but now in the browser! No wonder that jobs requiring frontend framework skills like VueJS are amongst the best paid ones in the industry!

You may know Angular 2+ and ReactJS, well, VueJS combines the best of both frameworks and makes building anything from small widgets to big, enterprise-level apps a breeze and a whole lot of fun!

And if you don't know the two mentioned frameworks: That's fine, too, this course does not expect any knowledge of any other frontend framework - you will learn it all throughout this Course!

This course covers it all!

We'll start at the very basics, what Vue.js is and how it works before we move on to more complex and advanced topics but I'll be honest: It's too much to fit it all into one sentence, so here's what you'll learn in this Course:

  • What is VueJS and Why would you use it?

  • The Basics (including the basic Syntax, Understanding Templates and much more!)

  • How to Output Reactive Data & Listen to Events

  • Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)

  • Setting up a Development Environment and Workflow

  • Using Components (and what Components are to begin with)

  • A Deep Dive Look Behind the Scenes of Vue

  • Binding to Form Inputs

  • Sending Http Requests to Backend APIs

  • Authentication & Vue

  • How to make your App more Beautiful with Animations and Transitions

  • How to create an awesome Single-Page-Application (SPA) with Routing

  • How to improve State Management by using Vuex

  • How to Deploy the App

  • And much more ...

All these topics are taught with real examples and demo projects. This course is full of exercises, challenges and bigger courser projects that allow you to practice what you learned.

Along with many other smaller projects, we will build a couple of bigger main projects:

  • The "Monster Slayer" Game - a game running in the browser, 100% powered by Vue

  • The "Learning Resource Manager" - a web app that allows you to manage (add, delete, list) your favorite learning resources

  • The "Find a Coach" app - a web app that allows you to sign up / login, register as a coach, list and filter available coaches and send messages to coaches

Is this course for you?

Now that you know what this course is about, let's see if this course is for you!

Here are three types of students who will love this course:

Student #1:

Has some JavaScript experience and is interested in what this language can do. You heard and read that JavaScript allows you to create nice web applications and enhance existing web pages. VueJS is your choice!

Student #2:

You already have some experience with other frontend frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing frameworks, you seek some alternatives - VueJS might be what you were looking for!

Student #3:

Has experience with backend frameworks/ languages but now also wants to enter the frontend world. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!

Bonus: Student #4

Is disappointed by Angular 2+. Does a good framework need 2 hours of setup? No, certainly not - as VueJS will prove to this student!

Let's dive into VueJS right now!

Bạn sẽ học được gì

Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones

Understand the Theory behind Vue.js and use it in Real Projects

Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

Learn the latest version of Vue (Vue 3), including the brand-new Composition API

Yêu cầu

  • Basic JavaScript Knowledge is Required
  • ES6 Knowledge is a Plus but not a Must
  • Basic HTML and CSS Knowledge is assumed throughout the Course

Nội dung khoá học

29 sections

Getting Started

13 lectures
Welcome to the Course!
01:39
What is "Vue.js"?
07:51
Different Ways of Using Vue
02:35
Exploring Vue Alternatives
03:11
Building A First App With Just JavaScript
07:26
Join our Online Learning Community
00:25
Important: Changed Vue Script Import Path
00:10
Re-building the App with Vue
11:39
Vue vs "Vanilla JavaScript" (just JavaScript)
01:10
Setting Up the Course Development Environment
02:04
Course Outline & What's In The Course
02:58
How To Get The Most Out Of This Course
03:23
Module Resources
00:09

Basics & Core Concepts - DOM Interaction with Vue

31 lectures
Module Introduction
00:48
Important: Changed Vue Script Import Path
00:10
Creating and Connecting Vue App Instances
08:40
Interpolation and Data Binding
03:35
Binding Attributes with the "v-bind" Directive
05:37
Understanding "methods" in Vue Apps
05:47
Working with Data inside of a Vue App
03:23
Outputting Raw HTML Content with v-html
03:31
A First Summary
04:12
Time to Practice: Data Binding
1 question
Understanding Event Binding
07:17
Events & Methods
06:12
Working with Event Arguments
02:59
Using the Native Event Object
08:59
Exploring Event Modifiers
09:53
Locking Content with v-once
02:08
Time to Practice: Event Binding
1 question
Data Binding + Event Binding = Two-Way Binding
06:32
Methods used for Data Binding: How It Works
06:46
Introducing Computed Properties
05:58
Working with Watchers
10:49
Methods vs Computed Properties vs Watchers
02:27
v-bind and v-on Shorthands
01:53
Time to Practice: Reactivity
1 question
Dynamic Styling with Inline Styles
07:19
Adding CSS Classes Dynamically
06:31
Classes & Computed Properties
01:57
Dynamic Classes: Array Syntax
01:22
Time to Practice: Dynamic Styling
1 question
Module Summary
04:27
Module Resources
00:06

Rendering Conditional Content & Lists

12 lectures
Module Introduction
01:35
Understanding the Problem
03:16
Rendering Content Conditionally
05:09
v-if, v-else and v-else-if
04:18
Using v-show Instead Of v-if
02:25
Rendering Lists of Data
06:20
Diving Deeper Into v-for
05:12
Removing List Items
03:59
Lists & Keys
08:26
Time to Practice: Conditional Content & Lists
1 question
Module Summary
02:15
Module Resources
00:06

Course Project: The Monster Slayer Game

9 lectures
Module Introduction
01:18
Project Setup & First Methods
12:27
Updating the Health Bars
07:07
Adding a "Special Attack"
06:23
Adding a "Heal" Functionality
04:46
Adding a "Game Over" Screen
09:37
Finishing the Core Functionality
06:08
Adding a Battle Log
14:11
Module Resources
00:06

Vue: Behind the Scenes

10 lectures
Module Introduction
01:31
An Introduction to Vue's Reactivity
04:26
Vue Reactivity: A Deep Dive
08:10
One App vs Multiple Apps
03:53
Understanding Templates
03:56
Working with Refs
05:21
How Vue Updates the DOM
06:26
Vue App Lifecycle - Theory
04:46
Vue App Lifecycle - Practice
09:48
Module Resources
00:06

Introducing Components

6 lectures
Module Introduction
01:30
Understanding the Problem
08:39
Introducing Components
10:54
The Why: Building Complex User Interfaces With Components
01:00
Multiple Vue Apps vs Multiple Components
00:57
Module Resources
00:06

Moving to a Better Development Setup & Workflow with the Vue CLI

16 lectures
Module Introduction
01:35
Why We Need A Development Server
03:29
Why We Want A Better Developer Experience
05:50
Fixing npm run serve (Vue CLI)
00:30
Installing & Using the Vue CLI
08:26
Inspecting the Created Project
05:59
Inspecting the Vue Code & ".vue" Files
06:04
Adding the "Vetur" Extension to VS Code
01:15
More on ".vue" Files
01:40
A New Vue Project
05:05
Creating a Basic Vue App
09:32
Adding a Component
08:14
Adding Styling
02:16
A Small Addition
00:13
An Alternative Setup - using "npm init" & Volar
00:45
Module Resources
00:06

Component Communication

18 lectures
Module Introduction
01:41
Introducing "Props" (Parent => Child Communication)
10:03
Prop Behavior & Changing Props
06:30
Validating Props
07:14
Supported Prop Values
00:09
Working with Dynamic Prop Values
05:37
Emitting Custom Events (Child => Parent Communication)
11:15
Defining & Validating Custom Events
04:05
Prop / Event Fallthrough & Binding All Props
01:19
Demo: Adding Components & Connecting Them
13:15
Demo: Adding More Component Communication
06:24
Time to Practice: Props & Custom Events
1 question
A Potential Problem
06:26
Provide + Inject To The Rescue
08:16
Provide + Inject for Functions / Methods
03:59
Provide + Inject vs Props & Custom Events
02:06
Module Summary
04:44
Module Resources
00:06

Diving Deeper Into Components

18 lectures
Module Introduction
01:38
Project Setup
02:38
Global vs Local Components
09:22
Scoped Styles
05:15
Introducing Slots
06:23
Named Slots
05:35
Slot Styles & Compilation
02:26
More on Slots
07:19
Scoped Slots
09:34
Dynamic Components
07:06
Keeping Dynamic Components Alive
02:44
Applying What We Know & A Problem
09:24
Teleporting Elements
03:50
Working with Fragments
01:23
The Vue Style Guide
03:02
Moving to a Different Folder Structure
02:56
Module Summary
03:38
Module Resources
00:06

Course Project: The Learning Resources App

14 lectures
Module Introduction
01:37
Setup & First Steps
05:24
First Components & Props
10:46
Styling and More Components
07:19
Header & BaseCard Components
07:00
Adding a Base Button
05:19
Dynamic Components & Attribute Fallthrough
08:37
Adding & Styling Tabs
04:58
Adding a Form
04:12
Fetching User Input
08:27
Adding a Modal Dialog
12:19
Deleting Items
06:42
Adding "Teleport"
01:28
Module Resources
00:06

Forms

10 lectures
Module Introduction
00:33
v-model & Inputs
06:03
Working with v-model Modifiers and Numbers
06:54
v-model and Dropdowns
02:25
Using v-model with Checkboxes & Radiobuttons
07:13
Adding Basic Form Validation
05:13
Building a Custom Control Component
06:27
Using v-model on Custom Components
06:48
Module Summary
01:14
Module Resources
00:06

Sending Http Requests

15 lectures
Module Introduction
01:09
Starting App & Why we need a Backend
05:04
Adding a Backend
03:21
How To (Not) Send Http Requests
05:23
Sending a POST Request to Store Data
05:45
Http Requests & Http Methods (Verbs)
00:37
Using Axios Instead Of "fetch()"
00:47
Getting Data (GET Request) & Transforming Response Data
09:51
Loading Data When a Component Mounts
02:00
Showing a "Loading..." Message
02:55
Handling the "No Data" State
03:00
Handling Technical / Browser-side Errors
06:41
Handling Error Responses
06:49
Module Summary
01:32
Module Resources
00:06

Routing: Building "Multi-Page" Single Page Applications

26 lectures
Module Introduction
00:41
What & Why?
04:39
Routing Setup
04:36
Registering & Rendering Routes
06:25
Navigating with router-link
04:55
Styling Active Links
03:05
Programmatic Navigation
04:01
Passing Data with Route Params (Dynamic Segments)
10:46
Navigation & Dynamic Paths
03:00
A Vue Bug
00:13
Updating Params Data with Watchers
05:30
Passing Params as Props
03:37
Redirecting & "Catch All" Routes
07:50
Using Nested Routes
05:34
More Fun with Named Routes & Location Objects
05:21
Using Query Params
03:59
Rendering Multiple Routes with Named Router Views
05:51
Controlling Scroll Behavior
06:17
Introducing Navigation Guards
07:31
Diving Deeper Into Navigation Guards
06:50
The Global "afterEach" Guard
01:27
Beyond Entering: Route Leave Guards
07:13
Utilizing Route Metadata
02:14
Organizing Route Files
04:49
Summary
02:12
Module Resources
00:06

Animations & Transitions

19 lectures
Module Introduction
01:11
Animation Basics & CSS Transitions
07:28
Understanding CSS Animations
04:20
Why Is "Just CSS" Not Enough?
04:27
Playing CSS Animations with Vue's Help
04:45
Using the Transition Component
05:02
CSS Animations with the Transition Component
02:28
Using Custom CSS Class Names
03:34
Example: Animating a Modal
08:38
Transitioning Between Multiple Elements
09:15
Using Transition Events
08:31
Building JavaScript Transitions (instead of CSS)
14:57
Disabling CSS Transitions
03:05
Getting Started with Animated Lists
06:44
Animating Lists with "transition-group"
05:26
Animate List Item Movement
03:53
Animating Route Changes
12:15
An Important Note on Animated Route Changes
00:35
Module Resources
00:06

Vuex

21 lectures
Module Introduction
00:59
What & Why?
07:11
Creating & Using a Store
04:43
Connecting Components to State
02:36
Introducing Mutations - A Better Way of Changing Data
06:30
Passing Data to Mutations with Payloads
04:07
Introducing Getters - A Better Way Of Getting Data
07:40
Running Async Code with Actions
07:33
Understanding the Action "Context"
02:02
Using Mapper Helpers
05:57
Example: Adding More State
08:09
Organizing your Store with Modules
04:10
Understanding Local Module State
04:27
Namespacing Modules
05:03
Structuring Vuex Code & Files
08:44
A Challenge!
01:51
Challenge Solution (1/3)
12:00
Challenge Solution (2/3)
11:27
Challenge Solution (3/3)
03:18
Summary
01:19
Module Resources
00:06

Main Project: "Find a Coach" Web App

29 lectures
Module Introduction
02:35
Planning the Project / Web App
04:26
Planning the Data Requirements
05:11
Planning the Layout / Components
05:06
Registering Routes
05:58
Adding Route Page Components
05:27
Working on the Main Layout & Styling
07:42
Wiring Up Pages
05:22
Adding Vuex and Coach Data
12:15
Working on the Coaches List and List Items
11:21
Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
12:54
Building the Coach Detail Component
08:24
Filtering Coaches
11:10
Registering as a Coach: The Form
10:13
Adding Coaches to Vuex
13:37
Adding Form Validation
12:35
Working on the Contact Form
08:09
Storing Requests (Messages) With Vuex
08:31
Outputting Incoming Requests (Messages)
10:01
Filtering Requests for the Active Coach
04:44
Sending a PUT Http Request to Store Coach Data
11:05
Fetching Coach Data (GET Http Request)
07:51
Rendering a Loading Spinner
06:38
Adding Http Error Handling
09:17
Sending Coaching Requests Http Requests
15:48
Caching Http Response Data
08:28
Adding Route Transitions
10:19
The "Not Found" Page & Summary
02:19
Module Resources
00:06

Vue & Authentication

16 lectures
Module Introduction
01:00
How Authentication Works in Vue Apps (or any SPA)
06:09
Locking / Protecting Backend Resources
05:56
Adding an Authentication Page (Login & Signup)
09:54
Preparing Vuex
04:22
Adding a "Signup" Action & Flow
09:05
Better UX: Loading Spinner & Error Handling
05:30
Adding a "Login" Action & Flow
03:15
Attaching the Token to Outgoing Requests
04:19
Updating the UI Based on Auth State
04:04
Adding a "Logout" Action & Flow
03:34
Authentication & Routing (incl. Navigation Guards)
11:41
Adding "Auto Login"
08:52
Adding "Auto Logout"
13:34
Summary
01:19
Module Resources
00:06

Optimizing & Deploying Vue Apps

7 lectures
Module Introduction
01:10
What To Deploy?
02:50
Optimization: Using Asynchronous Components
12:16
Note: Async Components & Routing
00:11
Building the Project For Production
03:54
Deploying a Vue App
08:55
Module Resources
00:06

The Composition API - Replacing the Options API

27 lectures
Module Introduction
02:00
Which Problem Does The Composition API Solve?
06:51
Replacing "data" with "refs"
11:30
Replacing the setup() Method
00:44
Building "reactive" Objects
10:57
Reactivity: A Deep Dive
08:23
Replacing "methods" with Regular Functions
07:01
Time to Practice: Data & Functions
1 question
Replacing "Computed Properties" with the "computed" Function
07:52
Two-Way-Binding and the Composition API
02:58
Working with Watchers
05:42
Time to Practice: Composition API Core Building Blocks
1 question
A First Summary
01:37
How To Use Template Refs
04:49
Components, Props & The Composition API
07:57
Emitting Custom Events
02:33
Working with Provide/ Inject
03:42
Lifecycle Hooks in the Composition API
05:14
Migrating from Options API to Composition API - An Example Project
01:56
Migrating a First Component
06:40
Migrating a Big Component
12:38
Migrating the Remaining Components
11:56
Routing, Params & The Composition API
07:27
The Route & Router Objects and the Composition API
05:08
Using Vuex with the Composition API
04:33
Summary
03:10
Module Resources
00:06

Reusing Functionality: Mixins & Custom Composition Functions

14 lectures
Module Introduction
01:16
Reusability Concepts
04:54
Using Mixins
04:48
Understanding Mixin Merging
03:11
Global Mixins
02:52
Disadvantages of Mixins
03:28
Custom Hooks / Composables & The Composition API
08:40
More Custom Composition Functions
03:48
Why Hooks / Composables Beat Mixins
01:26
Example: Creating a "Search" Hook
11:29
Custom Hooks Gotchas
08:43
More Thoughts on Custom Hooks / Composables
02:54
Example: A Custom "Sort" Hook
05:29
Module Resources
00:06

Roundup & Next Steps

2 lectures
Thanks for being part of the course!
00:55
Course Roundup & Next Steps
03:08

Vue 2 to Vue 3 Migration

5 lectures
Vue 3 - Overview
06:30
Important Changes & Migration Steps
17:51
Vue 3: New Features
05:27
The New Composition API (Optional!)
23:45
Further Migration Resources
00:08

Learn Vue 2 | Old Course Content

1 lectures
Vue 2 Course Content
00:32

Getting Started [VUE2]

1 lectures
Time to Practice - Outputting Data to Templates
1 question

Using VueJS to Interact with the DOM [VUE2]

3 lectures
Time to Practice - Events
1 question
Time to Practice - Reactive Properties
1 question
Time to Practice - Styling
1 question

Using Conditionals and Rendering Lists [VUE2]

1 lectures
Time to Practice - Conditionals & Lists
1 question

An Introduction to Components [VUE2]

1 lectures
Time to Practice - Components
1 question

Communicating between Components [VUE2]

1 lectures
Time to Practice - Component Communication
1 question

More Content

1 lectures
Bonus: More Content!
00:20

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.