Skip to main content

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

19h 57m 29s
English
Free

Course description

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! Frontend Frameworks 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!

Read more about the course
Requirements:
  • Basic JavaScript Knowledge is Required
  • ES6 Knowledge is a Plus but not a Must
  • Basic HTML and CSS Knowledge is assumed throughout the Course

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!

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?

  • Setting up a Development Environment and Workflow

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

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

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

  • Binding to Form Inputs

  • All about Directives, Filters and Mixins

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

And all the accompanied with many Exercises and multiple Course Projects - because it isn't just about seeing Code, it's about using and practicing it!

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. He heard and read that JavaScript allows you to create nice Web Applications and enhance existing Web Pages. VueJS is your choice!

Student #2:

He already has some Experience with other Frontend Frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing Frameworks, he seeks 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!

Who this course is for:
  • This Course is for Everyone interested in Frontend Development and Major JavaScript Frameworks
  • This Course is for you if you want to create Reactive Applications, which run in the Browser
  • This Course also targets Students who prefer a native JavaScript Framework which makes Getting Started much simpler than Angular 2
  • Displeased with Angular 2? VueJS is for you!

What you'll learn:

  • 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)

Watch Online

0:00 0:00
#Lesson TitleDuration
1Course Introduction03:09
2Let's Create our First VueJS Application04:46
3Extending the VueJS Application04:13
4Course Structure03:45
5Take Advantage of all Course Resources!01:57
6Setup VueJS Locally02:04
7Module Introduction00:46
8Understanding VueJS Templates02:36
9How the VueJS Template Syntax and Instance Work Together02:43
10Accessing Data in the Vue Instance01:50
11Binding to Attributes02:44
12Understanding and Using Directives01:28
13Disable Re-Rendering with v-once01:42
14How to Output Raw HTML02:44
15Listening to Events01:51
16Getting Event Data from the Event Object02:37
17Passing your own Arguments with Events01:54
18Modifying an Event - with Event Modifiers03:24
19Listening to Keyboard Events02:04
20Writing JavaScript Code in the Templates03:20
21Using Two-Way-Binding01:50
22Reacting to Changes with Computed Properties09:33
23An Alternative to Computed Properties: Watching for Changes03:54
24Saving Time with Shorthands01:27
25Dynamic Styling with CSS Classes - Basics04:23
26Dynamic Styling with CSS Classes - Using Objects01:36
27Dynamic Styling with CSS Classes - Using Names03:28
28Setting Styles Dynamically (without CSS Classes)03:16
29Styling Elements with the Array Syntax01:15
30Module Wrap Up00:45
31Module Introduction00:50
32Conditional Rendering with v-if03:39
33Using an Alternative v-if Syntax01:37
34Don't Detach it with v-show01:44
35Rendering Lists with v-for02:27
36Getting the Current Index01:52
37Using an Alternative v-for Syntax01:11
38Looping through Objects04:45
39Looping through a List of Numbers00:58
40Keeping Track of Elements when using v-for04:09
41Module Wrap Up00:52
42Introduction & Challenge02:55
43Setting up the Course Project02:38
44Creating the Vue Instance and Styling the Healthbars05:17
45Showing the Player Controls Conditionally02:03
46Implementing a "Start Game" Method01:54
47Implementing a "Attack" Method08:04
48Write better Code - Time for Refactoring!04:53
49Implementing a "Special Attack"02:12
50Implementing a "Heal" Method02:22
51Finishing the Action Buttons01:00
52Creating an Action Log02:42
53Printing the Log (v-for)02:21
54Finishing the Log01:58
55Styling the Log Conditionally01:45
56Wrap Up01:29
57Module Introduction01:05
58Some Basics about the VueJS Instance02:59
59Using Multiple Vue Instances02:53
60Accessing the Vue Instance from Outside03:30
61How VueJS manages your Data and Methods04:02
62A Closer Look at $el and $data04:56
63Placing $refs and Using them on your Templates05:49
64Where to learn more about the Vue API00:59
65Mounting a Template06:43
66Using Components04:57
67Limitations of some Templates02:36
68How VueJS Updates the DOM03:26
69The VueJS Instance Lifecycle03:13
70The VueJS Instance Lifecycle in Practice05:40
71Module Wrap Up00:55
72Module Introduction01:34
73Why do we need a Development Server?02:48
74What does "Development Workflow" mean?03:52
75Using the Vue CLI to create Projects02:36
76Installing the Vue CLI and Creating a new Project04:19
77An Overview over the Webpack Template Folder Structure03:41
78Understanding ".vue" Files06:47
79Understanding the Object in the Vue File01:12
80How to Build your App for Production00:50
81Module Wrap Up01:12
82Module Introduction01:05
83An Introduction to Components04:57
84Storing Data in Components with the Data Method04:05
85Registering Components Locally and Globally02:51
86The "Root Component" in the App.vue File03:22
87Creating a Component04:25
88Using Components05:33
89Moving to a Better Folder Structure02:44
90How to Name your Component Tags (Selectors)04:32
91Scoping Component Styles05:06
92Module Wrap Up00:51
93Module Introduction00:47
94Communication Problems02:53
95Using Props for Parent => Child Communication03:11
96Naming "props"01:11
97Using "props" in the Child Component01:29
98Validating "props"04:58
99Using Custom Events for Child => Parent Communication05:56
100Understanding Unidirectional Data Flow01:08
101Communicating with Callback Functions02:24
102Communication between Sibling Components06:26
103Using an Event Bus for Communication05:33
104Centralizing Code in an Event Bus02:15
105Wrap Up00:42
106Module Introduction00:39
107Setting up the Module Project03:01
108Passing Content - The Suboptimal Solution02:20
109Passing Content with Slots00:43
110How Slot Content gets Compiled and Styled03:04
111Using Multiple Slots (Named Slots)02:51
112Default Slots and Slot Defaults02:02
113A Summary on Slots00:46
114Switching Multiple Components with Dynamic Components05:32
115Understanding Dynamic Component Behavior02:08
116Keeping Dynamic Components Alive00:59
117Dynamic Component Lifecycle Hooks01:19
118Wrap Up01:12
119Module Introduction01:37
120Setting up the Project01:23
121Initializing the Application01:29
122Creating the Application Components04:05
123Passing Data with Props and Slots02:14
124Allowing Users to Create Quotes with a NewQuote Component04:09
125Adding Quotes with Custom Events03:35
126Adding a Info Box01:07
127Allowing for Quote Deletion03:41
128Controlling Quotes with a Progress Bar03:53
129Finishing Touches and State Management02:14
130Module Introduction00:55
131A Basic <input> Form Binding03:47
132Grouping Data and Pre-Populating Inputs02:43
133Modifying User Input with Input Modifiers02:59
134Binding <textarea> and Saving Line Breaks02:54
135Using Checkboxes and Saving Data in Arrays04:06
136Using Radio Buttons02:31
137Handling Dropdowns with <select> and <option>05:10
138What v-model does and How to Create a Custom Control02:50
139Creating a Custom Control (Input)05:14
140Submitting a Form02:09
141Wrap Up00:44
142Module Introduction00:54
143Understanding Directives03:35
144How Directives Work - Hook Functions02:29
145Creating a Simple Directive01:23
146Passing Values to Custom Directives01:09
147Passing Arguments to Custom Directives02:41
148Modifying a Custom Directive with Modifiers02:25
149Custom Directives - A Summary00:29
150Registering Directives Locally01:38
151Using Multiple Modifiers04:28
152Passing more Complex Values to Directives02:14
153Wrap Up00:45
154Module Introduction00:46
155Creating a Local Filter04:33
156Global Filters and How to Chain Multiple Filters01:46
157An (often-times better) Alternative to Filters: Computed Properties05:16
158Understanding Mixins02:24
159Creating and Using Mixins02:26
160How Mixins get Merged02:59
161Creating a Global Mixin (Special Case!)03:27
162Mixins and Scope02:34
163Wrap Up01:57
164Module Introduction01:09
165Understanding Transitions01:02
166Preparing Code to use Transitions03:12
167Setting Up a Transition03:10
168Assigning CSS Classes for Transitions02:28
169Creating a "Fade" Transition with the CSS Transition Property03:22
170Creating a "Slide" Transition with the CSS Animation Property04:00
171Mixing Transition and Animation Properties03:32
172Animating v-if and v-show00:34
173Setting Up an Initial (on-load) Animation01:31
174Using Different CSS Class Names04:02
175Using Dynamic Names and Attributes02:34
176Transitioning between Multiple Elements (Theory)00:35
177Transitioning between Multiple Elements (Practice)04:43
178Listening to Transition Event Hooks02:07
179Understanding JavaScript Animations08:04
180Excluding CSS from your Animation01:29
181Creating an Animation in JavaScript06:19
182Animating Dynamic Components05:58
183Animating Lists with <transition-group>00:45
184Using <transition-group> - Preparations04:21
185Using <transition-group> to Animate a List06:13
186Understanding the App01:16
187Creating the App12:05
188Adding Animations06:39
189Wrap Up01:04
190Module Introduction01:43
191Accessing Http via vue-resource - Setup04:01
192Creating an Application and Setting Up a Server (Firebase)05:25
193POSTing Data to a Server (Sending a POST Request)06:11
194GETting and Transforming Data (Sending a GET Request)06:55
195Configuring vue-resource Globally02:49
196Intercepting Requests03:35
197Intercepting Responses02:52
198Where the "resource" in vue-resource Comes From04:43
199Creating Custom Resources02:40
200Resources vs "Normal" Http Requests00:29
201Understanding Template URLs05:07
202Wrap Up01:43
203Module Introduction01:39
204Setting up the VueJS Router (vue-router)02:17
205Setting Up and Loading Routes06:44
206Understanding Routing Modes (Hash vs History)04:15
207Navigating with Router Links03:46
208Where am I? - Styling Active Links03:21
209Navigating from Code (Imperative Navigation)02:43
210Setting Up Route Parameters02:00
211Fetching and Using Route Parameters02:04
212Reacting to Changes in Route Parameters03:05
213Setting Up Child Routes (Nested Routes)04:40
214Navigating to Nested Routes03:10
215Making Router Links more Dynamic02:05
216A Better Way of Creating Links - With Named Routes03:22
217Using Query Parameters02:55
218Multiple Router Views (Named Router Views)03:28
219Redirecting02:14
220Setting Up "Catch All" Routes / Wildcards01:07
221Animating Route Transitions02:35
222Passing the Hash Fragment03:29
223Controlling the Scroll Behavior03:22
224Protecting Routes with Guards01:14
225Using the "beforeEnter" Guard07:52
226Using the "beforeLeave" Guard03:32
227Loading Routes Lazily07:09
228Wrap Up01:03
229Module Introduction01:13
230Why a Different State Management May Be Needed02:26
231Understanding "Centralized State"01:33
232Using the Centralized State06:50
233Why a Centralized State Alone Won't Fix It02:42
234Understanding Getters00:49
235Using Getters02:41
236Mapping Getters to Properties06:58
237Understanding Mutations01:15
238Using Mutations04:52
239Why Mutations have to run Synchronously01:35
240How Actions improve Mutations01:33
241Using Actions05:00
242Mapping Actions to Methods04:59
243A Summary of Vuex04:15
244Two-Way-Binding (v-model) and Vuex05:57
245Improving Folder Structures01:02
246Modularizing the State Management04:57
247Using Separate Files04:19
248Using Namespaces to Avoid Naming Problems06:45
249Wrap Up00:51
250Project Introduction03:12
251Project Setup and Planning02:46
252Creating the First Components02:56
253Setup Project Routes04:43
254Adding a Header and Navigation06:45
255Planning the Next Steps01:23
256Creating Stocks Components06:32
257Adding a "Buy" Button05:58
258Setting up the Vuex State Management10:22
259Adding a Portfolio Module to Vuex10:03
260Working on the Portfolio Stocks06:52
261Connecting the Portfolio with Vuex02:22
262Time to fix some Errors02:01
263Displaying the Funds03:42
264Adding some Order Checks05:42
265Making Funds Look Nicer with Filters01:49
266Ending the Day - Randomizing Stocks05:31
267Animating the Route Transitions03:15
268Saving & Fetching Data - Adding a Dropdown02:18
269Setting up vue-resource and Firebase02:17
270Saving Data (PUT Request)02:52
271Fetching Data (GET Request)05:05
272Testing and Bug Fixes02:51
273Project Wrap Up01:23
274Bonus: Debugging Vuex with Vue Developer Tools02:00
275Module Introduction01:13
276Preparing for Deployment01:46
277Deploying the App (Example: AWS S3)05:58
278Course Roundup00:59
279Time to Practice (1) - Outputting Data to Templates (Problem)02:00
280Time to Practice (1) - Outputting Data to Templates (Solution)06:13
281Time to Practice (2) - Events (Problem)01:43
282Time to Practice (2) - Events (Solution)04:55
283Time to Practice (3) - Reactive Properties (Problem)02:30
284Time to Practice (3) - Reactive Properties (Solution)05:48
285Time to Practice (4) - Styling (Problem)03:50
286Time to Practice (4) - Styling (Solution)18:18
287Time to Practice (5) - Conditionals and Lists (Problem)01:41
288Time to Practice (5) - Conditionals and Lists (Solution)09:39
289Time to Practice (6) - Components (Problem)01:46
290Time to Practice (6) - Components (Solution)02:13
291Time to Practice (7) - Component Communication (Problem)03:07
292Time to Practice (7) - Component Communication (Solution)10:18
293Time to Practice (8) - Slots and Dynamic Components (Problem)01:28
294Time to Practice (8) - Slots and Dynamic Components (Solution)03:01
295Time to Practice (9) - Forms (Problem)01:31
296Time to Practice (9) - Forms (Solution)15:18
297Time to Practice (10) - Directives (Problem)00:55
298Time to Practice (10) - Directives (Solution)05:56
299Time to Practice (11) - Filters and Mixins (Problem)01:09
300Time to Practice (11) - Filters and Mixins (Solution)08:13
301About this Section00:38
302Module Introduction01:08
303Project Setup02:47
304Axios Setup02:13
305Sending a POST Request05:40
306Sending a GET Request02:53
307Accessing & Using Response Data05:49
308Setting a Global Request Configuration05:44
309Using Interceptors05:50
310Custom Axios Instances04:58
311Wrap Up00:59
312About this Section00:53
313Module Introduction02:00
314How Authentication Works in SPAs03:11
315Project Setup02:37
316Adding User Signup05:15
317Adding User Signin (Login)02:42
318Using Vuex to send Auth Requests04:27
319Storing Auth Data in Vuex03:46
320Accessing other Resources from Vuex08:42
321Sending the Token to the Backend05:39
322Protecting Routes (Auth Guard)02:49
323Updating the UI State (based on Authentication State)03:02
324Adding User Logout05:02
325Adding Auto Logout05:37
326Adding Auto Login10:37
327Wrap Up01:02
328About this Section00:58
329Module Introduction01:06
330Installing Vuelidate02:05
331Adding a Validator10:15
332Adding Validation UI Feedback04:56
333Controlling Styles for Invalid Entries02:11
334More Validators06:34
335Validating Passwords For Equality06:17
336Using the Required-Unless Validator04:53
337Validating Arrays07:20
338Controlling the Form Submit Button02:13
339Creating Custom Validators02:47
340Async Validators09:17
341Wrap Up01:06
342Module Introduction03:19
343Creating a Project04:42
344Analyzing the Created Project04:50
345Using Plugins04:06
346CSS Pre-Processors03:15
347Environment Variables07:29
348Building the Project03:44
349Instant Prototyping02:40
350Different Build Targets08:40
351Using the "Old" CLI Templates (vue init)01:20
352Using the Graphical User Interface (GUI)05:06

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

What’s New in Nuxt 4: Key Updates for Nuxt.js Developers

What’s New in Nuxt 4: Key Updates for Nuxt.js Developers

Sources: vueschool.io
Discover the latest features and improvements in Nuxt 4, the newest version of the popular framework based on Vue.js. This course covers the key...
33 minutes 19 seconds
Real-Time Data with Laravel Reverb and Vue.js

Real-Time Data with Laravel Reverb and Vue.js

Sources: vueschool.io
Would you like to add real data handling features to your applications on Laravel and Vue.js? Whether you are creating a notification system, a chat in...
44 minutes 56 seconds
Rapid Development with Vite

Rapid Development with Vite

Sources: vueschool.io
Vite is a first-in-class build tool that aims to provide a faster and leaner development experience for modern web projects. In this course, we cover everything you need to kno...
1 hour 40 minutes 49 seconds