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

Lecture 1 Module Introduction 00:00:48 Duration
Lecture 2 Creating and Connecting Vue App Instances 00:08:44 Duration
Lecture 3 Interpolation and Data Binding 00:03:37 Duration
Lecture 4 Binding Attributes with the v-bind Directive 00:05:40 Duration
Lecture 5 Understanding methods in Vue Apps 00:05:50 Duration
Lecture 6 Working with Data inside of a Vue App 00:03:25 Duration
Lecture 7 Outputting Raw HTML Content with v-html 00:03:33 Duration
Lecture 8 A First Summary 00:04:14 Duration
Lecture 9 Understanding Event Binding 00:07:21 Duration
Lecture 10 Events & Methods 00:06:15 Duration
Lecture 11 Working with Event Arguments 00:03:01 Duration
Lecture 12 Using the Native Event Object 00:09:03 Duration
Lecture 13 Exploring Event Modifiers 00:09:58 Duration
Lecture 14 Locking Content with v-once 00:02:09 Duration
Lecture 15 Data Binding + Event Binding = Two-Way Binding 00:06:35 Duration
Lecture 16 Methods used for Data Binding How It Wo 00:06:49 Duration
Lecture 17 Introducing Computed Properties 00:06:01 Duration
Lecture 18 Working with Watchers 00:10:54 Duration
Lecture 19 Methods vs Computed Properties vs Watc 00:02:28 Duration
Lecture 20 v-bind and v-on Shorthands 00:01:54 Duration
Lecture 21 Dynamic Styling with Inline Styles 00:07:23 Duration
Lecture 22 Adding CSS Classes Dynamically 00:06:34 Duration
Lecture 23 Classes & Computed Properties 00:01:58 Duration
Lecture 24 Dynamic Classes Array Syntax 00:01:22 Duration
Lecture 25 Module Summary 00:04:29 Duration
Lecture 26 Module Resources

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

Lecture 1 Module Introduction 00:01:12 Duration
Lecture 2 Animation Basics & CSS Transitions 00:07:32 Duration
Lecture 3 Understanding CSS Animations 00:04:22 Duration
Lecture 4 Why Is Just CSS Not Enough 00:04:30 Duration
Lecture 5 Playing CSS Animations with Vue's Help 00:04:48 Duration
Lecture 6 Using the Transition Component 00:05:05 Duration
Lecture 7 CSS Animations with the Transition Component 00:02:30 Duration
Lecture 8 Using Custom CSS Class Names 00:03:36 Duration
Lecture 9 Example Animating a Modal 00:08:42 Duration
Lecture 10 Transitioning Between Multiple Elements 00:09:19 Duration
Lecture 11 Using Transition Events 00:08:35 Duration
Lecture 12 Building JavaScript Transitions (instead of CSS) 00:15:04 Duration
Lecture 13 Disabling CSS Transitions 00:03:06 Duration
Lecture 14 Getting Started with Animated Lists 00:06:48 Duration
Lecture 15 Animating Lists with transition-group 00:05:28 Duration
Lecture 16 Animate List Item Movement 00:03:55 Duration
Lecture 17 Animating Route Changes 00:12:21 Duration
Lecture 18 An Important Note on Animated Route Changes
Lecture 19 Module Resources

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

Lecture 1 Module Introduction 00:02:37 Duration
Lecture 2 Planning the Project Web App 00:04:29 Duration
Lecture 3 Planning the Data Requirements 00:05:14 Duration
Lecture 4 Planning the Layout Components 00:05:09 Duration
Lecture 5 Registering Routes 00:06:01 Duration
Lecture 6 Adding Route Page Components 00:05:30 Duration
Lecture 7 Working on the Main Layout & Styling
Lecture 8 Wiring Up Pages 00:05:24 Duration
Lecture 9 Adding Vuex and Coach Data 00:12:21 Duration
Lecture 10 ADD~1 00:13:00 Duration
Lecture 11 Working on the Coaches List and List Items 00:11:27 Duration
Lecture 12 Building the Coach Detail Component 00:08:29 Duration
Lecture 13 Filtering Coaches 00:11:15 Duration
Lecture 14 Registering as a Coach The Form 00:10:17 Duration
Lecture 15 Adding Coaches to Vuex 00:13:43 Duration
Lecture 16 Adding Form Validation 00:12:41 Duration
Lecture 17 Working on the Contact Form 00:08:12 Duration
Lecture 18 Storing Requests (Messages) With Vuex 00:08:35 Duration
Lecture 19 Outputting Incoming Requests (Messages) 00:10:06 Duration
Lecture 20 Filtering Requests for the Active Coach 00:04:47 Duration
Lecture 21 Sending a PUT Http Request to Store Coach Data 00:11:10 Duration
Lecture 22 Fetching Coach Data (GET Http Request) 00:07:55 Duration
Lecture 23 Rendering a Loading Spinner 00:06:41 Duration
Lecture 24 Adding Http Error Handling 00:09:22 Duration
Lecture 25 Sending Coaching Requests Http Requests 00:15:56 Duration
Lecture 26 Caching Http Response Data 00:08:33 Duration
Lecture 27 Adding Route Transitions
Lecture 28 The Not Found Page & Summary 00:02:20 Duration
Lecture 29 Module Resources

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]

