Section 1 : Getting Started
|
Lecture 1 | What is Vue | 00:07:55 Duration |
|
Lecture 2 | Different Ways of Using Vue | 00:02:37 Duration |
|
Lecture 3 | Exploring Vue Alternatives | 00:03:13 Duration |
|
Lecture 4 | Building A First App With Just JavaScript | 00:07:30 Duration |
|
Lecture 5 | Re-building the App with Vue | 00:10:56 Duration |
|
Lecture 6 | Vue vs Vanilla JavaScript (just JavaScript) | 00:01:11 Duration |
|
Lecture 7 | Setting Up the Course Development Environment | 00:02:05 Duration |
|
Lecture 8 | Course Outline & What's In The Course | 00:02:59 Duration |
|
Lecture 9 | How To Get The Most Out Of This Course | 00:03:25 Duration |
|
Lecture 10 | Module Resources | |
|
Lecture 11 | INTRODUCTION TO BRAINMEASURES PROCTOR SYSTEM |
Section 2 : Basics & Core Concepts - DOM Interaction with Vue
Section 3 : Rendering Conditional Content & Lists
|
Lecture 1 | Module Introduction | 00:01:36 Duration |
|
Lecture 2 | Understanding the Problem | 00:03:17 Duration |
|
Lecture 3 | Rendering Content Conditionally | 00:05:12 Duration |
|
Lecture 4 | v-if, v-else and v-else-if | 00:04:21 Duration |
|
Lecture 5 | Using v-show Instead Of v-if | 00:02:27 Duration |
|
Lecture 6 | Rendering Lists of Data | 00:06:23 Duration |
|
Lecture 7 | Diving Deeper Into v-for | 00:05:15 Duration |
|
Lecture 8 | Removing List Items | 00:04:01 Duration |
|
Lecture 9 | Lists & Keys | 00:08:30 Duration |
|
Lecture 10 | Module Summary | 00:02:16 Duration |
|
Lecture 11 | Module Resources |
Section 4 : Course Project The Monster Slayer Game
|
Lecture 1 | Module Introduction | 00:01:19 Duration |
|
Lecture 2 | Project Setup & First Methods | 00:12:33 Duration |
|
Lecture 3 | Updating the Health Bars | 00:07:11 Duration |
|
Lecture 4 | Adding a Special Attack | 00:06:26 Duration |
|
Lecture 5 | Adding a Heal Functionality | 00:04:49 Duration |
|
Lecture 6 | Adding a Game Over Screen | 00:09:42 Duration |
|
Lecture 7 | Finishing the Core Functionality | 00:06:11 Duration |
|
Lecture 8 | Adding a Battle Log | 00:14:18 Duration |
|
Lecture 9 | Module Resources |
Section 5 : Vue Behind the Scenes
|
Lecture 1 | Module Introduction | 00:01:32 Duration |
|
Lecture 2 | An Introduction to Vue's Reactivity | 00:04:28 Duration |
|
Lecture 3 | Vue Reactivity A Deep Dive | 00:08:14 Duration |
|
Lecture 4 | One App vs Multiple Apps | 00:03:55 Duration |
|
Lecture 5 | Understanding Templates | 00:03:58 Duration |
|
Lecture 6 | Working with Refs | 00:05:24 Duration |
|
Lecture 7 | How Vue Updates the DOM | 00:06:29 Duration |
|
Lecture 8 | Vue App Lifecycle - Theory | 00:04:49 Duration |
|
Lecture 9 | Vue App Lifecycle - Practice | 00:09:52 Duration |
|
Lecture 10 | Module Resources |
Section 6 : Introducing Components
|
Lecture 1 | Module Introduction | 00:01:31 Duration |
|
Lecture 2 | Understanding the Problem | 00:08:43 Duration |
|
Lecture 3 | Introducing Components | 00:10:59 Duration |
|
Lecture 4 | The Why Building Complex User Interfaces With Components | 00:01:01 Duration |
|
Lecture 5 | Multiple Vue Apps vs Multiple Components | |
|
Lecture 6 | Module Resources |
Section 7 : Moving to a Better Development Setup & Workflow with the Vue CLI
|
Lecture 1 | Module Introduction | 00:01:36 Duration |
|
Lecture 2 | Why We Need A Development Server | 00:03:30 Duration |
|
Lecture 3 | WHYW~1 | 00:05:53 Duration |
|
Lecture 4 | Installing & Using the Vue CLI | 00:08:31 Duration |
|
Lecture 5 | Inspecting the Created Project | 00:06:01 Duration |
|
Lecture 6 | INSP~1 | 00:06:07 Duration |
|
Lecture 7 | ADDI~1 | 00:01:16 Duration |
|
Lecture 8 | More on | 00:01:41 Duration |
|
Lecture 9 | A New Vue Project | 00:05:08 Duration |
|
Lecture 10 | Creating a Basic Vue App | 00:09:37 Duration |
|
Lecture 11 | Adding a Component | 00:08:18 Duration |
|
Lecture 12 | Adding Styling | 00:02:17 Duration |
|
Lecture 13 | A Small Addition | |
|
Lecture 14 | Module Resources |
Section 8 : Component Communication
|
Lecture 1 | Module Introduction | 00:01:42 Duration |
|
Lecture 2 | Introducing Props (Parent = Child Communication) | 00:10:08 Duration |
|
Lecture 3 | Prop Behavior & Changing Props | 00:06:33 Duration |
|
Lecture 4 | Validating Props | 00:07:18 Duration |
|
Lecture 5 | Supported Prop Values | |
|
Lecture 6 | Working with Dynamic Prop Values | 00:05:40 Duration |
|
Lecture 7 | Emitting Custom Events (Child = Parent Communication) | 00:11:21 Duration |
|
Lecture 8 | Defining & Validating Custom Events | 00:04:07 Duration |
|
Lecture 9 | Prop Event Fallthrough & Binding All Props | |
|
Lecture 10 | Demo Adding Components & Connecting Them | 00:13:21 Duration |
|
Lecture 11 | Demo Adding More Component Communication | 00:06:27 Duration |
|
Lecture 12 | A Potential Problem | 00:06:29 Duration |
|
Lecture 13 | Provide + Inject To The Rescue | 00:08:20 Duration |
|
Lecture 14 | Provide + Inject for Functions Methods | 00:04:01 Duration |
|
Lecture 15 | Provide + Inject vs Props & Custom Events | 00:02:07 Duration |
|
Lecture 16 | Module Summary | 00:04:46 Duration |
|
Lecture 17 | Module Resources |
Section 9 : Diving Deeper Into Components
|
Lecture 1 | Module Introduction | 00:01:39 Duration |
|
Lecture 2 | Project Setup | 00:02:39 Duration |
|
Lecture 3 | Global vs Local Components | 00:09:26 Duration |
|
Lecture 4 | Scoped Styles | 00:05:18 Duration |
|
Lecture 5 | Introducing Slots | 00:06:27 Duration |
|
Lecture 6 | Named Slots | 00:05:38 Duration |
|
Lecture 7 | Slot Styles & Compilation | 00:02:28 Duration |
|
Lecture 8 | More on Slots | 00:07:22 Duration |
|
Lecture 9 | Scoped Slots | 00:09:39 Duration |
|
Lecture 10 | Dynamic Components | 00:07:10 Duration |
|
Lecture 11 | Keeping Dynamic Components Alive | 00:02:46 Duration |
|
Lecture 12 | Applying What We Know & A Problem | 00:09:29 Duration |
|
Lecture 13 | Teleporting Elements | 00:03:52 Duration |
|
Lecture 14 | Working with Fragments | 00:01:24 Duration |
|
Lecture 15 | The Vue Style Guide | 00:03:04 Duration |
|
Lecture 16 | Moving to a Different Folder Structure | 00:02:58 Duration |
|
Lecture 17 | Module Summary | 00:03:40 Duration |
|
Lecture 18 | Module Resources |
Section 10 : Course Project The Learning Resources App
|
Lecture 1 | Module Introduction | 00:01:38 Duration |
|
Lecture 2 | Setup & First Steps | 00:05:27 Duration |
|
Lecture 3 | First Components & Props | 00:10:51 Duration |
|
Lecture 4 | Styling and More Components | 00:07:23 Duration |
|
Lecture 5 | Header & BaseCard Components | 00:07:03 Duration |
|
Lecture 6 | Adding a Base Button | 00:05:21 Duration |
|
Lecture 7 | Dynamic Components & Attribute Fallthrough | 00:08:42 Duration |
|
Lecture 8 | Adding & Styling Tabs | 00:05:00 Duration |
|
Lecture 9 | Adding a Form | 00:04:14 Duration |
|
Lecture 10 | Fetching User Input | 00:08:31 Duration |
|
Lecture 11 | Adding a Modal Dialog | 00:12:25 Duration |
|
Lecture 12 | Deleting Items | 00:06:45 Duration |
|
Lecture 13 | Adding Teleport | 00:01:29 Duration |
|
Lecture 14 | Module Resources |
Section 11 : Forms
|
Lecture 1 | Module Introduction | 00:00:34 Duration |
|
Lecture 2 | v-model & Inputs | 00:06:06 Duration |
|
Lecture 3 | Working with v-model Modifiers and Numbers | 00:06:58 Duration |
|
Lecture 4 | v-model and Dropdowns | 00:02:27 Duration |
|
Lecture 5 | Using v-model with Checkboxes & Radiobuttons | 00:07:17 Duration |
|
Lecture 6 | Adding Basic Form Validation | 00:05:15 Duration |
|
Lecture 7 | Building a Custom Control Component | 00:06:30 Duration |
|
Lecture 8 | Using v-model on Custom Components | 00:06:51 Duration |
|
Lecture 9 | Module Summary | 00:01:15 Duration |
|
Lecture 10 | Module Resources |
Section 12 : Sending Http Requests
|
Lecture 1 | Module Introduction | 00:01:09 Duration |
|
Lecture 2 | Starting App & Why we need a Backend | 00:05:07 Duration |
|
Lecture 3 | Adding a Backend | 00:03:23 Duration |
|
Lecture 4 | How To (Not) Send Http Requests | 00:05:26 Duration |
|
Lecture 5 | Sending a POST Request to Store Data | 00:05:48 Duration |
|
Lecture 6 | INTRODUCTION TO BRAINMEASURES PROCTOR SYSTEM | |
|
Lecture 7 | Using Axios Instead Of fetch() | |
|
Lecture 8 | Getting Data (GET Request) & Transforming Response Data | 00:09:56 Duration |
|
Lecture 9 | Loading Data When a Component Mounts | 00:02:01 Duration |
|
Lecture 10 | Showing a Loading | 00:02:56 Duration |
|
Lecture 11 | Handling the No Data State | 00:03:02 Duration |
|
Lecture 12 | Handling Technical Browser-side Errors | 00:06:45 Duration |
|
Lecture 13 | Handling Error Responses | 00:06:52 Duration |
|
Lecture 14 | Module Summary | 00:01:33 Duration |
|
Lecture 15 | Module Resources |
Section 13 : Routing Building Multi-Page Single Page Applications
|
Lecture 1 | Module Introduction | 00:00:42 Duration |
|
Lecture 2 | What & Why | 00:04:42 Duration |
|
Lecture 3 | Routing Setup | 00:04:39 Duration |
|
Lecture 4 | Registering & Rendering Routes | 00:06:28 Duration |
|
Lecture 5 | Navigating with router-link | 00:04:58 Duration |
|
Lecture 6 | Styling Active Links | 00:03:07 Duration |
|
Lecture 7 | Programmatic Navigation | 00:04:03 Duration |
|
Lecture 8 | PAS~1 | 00:10:51 Duration |
|
Lecture 9 | Navigation & Dynamic Paths | 00:03:02 Duration |
|
Lecture 10 | A Vue Bug | |
|
Lecture 11 | Updating Params Data with Watchers | 00:05:33 Duration |
|
Lecture 12 | Passing Params as Props | 00:03:39 Duration |
|
Lecture 13 | Redirecting & Catch All Routes | 00:07:54 Duration |
|
Lecture 14 | Using Nested Routes | 00:05:37 Duration |
|
Lecture 15 | MOR~1 | 00:05:24 Duration |
|
Lecture 16 | Using Query Params | 00:04:01 Duration |
|
Lecture 17 | REN~1 | 00:05:54 Duration |
|
Lecture 18 | Controlling Scroll Behavior | 00:06:20 Duration |
|
Lecture 19 | Introducing Navigation Guards | 00:07:34 Duration |
|
Lecture 20 | Diving Deeper Into Navigation Guards | 00:06:53 Duration |
|
Lecture 21 | The Global afterEach Guard | 00:01:28 Duration |
|
Lecture 22 | Beyond Entering Route Leave Guards | 00:07:17 Duration |
|
Lecture 23 | Utilizing Route Metadata | 00:02:16 Duration |
|
Lecture 24 | Organizing Route Files | 00:04:51 Duration |
|
Lecture 25 | Summary | 00:02:13 Duration |
|
Lecture 26 | Module Resources |
Section 14 : Animations & Transitions
Section 15 : Vuex
|
Lecture 1 | Module Introduction | 00:01:00 Duration |
|
Lecture 2 | What & Why | 00:07:15 Duration |
|
Lecture 3 | Creating & Using a Store | 00:04:46 Duration |
|
Lecture 4 | Connecting Components to State | 00:02:38 Duration |
|
Lecture 5 | Introducing Mutations - A Better Way of Changing Data | 00:06:33 Duration |
|
Lecture 6 | Passing Data to Mutations with Payloads | 00:04:09 Duration |
|
Lecture 7 | Introducing Getters - A Better Way Of Getting Data | 00:07:44 Duration |
|
Lecture 8 | Running Async Code with Actions | 00:07:36 Duration |
|
Lecture 9 | Understanding the Action Context | 00:02:03 Duration |
|
Lecture 10 | Using Mapper Helpers | 00:06:00 Duration |
|
Lecture 11 | Example Adding More State | 00:08:13 Duration |
|
Lecture 12 | Organizing your Store with Modules | 00:04:12 Duration |
|
Lecture 13 | Understanding Local Module State | 00:04:30 Duration |
|
Lecture 14 | Namespacing Modules | 00:05:05 Duration |
|
Lecture 15 | Structuring Vuex Code & Files | 00:08:48 Duration |
|
Lecture 16 | A Challenge! | 00:01:52 Duration |
|
Lecture 17 | Challenge Solution (13) | 00:12:06 Duration |
|
Lecture 18 | Challenge Solution (23) | 00:11:33 Duration |
|
Lecture 19 | Challenge Solution (33) | 00:03:20 Duration |
|
Lecture 20 | Summary | |
|
Lecture 21 | Module Resources |
Section 16 : Main Project Find a Coach Web App
Section 17 : Vue & Authentication
|
Lecture 1 | Module Introduction | 00:01:01 Duration |
|
Lecture 2 | How Authentication Works in Vue Apps (or any SPA) | 00:06:12 Duration |
|
Lecture 3 | Locking Protecting Backend Resources | 00:05:59 Duration |
|
Lecture 4 | Adding an Authentication Page (Login & Signup) | 00:09:59 Duration |
|
Lecture 5 | Preparing Vuex | 00:04:24 Duration |
|
Lecture 6 | Adding a Signup Action & Flow | 00:09:10 Duration |
|
Lecture 7 | Better UX Loading Spinner & Error Handling | 00:05:33 Duration |
|
Lecture 8 | Adding a Login Action & Flow | 00:03:16 Duration |
|
Lecture 9 | Attaching the Token to Outgoing Requests | 00:04:22 Duration |
|
Lecture 10 | Updating the UI Based on Auth State | 00:04:06 Duration |
|
Lecture 11 | Adding a Logout Action & Flow | 00:03:36 Duration |
|
Lecture 12 | Authentication & Routing (incl | 00:11:46 Duration |
|
Lecture 13 | Adding Auto Login | 00:08:57 Duration |
|
Lecture 14 | Adding Auto Logout | 00:13:41 Duration |
|
Lecture 15 | Summary | 00:01:20 Duration |
|
Lecture 16 | Module Resources |
Section 18 : Optimizing & Deploying Vue Apps
|
Lecture 1 | Module Introduction | 00:01:11 Duration |
|
Lecture 2 | What To Deploy | 00:02:51 Duration |
|
Lecture 3 | Optimization Using Asynchronous Components | 00:12:21 Duration |
|
Lecture 4 | Building the Project For Production | 00:03:56 Duration |
|
Lecture 5 | Note Async Components & Routing | |
|
Lecture 6 | Deploying a Vue App | 00:08:59 Duration |
|
Lecture 7 | Module Resources |
Section 19 : The Composition API - Replacing the Options API
|
Lecture 1 | Module Introduction | 00:02:01 Duration |
|
Lecture 2 | Which Problem Does The Composition API Solve | 00:06:54 Duration |
|
Lecture 3 | Replacing data with refs | 00:11:35 Duration |
|
Lecture 4 | Building reactive Objects | 00:11:02 Duration |
|
Lecture 5 | Reactivity A Deep Dive | 00:08:27 Duration |
|
Lecture 6 | Replacing methods with Regular Functi | 00:07:05 Duration |
|
Lecture 7 | REP~1 | 00:07:56 Duration |
|
Lecture 8 | Two-Way-Binding and the Composition API | 00:03:00 Duration |
|
Lecture 9 | Working with Watchers | 00:05:45 Duration |
|
Lecture 10 | A First Summary | 00:01:38 Duration |
|
Lecture 11 | How To Use Template Refs | 00:04:51 Duration |
|
Lecture 12 | Components, Props & The Composition API | 00:08:01 Duration |
|
Lecture 13 | Emitting Custom Events | 00:02:35 Duration |
|
Lecture 14 | Working with Provide Inject | 00:03:44 Duration |
|
Lecture 15 | Lifecycle Hooks in the Composition API | 00:05:16 Duration |
|
Lecture 16 | MIG~1 | 00:01:57 Duration |
|
Lecture 17 | Migrating a First Component | 00:06:43 Duration |
|
Lecture 18 | Migrating a Big Component | 00:12:43 Duration |
|
Lecture 19 | Migrating the Remaining Components | 00:12:01 Duration |
|
Lecture 20 | Routing, Params & The Composition API | 00:07:30 Duration |
|
Lecture 21 | THE~1 | 00:05:11 Duration |
|
Lecture 22 | Using Vuex with the Composition API | 00:04:36 Duration |
|
Lecture 23 | Summary | 00:03:11 Duration |
|
Lecture 24 | Module Resources |
Section 20 : Reusing Functionality Mixins & Custom Composition Functions
|
Lecture 1 | Module Introduction | 00:01:17 Duration |
|
Lecture 2 | Reusability Concepts | 00:04:57 Duration |
|
Lecture 3 | Using Mixins | 00:04:51 Duration |
|
Lecture 4 | Understanding Mixin Merging | 00:03:13 Duration |
|
Lecture 5 | Global Mixins | 00:02:54 Duration |
|
Lecture 6 | Disadvantages of Mixins | 00:03:30 Duration |
|
Lecture 7 | CUS~1 | 00:08:44 Duration |
|
Lecture 8 | More Custom Composition Functions | 00:03:50 Duration |
|
Lecture 9 | Why Hooks Composables Beat Mixins | 00:01:27 Duration |
|
Lecture 10 | Example Creating a Search Hook | 00:11:34 Duration |
|
Lecture 11 | Custom Hooks Gotchas | 00:08:47 Duration |
|
Lecture 12 | MOR~1 | 00:02:56 Duration |
|
Lecture 13 | Example A Custom Sort Hook | 00:05:31 Duration |
|
Lecture 14 | Module Resources |
Section 21 : Roundup & Next Steps
|
Lecture 1 | Course Roundup & Next Steps | 00:03:09 Duration |
Section 22 : Vue 2 to Vue 3 Migration
|
Lecture 1 | Vue 3 - Overview | 00:06:33 Duration |
|
Lecture 2 | Important Changes & Migration Steps | 00:17:59 Duration |
|
Lecture 3 | Vue 3 New Features | 00:05:30 Duration |
|
Lecture 4 | The New Composition API (Optional!) | 00:23:56 Duration |
|
Lecture 5 | Further Migration Resources | |
|
Lecture 6 | About this Course & Vue 3 | 00:06:26 Duration |
|
Lecture 7 | About Certification |
Section 23 : Getting Started [VUE2]
|
Lecture 1 | Why is this section marked with VUE2 | |
|
Lecture 2 | Course Introduction | 00:03:10 Duration |
|
Lecture 3 | About Proctor Testing | |
|
Lecture 4 | Let's Create our First VueJS Application | |
|
Lecture 5 | Extending the VueJS Application | 00:04:14 Duration |
|
Lecture 6 | Course Structure | 00:03:46 Duration |
|
Lecture 7 | Take Advantage of all Course Resources! | 00:01:57 Duration |
|
Lecture 8 | Setup VueJS Locally | 00:02:04 Duration |
|
Lecture 9 | Module Resources & Useful Links |
Section 24 : Using VueJS to Interact with the DOM [VUE2]
Section 25 : Using Conditionals and Rendering Lists [VUE2]
|
Lecture 1 | INTRODUCTION TO BRAINMEASURES PROCTOR SYSTEM | |
|
Lecture 2 | Conditional Rendering with v-if | 00:03:39 Duration |
|
Lecture 3 | v-else-if in Vue | |
|
Lecture 4 | Using an Alternative v-if Syntax | 00:01:37 Duration |
|
Lecture 5 | Don't Detach it with v-show | 00:01:44 Duration |
|
Lecture 6 | Rendering Lists with v-for | 00:02:27 Duration |
|
Lecture 7 | Getting the Current Index | 00:01:52 Duration |
|
Lecture 8 | Using an Alternative v-for Syntax | 00:01:11 Duration |
|
Lecture 9 | Looping through Objects | 00:04:46 Duration |
|
Lecture 10 | Looping through a List of Numbers | 00:00:57 Duration |
|
Lecture 11 | Keeping Track of Elements when using v | 00:04:10 Duration |
|
Lecture 12 | Module Wrap Up | 00:00:52 Duration |
|
Lecture 13 | Module Resources & Useful Links | |
|
Lecture 14 | Module Introduction | 00:00:49 Duration |
Section 26 : First Course Project - The Monster Slayer [VUE2]
|
Lecture 1 | Introduction & Challenge | 00:02:56 Duration |
|
Lecture 2 | Setting up the Course Project | 00:02:39 Duration |
|
Lecture 3 | CRE~1 | 00:05:19 Duration |
|
Lecture 4 | Showing the Player Controls Conditionally | 00:02:03 Duration |
|
Lecture 5 | Implementing a Start Game Method | 00:01:54 Duration |
|
Lecture 6 | Implementing a Attack Method | 00:08:07 Duration |
|
Lecture 7 | Write better Code - Time for Refactoring! | 00:04:55 Duration |
|
Lecture 8 | Implementing a Special Attack | 00:02:12 Duration |
|
Lecture 9 | Implementing a Heal Method | 00:02:22 Duration |
|
Lecture 10 | Finishing the Action Buttons | 00:01:00 Duration |
|
Lecture 11 | Creating an Action Log | 00:02:42 Duration |
|
Lecture 12 | Printing the Log (v-for) | 00:02:21 Duration |
|
Lecture 13 | Finishing the Log | 00:01:58 Duration |
|
Lecture 14 | Styling the Log Conditionally | 00:01:45 Duration |
|
Lecture 15 | Wrap Up | 00:01:29 Duration |
|
Lecture 16 | Full Application Code |
Section 27 : Understanding the VueJS Instance [VUE2]
|
Lecture 1 | Module Introduction | 00:01:05 Duration |
|
Lecture 2 | Some Basics about the VueJS Instance | 00:02:59 Duration |
|
Lecture 3 | Using Multiple Vue Instances | 00:02:53 Duration |
|
Lecture 4 | Accessing the Vue Instance from Outside | 00:03:31 Duration |
|
Lecture 5 | How VueJS manages your Data and Methods | 00:04:03 Duration |
|
Lecture 6 | A Closer Look at $el and $data | 00:04:57 Duration |
|
Lecture 7 | Placing $refs and Using them on your Templates | 00:05:50 Duration |
|
Lecture 8 | Where to learn more about the Vue API | 00:00:58 Duration |
|
Lecture 9 | Mounting a Template | 00:06:45 Duration |
|
Lecture 10 | Using Components | 00:04:59 Duration |
|
Lecture 11 | Limitations of some Templates | 00:02:36 Duration |
|
Lecture 12 | How VueJS Updates the DOM | 00:03:26 Duration |
|
Lecture 13 | The VueJS Instance Lifecycle | 00:03:13 Duration |
|
Lecture 14 | The VueJS Instance Lifecycle in Practice | 00:05:42 Duration |
|
Lecture 15 | Module Wrap Up | 00:00:55 Duration |
|
Lecture 16 | Module Resources & Useful Links |
Section 28 : Moving to a Real Development Workflow with Webpack and Vue CLI [VUE2]
|
Lecture 1 | Module Introduct | 00:01:34 Duration |
|
Lecture 2 | WHY~1 | |
|
Lecture 3 | WHA~1 | 00:03:53 Duration |
|
Lecture 4 | USI~1 | 00:02:37 Duration |
|
Lecture 5 | INS~1 | 00:04:20 Duration |
|
Lecture 6 | ANO~1 | 00:03:42 Duration |
|
Lecture 7 | Understanding | 00:06:49 Duration |
|
Lecture 8 | UND~1 | 00:01:12 Duration |
|
Lecture 9 | HOW~1 | 00:00:50 Duration |
|
Lecture 10 | Module Wrap Up | 00:01:11 Duration |
|
Lecture 11 | More about | |
|
Lecture 12 | Debugging VueJS Projects |
Section 29 : An Introduction to Components [VUE2]
|
Lecture 1 | Module Introduction | 00:01:05 Duration |
|
Lecture 2 | An Introduction to Components | 00:04:58 Duration |
|
Lecture 3 | Storing Data in Components with the Data Method | 00:04:06 Duration |
|
Lecture 4 | Registering Components Locally and Globally | 00:02:51 Duration |
|
Lecture 5 | The Root Component in the App | 00:03:23 Duration |
|
Lecture 6 | Creating a Component | 00:04:26 Duration |
|
Lecture 7 | Using Components | 00:05:35 Duration |
|
Lecture 8 | Moving to a Better Folder Structure | 00:02:44 Duration |
|
Lecture 9 | Alternative Folder Structures | |
|
Lecture 10 | How to Name your Component Tags (Selectors) | 00:04:33 Duration |
|
Lecture 11 | Scoping Component Styles | 00:05:07 Duration |
|
Lecture 12 | Module Wrap Up | 00:00:51 Duration |
|
Lecture 13 | Module Resources & Useful Links |
Section 30 : Communicating between Components [VUE2]
|
Lecture 1 | Module Introduction | 00:00:46 Duration |
|
Lecture 2 | Communication Problems | 00:02:54 Duration |
|
Lecture 3 | Using Props for Parent = Child Communication | 00:03:11 Duration |
|
Lecture 4 | Naming props | 00:01:10 Duration |
|
Lecture 5 | Using props in the Child Component | 00:01:29 Duration |
|
Lecture 6 | Validating props | 00:04:59 Duration |
|
Lecture 7 | Using Custom Events for Child = Parent | 00:05:58 Duration |
|
Lecture 8 | Understanding Unidirectional Data Flow | 00:01:08 Duration |
|
Lecture 9 | Communicating with Callback Functions | 00:02:24 Duration |
|
Lecture 10 | Communication between Sibling Components | 00:06:28 Duration |
|
Lecture 11 | Using an Event Bus for Communication | 00:05:34 Duration |
|
Lecture 12 | Centralizing Code in an Event Bus | 00:02:16 Duration |
|
Lecture 13 | Wrap Up | 00:00:41 Duration |
|
Lecture 14 | Module Resources & Useful Links |
Section 31 : Advanced Component Usage [VUE2]
|
Lecture 1 | Module Introduction | 00:00:39 Duration |
|
Lecture 2 | Setting up the Module Project | 00:03:02 Duration |
|
Lecture 3 | Passing Content - The Suboptimal Solution | 00:02:20 Duration |
|
Lecture 4 | Passing Content with Slots | 00:00:43 Duration |
|
Lecture 5 | How Slot Content gets Compiled and Styled | 00:03:04 Duration |
|
Lecture 6 | Changed Slot Styling Behavior | |
|
Lecture 7 | Using Multiple Slots (Named Slots) | 00:02:51 Duration |
|
Lecture 8 | Default Slots and Slot Defaults | 00:02:02 Duration |
|
Lecture 9 | A Summary on Slots | 00:00:45 Duration |
|
Lecture 10 | Switching Multiple Components with Dynamic Components | 00:05:34 Duration |
|
Lecture 11 | Understanding Dynamic Component Behavior | 00:02:08 Duration |
|
Lecture 12 | Keeping Dynamic Components Alive | 00:00:59 Duration |
|
Lecture 13 | Dynamic Component Lifecycle Hooks | 00:01:18 Duration |
|
Lecture 14 | Wrap Up | 00:01:11 Duration |
|
Lecture 15 | Module Resources & Helpful Links |
Section 32 : Second Course Project - Wonderful Quotes [VUE2]
|
Lecture 1 | Module Introduction | 00:01:36 Duration |
|
Lecture 2 | Setting up the Project | 00:01:22 Duration |
|
Lecture 3 | Initializing the Application | 00:01:29 Duration |
|
Lecture 4 | Creating the Application Components | 00:04:06 Duration |
|
Lecture 5 | Passing Data with Props and Slots | 00:02:14 Duration |
|
Lecture 6 | Allowing Users to Create Quotes with | 00:04:10 Duration |
|
Lecture 7 | Adding Quotes with Custom Events | 00:03:36 Duration |
|
Lecture 8 | Adding a Info Box | 00:01:06 Duration |
|
Lecture 9 | Allowing for Quote Deletion | 00:03:42 Duration |
|
Lecture 10 | Controlling Quotes with a Progress Bar | 00:03:53 Duration |
|
Lecture 11 | Finishing Touches and State Management | 00:02:14 Duration |
|
Lecture 12 | Module Resources |
Section 33 : Handling User Input with Forms [VUE2]
|
Lecture 1 | Module Introduction | 00:00:54 Duration |
|
Lecture 2 | A Basic input Form Binding | 00:03:48 Duration |
|
Lecture 3 | Grouping Data and Pre-Populating Inputs | 00:02:43 Duration |
|
Lecture 4 | Modifying User Input with Input Modifiers | 00:03:00 Duration |
|
Lecture 5 | Binding textarea and Saving Line Breaks | 00:02:54 Duration |
|
Lecture 6 | Using Checkboxes and Saving Data in Arrays | 00:04:07 Duration |
|
Lecture 7 | Using Radio Buttons | 00:02:32 Duration |
|
Lecture 8 | Handling Dropdowns with select and option | 00:05:12 Duration |
|
Lecture 9 | What v-model does and How to Create | 00:02:51 Duration |
|
Lecture 10 | Creating a Custom Control (Input) | 00:05:15 Duration |
|
Lecture 11 | Submitting a Form | 00:02:09 Duration |
|
Lecture 12 | Module Resources & Useful Links | |
|
Lecture 13 | Wrap Up | 00:00:43 Duration |
Section 34 : Using and Creating Directives [VUE2]
|
Lecture 1 | Module Introduction | 00:00:54 Duration |
|
Lecture 2 | Understanding Directives | 00:03:36 Duration |
|
Lecture 3 | How Directives Work - Hook Functions | 00:02:29 Duration |
|
Lecture 4 | Creating a Simple Directive | 00:01:22 Duration |
|
Lecture 5 | Passing Values to Custom Directives | 00:01:09 Duration |
|
Lecture 6 | Passing Arguments to Custom Directives | 00:02:41 Duration |
|
Lecture 7 | Modifying a Custom Directive with Modifiers | 00:02:26 Duration |
|
Lecture 8 | Custom Directives - A Summary | 00:00:29 Duration |
|
Lecture 9 | Registering Directives Locally | 00:01:38 Duration |
|
Lecture 10 | Using Multiple Modifiers | 00:04:30 Duration |
|
Lecture 11 | Passing more Complex Values to Directives | 00:02:14 Duration |
|
Lecture 12 | Wrap Up | 00:00:44 Duration |
|
Lecture 13 | Module Resources & Useful Links |
Section 35 : Improving your App with Filters and Mixins [VUE2]
|
Lecture 1 | Module Introduction | 00:00:45 Duration |
|
Lecture 2 | Creating a Local Filter | 00:04:34 Duration |
|
Lecture 3 | Global Filters and How to Chain | 00:01:46 Duration |
|
Lecture 4 | An (often-times better) Alternative | 00:05:17 Duration |
|
Lecture 5 | Understanding Mixins | 00:02:24 Duration |
|
Lecture 6 | Creating and Using Mixins | 00:02:26 Duration |
|
Lecture 7 | How Mixins get Merged | 00:02:59 Duration |
|
Lecture 8 | Creating a Global Mixin | 00:03:27 Duration |
|
Lecture 9 | Mixins and Scope | 00:02:35 Duration |
|
Lecture 10 | Wrap Up | 00:01:57 Duration |
|
Lecture 11 | Module Resources & Useful Links |
Section 36 : Adding Animations and Transitions [VUE2]
Section 37 : Connecting to Servers via Http - Using vue-resource [VUE2]
|
Lecture 1 | Module Introduction | 00:01:43 Duration |
|
Lecture 2 | Accessing Http via vue | 00:04:02 Duration |
|
Lecture 3 | Firebase & The Right Datab | |
|
Lecture 4 | Creating an Application | 00:05:27 Duration |
|
Lecture 5 | POSTing Data to a Server | 00:06:13 Duration |
|
Lecture 6 | GETting and Transforming Data | 00:06:58 Duration |
|
Lecture 7 | Configuring vue-resource | 00:02:50 Duration |
|
Lecture 8 | Intercepting Requests | 00:03:35 Duration |
|
Lecture 9 | Intercepting Responses | 00:02:53 Duration |
|
Lecture 10 | Where the resource | 00:04:44 Duration |
|
Lecture 11 | Creating Custom Resources | 00:02:40 Duration |
|
Lecture 12 | Resources vs Normal Http | 00:00:28 Duration |
|
Lecture 13 | Understanding Template URLs | 00:05:08 Duration |
|
Lecture 14 | Wrap Up | 00:01:43 Duration |
|
Lecture 15 | Module Resources & Usefu |
Section 38 : Routing in a VueJS Application [VUE2]
Section 39 : Better State Management with Vuex [VUE2]
|
Lecture 1 | Module Introduction | 00:01:13 Duration |
|
Lecture 2 | Why a Different State Management May Be Needed | 00:02:26 Duration |
|
Lecture 3 | Understanding Centralized State | 00:01:33 Duration |
|
Lecture 4 | Using the Centralized State | 00:06:53 Duration |
|
Lecture 5 | Why a Centralized State Alone Won't Fix It | 00:02:42 Duration |
|
Lecture 6 | Understanding Getters | 00:00:49 Duration |
|
Lecture 7 | Using Getters | 00:02:41 Duration |
|
Lecture 8 | Mapping Getters to Properties | 00:07:00 Duration |
|
Lecture 9 | Understanding Mutations | 00:01:15 Duration |
|
Lecture 10 | Using Mutations | 00:04:53 Duration |
|
Lecture 11 | Why Mutations have to run Synchronously | 00:01:35 Duration |
|
Lecture 12 | How Actions improve Mutations | 00:01:33 Duration |
|
Lecture 13 | Using Actions | 00:05:02 Duration |
|
Lecture 14 | Mapping Actions to Methods | 00:05:00 Duration |
|
Lecture 15 | A Summary of Vuex | 00:04:16 Duration |
|
Lecture 16 | Two-Way-Binding (v-model) and Vuex | 00:05:59 Duration |
|
Lecture 17 | Improving Folder Structures | 00:01:01 Duration |
|
Lecture 18 | Modularizing the State Management | 00:04:58 Duration |
|
Lecture 19 | Using Separate Files | 00:04:20 Duration |
|
Lecture 20 | Using Namespaces to Avoid Naming Problems | 00:06:47 Duration |
|
Lecture 21 | Auto-namespacing with Vuex 2 | |
|
Lecture 22 | Wrap Up | 00:00:51 Duration |
|
Lecture 23 | Module Resources & Useful Links |
Section 40 : Final Project - The Stock Trader [VUE2]
|
Lecture 1 | Project Introduction | 00:03:12 Duration |
|
Lecture 2 | Project Setup and Planning | 00:02:47 Duration |
|
Lecture 3 | Creating the First Components | 00:02:57 Duration |
|
Lecture 4 | Setup Project Routes | 00:04:44 Duration |
|
Lecture 5 | Adding a Header and Navigation | 00:06:47 Duration |
|
Lecture 6 | Planning the Next Steps | 00:01:22 Duration |
|
Lecture 7 | Creating Stocks Components | 00:06:34 Duration |
|
Lecture 8 | Adding a Buy Button | 00:06:00 Duration |
|
Lecture 9 | Setting up the Vuex State Management | 00:10:25 Duration |
|
Lecture 10 | Adding a Portfolio Module to Vuex | 00:10:06 Duration |
|
Lecture 11 | Working on the Portfolio Stocks | 00:06:54 Duration |
|
Lecture 12 | Connecting the Portfolio with Vuex | 00:02:22 Duration |
|
Lecture 13 | Time to fix some Errors | 00:02:01 Duration |
|
Lecture 14 | Displaying the Funds | 00:03:43 Duration |
|
Lecture 15 | Adding some Order Checks | 00:05:43 Duration |
|
Lecture 16 | Making Funds Look Nicer with Filters | 00:01:49 Duration |
|
Lecture 17 | Ending the Day - Randomizing Stocks | 00:05:32 Duration |
|
Lecture 18 | Animating the Route Transitions | 00:03:16 Duration |
|
Lecture 19 | Saving & Fetching Data - Adding a Dropdown | 00:02:18 Duration |
|
Lecture 20 | Setting up vue-resource and Firebase | 00:02:17 Duration |
|
Lecture 21 | Saving Data (PUT Request) | 00:02:53 Duration |
|
Lecture 22 | Fetching Data (GET Request) | 00:05:06 Duration |
|
Lecture 23 | Testing and Bug Fixes | 00:02:51 Duration |
|
Lecture 24 | Project Wrap Up | 00:01:22 Duration |
|
Lecture 25 | Bonus Debugging Vuex with Vue Developer Tools | 00:02:00 Duration |
|
Lecture 26 | Module Resources & Useful Links |
Section 41 : Deploying a VueJS Application [VUE2]
|
Lecture 1 | Module Introduction | 00:01:13 Duration |
|
Lecture 2 | Preparing for Deployment | 00:01:46 Duration |
|
Lecture 3 | AWS S3 & Bucket Policies | |
|
Lecture 4 | Deploying the App (Example AWS S3) | 00:06:00 Duration |
Section 42 : Bonus Using Axios instead of vue-resource [VUE2]
|
Lecture 1 | About this Section | 00:00:37 Duration |
|
Lecture 2 | Module Introduction | 00:01:08 Duration |
|
Lecture 3 | Project Setup | 00:02:47 Duration |
|
Lecture 4 | Axios Setup | 00:02:13 Duration |
|
Lecture 5 | Sending a POST Request | 00:05:42 Duration |
|
Lecture 6 | Sending a GET Request | 00:02:54 Duration |
|
Lecture 7 | Accessing & Using Response Data | 00:05:51 Duration |
|
Lecture 8 | Setting a Global Request Configuration | 00:05:46 Duration |
|
Lecture 9 | Using Interceptors | 00:05:52 Duration |
|
Lecture 10 | Custom Axios Instances | 00:04:59 Duration |
|
Lecture 11 | Wrap Up | 00:00:59 Duration |
|
Lecture 12 | Useful Resources & Links |
Section 43 : Bonus Authentication in Vue Apps
|
Lecture 1 | About this Section | 00:00:53 Duration |
|
Lecture 2 | Module Introduction | 00:02:00 Duration |
|
Lecture 3 | How Authentication Works in SPAs | 00:03:12 Duration |
|
Lecture 4 | Project Setup | 00:02:37 Duration |
|
Lecture 5 | Adding User Signup | 00:05:17 Duration |
|
Lecture 6 | Adding User Signin (Login) | 00:02:42 Duration |
|
Lecture 7 | Using Vuex to send Auth Requests | 00:04:29 Duration |
|
Lecture 8 | Storing Auth Data in Vuex | 00:03:47 Duration |
|
Lecture 9 | More about the Token (JWT) | |
|
Lecture 10 | Accessing other Resources from Vuex | 00:08:45 Duration |
|
Lecture 11 | Sending the Token to the Backend | 00:05:40 Duration |
|
Lecture 12 | Protecting Routes (Auth Guard) | 00:02:50 Duration |
|
Lecture 13 | Updating the UI State (based on Authentication State) | 00:03:02 Duration |
|
Lecture 14 | Adding User Logout | 00:05:03 Duration |
|
Lecture 15 | Adding Auto Logout | 00:05:38 Duration |
|
Lecture 16 | Adding Auto Login | 00:10:41 Duration |
|
Lecture 17 | Wrap Up | 00:01:02 Duration |
|
Lecture 18 | Useful Resources & Links |