VueJS Mastery Online Course

Learn how to use VueJS like an expert.

Getting Started

• Welcome!
• What is "Vue.JS"?
• Building A First App With Just JavaScript
• Join our Online Learning Community
• Re-building the App with Vue
• Vue vs "Vanilla JavaScript" (just JavaScript)
• Setting Up the Course Development Environment
• Course Outline & What's In The Course
• How To Get The Most Out Of This Course
• Module Resources

Basic & Core Concepts - DOM Interaction with Vue

• Module Introduction
• Creating and Connecting Vue App Instances
• Interpolation and Data Binding
• Binding Attributes with the "v-bind" Directive
• Understanding "methods" in Vue Apps
• Working with Data inside of a Vue App
• Outputting Raw HTML Content with v-html
• A First Summary
• Time to Practice: Data Binding
• Understanding Event Binding
• Events & Methods
• Working with Event Arguments
• Using the Native Event Object
• Exploring Event Modifiers
• Locking Content with v-once
• Time to Practice: Event Binding
• Data Binding + Event Binding = Two-Way Binding
• Methods used for Data Binding: How It Works
• Introducing Computed Properties
• Working with Watchers
• Methods vs Computed Properties vs Watchers
• v-bind and v-on Shorthands
• Time to Practice: Reactivity
• Dynamic Styling with Inline Styles
• Adding CSS Classes Dynamically
• Classes & Computed Properties
• Dynamic Classes: Array Syntax
• Time to Practice: Dynamic Styling
• Module Summary
• Module Resources

Rendering Conditional Content & Lists

• Module Introduction
• Understanding the Problem
• Rendering Content Conditionally
• v-if, v-else and v-else-if
• Using v-show Instead Of v-if
• Rendering Lists of Data
• Diving Deeper Into v-for
• Removing List Items
• Lists & Keys
• Time to Practice: Conditional Content & Lists
• Module Summary
• Module Resources

Course Project: The Monster Slayer Game

• Module Introduction
• Project Setup & First Methods
• Updating the Health Bars
• Adding a "Special Attack"
• Adding a "Heal" Functionality
• Adding a "Game Over" Screen
• Finishing the Core Functionality
• Adding a Battle Log
• Module Resources

Vue: Behind the Scenes

• Module Introduction
• An Introduction to Vue's Reactivity
• Vue Reactivity: A Deep Dive
• One App vs Multiple Apps
• Understanding Templates
• Working with Refs
• How Vue Updates the DOM
• Vue App Lifecycle - Theory
• Vue App Lifecycle - Practice
• Module Resources

Introducing Components

• Module Introduction
• Understanding the Problem
• Introducing Components
• The Why: Building Complex User Interfaces With Components
• Multiple Vue Apps vs Multiple Components
• Module Resources

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

• Module Introduction
• Why We Need A Development Server
• Why We Want A Better Developer Experience
• A Note About The NodeJS Version
• Installing & Using the Vue CLI
• Inspecting the Created Project
• Inspecting the Vue Code & ".vue" Files
• Adding the "Vetur" Extension to VS Code
• More on ".vue" Files
• A New Vue Project
• Creating a Basic Vue App
• Adding a Component
• Adding Styling
• A Small Addition
• Module Resources

Component Communication

• Module Introduction
• Introducing "Props" (Parent => Child Communication)
• Prop Behavior & Changing Props
• Validating Props
• Supported Prop Values
• Working with Dynamic Prop Values
• Emitting Custom Events (Child => Parent Communication)
• Defining & Validating Custom Events
• Prop / Event Fallthrough & Binding All Props
• Demo: Adding Components & Connecting Them
• Demo: Adding More Component Communication
• Time to Practice: Props & Custom Events
• A Potential Problem
• Provide + Inject To The Rescue
• Provide + Inject for Functions / Methods
• Provide + Inject vs Props & Custom Events
• Module Summary
• Module Resources

Diving Deeper Into Components

• Module Introduction
• Project Setup
• Global vs Local Components
• Scoped Styles
• Introducing Slots
• Named Slots
• Slot Styles & Compilation
• More on Slots
• Scoped Slots
• Dynamic Components
• Keeping Dynamic Components Alive
• Applying What We Know & A Problem
• Teleporting Elements
• Working with Fragments
• The Vue Style Guide
• Moving to a Different Folder Structure
• Module Summary
• Module Resources

Course Project: The Learning Resources App

• Module Introduction
• Setup & First Steps
• First Components & Props
• Styling and More Components
• Header & BaseCard Components
• Adding a Base Button
• Dynamic Components & Attribute Fallthrough
• Adding & Styling Tabs
• Adding a Form
• Fetching User Input
• Adding a Modal Dialog
• Deleting Items
• Adding "Teleport"
• Module Resources