1. Getting Started

6 lectures 19m 49s

1. Course Introduction 3m 9s
2. Let's Create our First VueJS Application 4m 45s
3. Extending the VueJS Application 4m 12s
4. Course Structure 3m 44s
5. Take Advantage of all Course Resources! 1m 56s
6. Setup VueJS Locally 2m 3s

2. Using VueJS to Interact with the DOM

24 lectures 1h 2m 47s

1. Module Introduction 45s
2. Understanding VueJS Templates 2m 35s
3. How the VueJS Template Syntax and Instance Work Together 2m 42s
4. Accessing Data in the Vue Instance 1m 49s
5. Binding to Attributes 2m 43s
6. Understanding and Using Directives 1m 27s
7. Disable Re-Rendering with v-once 1m 41s
8. How to Output Raw HTML 2m 43s
9. Listening to Events 1m 50s
10. Getting Event Data from the Event Object 2m 36s
11. Passing your own Arguments with Events 1m 53s
12. Modifying an Event - with Event Modifiers 3m 23s
13. Listening to Keyboard Events 2m 3s
14. Writing JavaScript Code in the Templates 3m 19s
15. Using Two-Way-Binding 1m 49s
16. Reacting to Changes with Computed Properties 9m 32s
17. An Alternative to Computed Properties: Watching for Changes 3m 53s
18. Saving Time with Shorthands 1m 26s
19. Dynamic Styling with CSS Classes - Basics 4m 22s
20. Dynamic Styling with CSS Classes - Using Objects 1m 36s
21. Dynamic Styling with CSS Classes - Using Names 3m 27s
22. Setting Styles Dynamically (without CSS Classes) 3m 15s
23. Styling Elements with the Array Syntax 1m 14s
24. Module Wrap Up 44s

3. Using Conditionals and Rendering Lists

11 lectures 23m 53s

1. Module Introduction 49s
2. Conditional Rendering with v-if 3m 38s
3. Using an Alternative v-if Syntax 1m 36s
4. Don't Detach it with v-show 1m 43s
5. Rendering Lists with v-for 2m 26s
6. Getting the Current Index 1m 51s
7. Using an Alternative v-for Syntax 1m 10s
8. Looping through Objects 4m 44s
9. Looping through a List of Numbers 57s
10. Keeping Track of Elements when using v-for 4m 8s
11. Module Wrap Up 51s

4. First Course Project - The Monster Slayer

15 lectures 43m 18s

1. Introduction & Challenge 2m 54s
2. Setting up the Course Project 2m 37s
3. Creating the Vue Instance and Styling the Healthbars 5m 16s
4. Showing the Player Controls Conditionally 2m 2s
5. Implementing a "Start Game" Method 1m 53s
6. Implementing a "Attack" Method 8m 3s
7. Write better Code - Time for Refactoring! 4m 52s
8. Implementing a "Special Attack" 2m 11s
9. Implementing a "Heal" Method 2m 21s
10. Finishing the Action Buttons 59s
11. Creating an Action Log 2m 41s
12. Printing the Log (v-for) 2m 20s
13. Finishing the Log 1m 57s
14. Styling the Log Conditionally 1m 44s
15. Wrap Up 1m 28s

5. Understanding the VueJS Instance

15 lectures 53m 29s

1. Module Introduction 1m 4s
2. Some Basics about the VueJS Instance 2m 58s
3. Using Multiple Vue Instances 2m 52s
4. Accessing the Vue Instance from Outside 3m 29s
5. How VueJS manages your Data and Methods 4m 1s
6. A Closer Look at $el and $data 4m 55s
7. Placing $refs and Using them on your Templates 5m 48s
8. Where to learn more about the Vue API 58s
9. Mounting a Template 6m 42s
10. Using Components 4m 56s
11. Limitations of some Templates 2m 35s
12. How VueJS Updates the DOM 3m 25s
13. The VueJS Instance Lifecycle 3m 12s
14. The VueJS Instance Lifecycle in Practice 5m 39s
15. Module Wrap Up 55s

6. Moving to a "Real" Development Workflow with Webpack and Vue CLI

10 lectures 28m 42s