Lecture 1 Module Introduction 00:00:46 Duration
Lecture 2 Understanding VueJS Templates 00:02:36 Duration
Lecture 3 HOW~1 00:02:43 Duration
Lecture 4 Accessing Data in the Vue Instance 00:01:50 Duration
Lecture 5 Binding to Attributes 00:02:44 Duration
Lecture 6 Understanding and Using Directives 00:01:28 Duration
Lecture 7 Disable Re-Rendering with v-once 00:01:42 Duration
Lecture 8 How to Output Raw HTML 00:02:45 Duration
Lecture 9 Optional Assignment Starting Code
Lecture 10 INTRODUCTION TO BRAINMEASURES PROCTOR SYSTEM
Lecture 11 Listening to Events 00:01:51 Duration
Lecture 12 Getting Event Data from the Event Object 00:02:38 Duration
Lecture 13 Passing your own Arguments with Events 00:01:54 Duration
Lecture 14 Modifying an Event - with Event Modifiers 00:03:25 Duration
Lecture 15 Listening to Keyboard Events 00:02:04 Duration
Lecture 16 Writing JavaScript Code in the Templates 00:03:21 Duration
Lecture 17 Using Two-Way-Binding 00:01:50 Duration
Lecture 18 Reacting to Changes with Computed Properti 00:09:36 Duration
Lecture 19 ANA~1 00:03:55 Duration
Lecture 20 Saving Time with Shorthands 00:01:27 Duration
Lecture 21 Dynamic Styling with CSS Classes - Basics 00:04:24 Duration
Lecture 22 Dynamic Styling with CSS Classes - Using Objects 00:01:36 Duration
Lecture 23 Dynamic Styling with CSS Classes - Using Names 00:03:29 Duration
Lecture 24 Setting Styles Dynamically (without CSS Classes) 00:03:17 Duration
Lecture 25 Styling Elements with the Array Syntax 00:01:15 Duration
Lecture 26 Module Wrap Up 00:00:45 Duration
Lecture 27 Module Resources & Useful Links

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]

Lecture 1 Setting Up an Initial (on-load) Animation 00:01:31 Duration
Lecture 2 Module Introduction 00:01:09 Duration
Lecture 3 Understanding Transitions 00:01:02 Duration
Lecture 4 Using Different CSS Class Names 00:04:03 Duration
Lecture 5 Using Dynamic Names and Attributes 00:02:34 Duration
Lecture 6 Preparing Code to use Transitions 00:03:12 Duration
Lecture 7 Transitioning between Multiple Element 00:00:34 Duration
Lecture 8 Setting Up a Transition 00:03:10 Duration
Lecture 9 Transitioning between Multiple Elements 00:04:45 Duration
Lecture 10 Assigning CSS Classes for Transitions 00:02:28 Duration
Lecture 11 Listening to Transition Event Hooks 00:02:07 Duration
Lecture 12 Creating a Fade Transition with the CSS 00:03:23 Duration
Lecture 13 Understanding JavaScript Animations 00:08:07 Duration
Lecture 14 Creating a Slide Transition with the CSS 00:04:00 Duration
Lecture 15 Excluding CSS from your Animation 00:01:29 Duration
Lecture 16 Creating an Animation in JavaScript 00:06:21 Duration
Lecture 17 Mixing Transition and Animation Properties 00:03:33 Duration
Lecture 18 Animating Dynamic Components 00:06:00 Duration
Lecture 19 Animating v-if and v-show 00:00:34 Duration
Lecture 20 Animating Lists with transition-group 00:00:44 Duration
Lecture 21 Using transition-group - Preparations 00:04:22 Duration
Lecture 22 Using transition-group to Animate a List 00:06:15 Duration
Lecture 23 Understanding the App 00:01:15 Duration
Lecture 24 Creating the App 00:12:09 Duration
Lecture 25 Adding Animations 00:06:41 Duration
Lecture 26 Wrap Up 00:01:04 Duration
Lecture 27 Module Resources & Useful Links
Lecture 28 The Animated Monster Slayer App

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]

Lecture 1 Module Introduction 00:01:38 Duration
Lecture 2 Setting up the VueJS Router (vue-router) 00:02:17 Duration
Lecture 3 Setting Up and Loading Routes 00:06:47 Duration
Lecture 4 Understanding Routing Modes (Hash vs History) 00:04:16 Duration
Lecture 5 Navigating with Router Links 00:03:47 Duration
Lecture 6 Where am I - Styling Active Links 00:03:22 Duration
Lecture 7 Navigating from Code (Imperative Navigation) 00:02:43 Duration
Lecture 8 Setting Up Route Parameters 00:02:00 Duration
Lecture 9 Fetching and Using Route Parameters 00:02:04 Duration
Lecture 10 Reacting to Changes in Route Parameters 00:03:06 Duration
Lecture 11 vue-router 2
Lecture 12 Setting Up Child Routes (Nested Routes) 00:04:42 Duration
Lecture 13 Navigating to Nested Routes 00:03:11 Duration
Lecture 14 Making Router Links more Dynamic 00:02:05 Duration
Lecture 15 A Better Way of Creating Links - With Named 00:03:23 Duration
Lecture 16 Using Query Parameters 00:02:55 Duration
Lecture 17 Multiple Router Views (Named Router Views) 00:03:29 Duration
Lecture 18 Redirecting 00:02:14 Duration
Lecture 19 Setting Up Catch All Routes Wildcards 00:01:06 Duration
Lecture 20 Animating Route Transitions 00:02:36 Duration
Lecture 21 Passing the Hash Fragment 00:03:30 Duration
Lecture 22 Controlling the Scroll Behavior 00:03:23 Duration
Lecture 23 Protecting Routes with Guards 00:01:13 Duration
Lecture 24 Using the beforeEnter Guard 00:07:54 Duration
Lecture 25 Using the beforeLeave Guard 00:03:33 Duration
Lecture 26 Loading Routes Lazily 00:07:11 Duration
Lecture 27 Wrap Up 00:01:03 Duration
Lecture 28 Module Resources & Useful Links

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