Getting Started
- Welcome to the Course!
- What is "Vue.js"?
- Different Ways of Using Vue
- Exploring Vue Alternatives
- Building A First App With Just JavaScript
- 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
Basics & 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
- 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