1. Module Introduction 1m 34s
2. Why do we need a Development Server? 2m 47s
3. What does "Development Workflow" mean? 3m 51s
4. Using the Vue CLI to create Projects 2m 35s
5. Installing the Vue CLI and Creating a new Project 4m 18s
6. An Overview over the Webpack Template Folder Structure 3m 40s
7. Understanding ".vue" Files 6m 46s
8. Understanding the Object in the Vue File 1m 11s
9. How to Build your App for Production 49s
10. Module Wrap Up 1m 11s

7. An Introduction to Components

11 lectures 39m 20s

1. Module Introduction 1m 4s
2. An Introduction to Components 4m 56s
3. Storing Data in Components with the Data Method 4m 4s
4. Registering Components Locally and Globally 2m 50s
5. The "Root Component" in the App.vue File 3m 21s
6. Creating a Component 4m 24s
7. Using Components 5m 32s
8. Moving to a Better Folder Structure 2m 43s
9. How to Name your Component Tags (Selectors) 4m 31s
10. Scoping Component Styles 5m 5s
11. Module Wrap Up 50s

8. Communicating between Components

13 lectures 38m 40s

1. Module Introduction 46s
2. Communication Problems 2m 52s
3. Using Props for Parent => Child Communication 3m 10s
4. Naming "props" 1m 10s
5. Using "props" in the Child Component 1m 28s
6. Validating "props" 4m 57s
7. Using Custom Events for Child => Parent Communication 5m 55s
8. Understanding Unidirectional Data Flow 1m 7s
9. Communicating with Callback Functions 2m 23s
10. Communication between Sibling Components 6m 25s
11. Using an Event Bus for Communication 5m 32s
12. Centralizing Code in an Event Bus 2m 14s
13. Wrap Up 41s

9. Advanced Component Usage

13 lectures 26m 23s

1. Module Introduction 38s
2. Setting up the Module Project 3m
3. Passing Content - The Suboptimal Solution 2m 19s
4. Passing Content with Slots 42s
5. How Slot Content gets Compiled and Styled 3m 3s
6. Using Multiple Slots (Named Slots) 2m 50s
7. Default Slots and Slot Defaults 2m 1s
8. A Summary on Slots 45s
9. Switching Multiple Components with Dynamic Components 5m 31s
10. Understanding Dynamic Component Behavior 2m 7s
11. Keeping Dynamic Components Alive 58s
12. Dynamic Component Lifecycle Hooks 1m 18s
13. Wrap Up 1m 11s

10. Second Course Project - Wonderful Quotes

11 lectures 29m 16s

1. Module Introduction 1m 36s
2. Setting up the Project 1m 22s
3. Initializing the Application 1m 28s
4. Creating the Application Components 4m 4s
5. Passing Data with Props and Slots 2m 13s
6. Allowing Users to Create Quotes with a NewQuote Component 4m 8s
7. Adding Quotes with Custom Events 3m 34s
8. Adding a Info Box 1m 6s
9. Allowing for Quote Deletion 3m 40s
10. Controlling Quotes with a Progress Bar 3m 52s
11. Finishing Touches and State Management 2m 13s

11. Handling User Input with Forms

12 lectures 35m 50s

1. Module Introduction 54s
2. A Basic 'input' Form Binding 3m 46s
3. Grouping Data and Pre-Populating Inputs 2m 42s
4. Modifying User Input with Input Modifiers 2m 58s
5. Binding 'textarea' and Saving Line Breaks 2m 53s
6. Using Checkboxes and Saving Data in Arrays 4m 5s
7. Using Radio Buttons 2m 30s
8. Handling Dropdowns with 'select' and 'option' 5m 9s
9. What v-model does and How to Create a Custom Control 2m 49s
10. Creating a Custom Control (Input) 5m 13s
11. Submitting a Form 2m 8s
12. Wrap Up 43s

12. Using and Creating Directives

12 lectures 23m 59s

1. Module Introduction 53s
2. Understanding Directives 3m 34s
3. How Directives Work - Hook Functions 2m 28s
4. Creating a Simple Directive 1m 22s
5. Passing Values to Custom Directives 1m 8s
6. Passing Arguments to Custom Directives 2m 40s
7. Modifying a Custom Directive with Modifiers 2m 25s
8. Custom Directives - A Summary 28s
9. Registering Directives Locally 1m 37s
10. Using Multiple Modifiers 4m 27s
11. Passing more Complex Values to Directives 2m 13s
12. Wrap Up 44s

13. Improving your App with Filters and Mixins

10 lectures 27m 58s

1. Module Introduction 45s
2. Creating a Local Filter 4m 32s
3. Global Filters and How to Chain Multiple Filters 1m 45s
4. An (often-times better) Alternative to Filters: Computed Properties 5m 15s
5. Understanding Mixins 2m 23s
6. Creating and Using Mixins 2m 25s
7. How Mixins get Merged 2m 58s
8. Creating a Global Mixin (Special Case!) 3m 26s
9. Mixins and Scope 2m 33s
10. Wrap Up 1m 56s

14. Adding Animations and Transitions

26 lectures 1h 31m 48s

1. Module Introduction 1m 8s
2. Understanding Transitions 1m 1s
3. Preparing Code to use Transitions 3m 11s
4. Setting Up a Transition 3m 9s
5. Assigning CSS Classes for Transitions 2m 27s
6. Creating a "Fade" Transition with the CSS Transition Property 3m 21s
7. Creating a "Slide" Transition with the CSS Animation Property 3m 59s
8. Mixing Transition and Animation Properties 3m 31s
9. Animating v-if and v-show 33s
10. Setting Up an Initial (on-load) Animation 1m 30s
11. Using Different CSS Class Names 4m 1s
12. Using Dynamic Names and Attributes 2m 33s
13. Transitioning between Multiple Elements (Theory) 34s
14. Transitioning between Multiple Elements (Practice) 4m 42s
15. Listening to Transition Event Hooks 2m 6s
16. Understanding JavaScript Animations 8m 3s
17. Excluding CSS from your Animation 1m 28s
18. Creating an Animation in JavaScript 6m 18s
19. Animating Dynamic Components 5m 57s
20. Animating Lists with 'transition-group' 44s
21. Using 'transition-group' - Preparations 4m 20s
22. Using 'transition-group' to Animate a List 6m 12s
23. Understanding the App 1m 15s
24. Creating the App 12m 4s
25. Adding Animations 6m 38s
26. Wrap Up 1m 3s

15. Connecting to Servers via Http - Using vue-resource

13 lectures 48m

1. Module Introduction 1m 42s
2. Accessing Http via vue-resource - Setup 4m
3. Creating an Application and Setting Up a Server (Firebase) 5m 24s
4. POSTing Data to a Server (Sending a POST Request) 6m 10s
5. GETting and Transforming Data (Sending a GET Request) 6m 54s
6. Configuring vue-resource Globally 2m 48s
7. Intercepting Requests 3m 34s
8. Intercepting Responses 2m 51s
9. Where the "resource" in vue-resource Comes From 4m 42s
10. Creating Custom Resources 2m 39s
11. Resources vs "Normal" Http Requests 28s
12. Understanding Template URLs 5m 6s
13. Wrap Up 1m 42s

16. Routing in a VueJS Application

26 lectures 1h 24m 45s

1. Module Introduction 1m 38s
2. Setting up the VueJS Router (vue-router) 2m 16s
3. Setting Up and Loading Routes 6m 43s
4. Understanding Routing Modes (Hash vs History) 4m 14s
5. Navigating with Router Links 3m 45s
6. Where am I? - Styling Active Links 3m 20s
7. Navigating from Code (Imperative Navigation) 2m 42s
8. Setting Up Route Parameters 1m 59s
9. Fetching and Using Route Parameters 2m 3s
10. Reacting to Changes in Route Parameters 3m 4s
11. Setting Up Child Routes (Nested Routes) 4m 39s
12. Navigating to Nested Routes 3m 9s
13. Making Router Links more Dynamic 2m 4s
14. A Better Way of Creating Links - With Named Routes 3m 21s
15. Using Query Parameters 2m 54s
16. Multiple Router Views (Named Router Views) 3m 27s
17. Redirecting 2m 13s
18. Setting Up "Catch All" Routes / Wildcards 1m 6s
19. Animating Route Transitions 2m 34s
20. Passing the Hash Fragment 3m 28s
21. Controlling the Scroll Behavior 3m 21s
22. Protecting Routes with Guards 1m 13s
23. Using the "beforeEnter" Guard 7m 51s
24. Using the "beforeLeave" Guard 3m 31s
25. Loading Routes Lazily 7m 8s
26. Wrap Up 1m 2s

17. Better State Management with Vuex

21 lectures 1h 12m 11s

1. Module Introduction 1m 12s
2. Why a Different State Management May Be Needed 2m 25s
3. Understanding "Centralized State" 1m 32s
4. Using the Centralized State 6m 49s
5. Why a Centralized State Alone Won't Fix It 2m 41s
6. Understanding Getters 48s
7. Using Getters 2m 40s
8. Mapping Getters to Properties 6m 57s
9. Understanding Mutations 1m 14s
10. Using Mutations 4m 51s
11. Why Mutations have to run Synchronously 1m 34s
12. How Actions improve Mutations 1m 32s
13. Using Actions 4m 59s
14. Mapping Actions to Methods 4m 58s
15. A Summary of Vuex 4m 14s
16. Two-Way-Binding (v-model) and Vuex 5m 56s
17. Improving Folder Structures 1m 1s
18. Modularizing the State Management 4m 56s
19. Using Separate Files 4m 18s
20. Using Namespaces to Avoid Naming Problems 6m 44s
21. Wrap Up 50s

18. Final Project - The Stock Trader

25 lectures 1h 44m 15s

1. Project Introduction 3m 11s
2. Project Setup and Planning 2m 45s
3. Creating the First Components 2m 55s
4. Setup Project Routes 4m 42s
5. Adding a Header and Navigation 6m 44s
6. Planning the Next Steps 1m 22s
7. Creating Stocks Components 6m 31s
8. Adding a "Buy" Button 5m 57s
9. Setting up the Vuex State Management 10m 21s
10. Adding a Portfolio Module to Vuex 10m 2s
11. Working on the Portfolio Stocks 6m 51s
12. Connecting the Portfolio with Vuex 2m 21s
13. Time to fix some Errors 2m
14. Displaying the Funds 3m 41s
15. Adding some Order Checks 5m 41s
16. Making Funds Look Nicer with Filters 1m 48s
17. Ending the Day - Randomizing Stocks 5m 30s
18. Animating the Route Transitions 3m 14s
19. Saving & Fetching Data - Adding a Dropdown 2m 17s
20. Setting up vue-resource and Firebase 2m 16s
21. Saving Data (PUT Request) 2m 51s
22. Fetching Data (GET Request) 5m 4s
23. Testing and Bug Fixes 2m 50s
24. Project Wrap Up 1m 22s
25. Bonus: Debugging Vuex with Vue Developer Tools 1m 59s

19. Deploying a VueJS Application

3 lectures 8m 54s

1. Module Introduction 1m 12s
2. Preparing for Deployment 1m 45s
3. Deploying the App (Example: AWS S3) 5m 57s

20. Course Roundup

1 lectures 59s

1. Courses Roundup 59s

21. All Course Exercises ("Time to Practice")

22 lectures 1h 51m 10s

1. Time to Practice (1) - Outputting Data to Templates (Problem) 1m 59s
2. Time to Practice (1) - Outputting Data to Templates (Solution) 6m 12s
3. Time to Practice (2) - Events (Problem) 1m 42s
4. Time to Practice (2) - Events (Solution) 4m 54s
5. Time to Practice (3) - Reactive Properties (Problem) 2m 29s
6. Time to Practice (3) - Reactive Properties (Solution) 5m 47s
7. Time to Practice (4) - Styling (Problem) 3m 49s
8. Time to Practice (4) - Styling (Solution) 18m 17s
9. Time to Practice (5) - Conditionals and Lists (Problem) 1m 40s
10. Time to Practice (5) - Conditionals and Lists (Solution) 9m 38s
11. Time to Practice (6) - Components (Problem) 1m 45s
12. Time to Practice (6) - Components (Solution) 2m 12s
13. Time to Practice (7) - Component Communication (Problem) 3m 6s
14. Time to Practice (7) - Component Communication (Solution) 10m 17s
15. Time to Practice (8) - Slots and Dynamic Components (Problem) 1m 27s
16. Time to Practice (8) - Slots and Dynamic Components (Solution) 3m
17. Time to Practice (9) - Forms (Problem) 1m 30s
18. Time to Practice (9) - Forms (Solution) 15m 17s
19. Time to Practice (10) - Directives (Problem) 54s
20. Time to Practice (10) - Directives (Solution) 5m 55s
21. Time to Practice (11) - Filters and Mixins (Problem) 1m 8s
22. Time to Practice (11) - Filters and Mixins (Solution) 8m 12s

Building Frontend Applications with Vue JS

Hot Exams

Need Help Assistance?