Complete Vue.js 3 Course: Vuejs 3, Vite, TailwindCSS, Pinia

Course Curriculum

Chapter 1: Vue Basics, Reactivity, and Directives

Lecture 1: MVVM, MVC, Reactivity, Two-way Data Binding, Server Sider Rendering

Lecture 2: How Vue 2 Stays Reactive?

Lecture 3: How Vue 3 Stays Reactive?

Lecture 4: Factory Pattern and Singleton Pattern: Data Consistency or Data Independence

Lecture 5: First Vue Program: App Instance, Root Component, $el, vNode, ref Attribute

Lecture 6: Options Object, Custom Properties, Data Properties, Expose

Lecture 7: Template Syntax, Reactivity, Forced Update

Lecture 8: v-bind: Controlling Attribute Values

Lecture 9: v-bind Part 2

Lecture 10: v-text, v-html, v-once, v-pre, and v-cloak

Lecture 11: Conditional Rendering: v-show, v-if, v-else, and v-else-if

Lecture 12: v-for: Iterating Over Arrays and Objects

Lecture 13: v-for: JSON

Chapter 2: Computed Properties, Vue Methods, and v-on

Lecture 1: Computed Properties: Introduction

Lecture 2: Computed Properties: Caveats

Lecture 3: Computed Properties: Edgy Situations

Lecture 4: Computed Properties + v-for === ^_^

Lecture 5: Methods and the V-ON Directive

Lecture 6: V-ON and Closure

Lecture 7: Event Modifiers: .once, .stop, .self, .capture, and .prevent

Lecture 8: The .passive Modifier

Chapter 3: Must-have Array-manipulating Skills

Lecture 1: Making Swaps Without Using a Third Variable

Lecture 2: Sorting Array Elements

Lecture 3: Challenge: Sorting Products Based on Price

Lecture 4: "Reducing" an Array

Lecture 5: Deduplicating via "Reducing"

Lecture 6: Finding the Most XXX Element or Elements

Lecture 7: Finding the Highest Price and Collecting Items With That Price at the Same Time

Lecture 8: Finding the Most Frequently Occurring Elements

Lecture 9: Do the "impossible"

Lecture 10: The "Invisible IF"

Chapter 4: Application & Challenge: Controlling the Order of List Items

Lecture 1: Creating an Adjustable List

Lecture 2: Pinning a Selected Item to the Top of the List

Lecture 3: Sorting List Items INDIVIDUALLY

Lecture 4: Tracking the Order Change of List Items

Chapter 5: Application & Challenge: Vue + COOKIE

Lecture 1: Cookie Intro

Lecture 2: Cookie Basic Operation

Lecture 3: Asking for User Permission

Lecture 4: A Menu that "Remembers" Part 1

Lecture 5: A Menu that "Remembers" Part 2

Chapter 6: Application & Challenge: Vue + Recursion

Lecture 1: Introduction to Recursion

Lecture 2: Deep Copy an Array or Object

Lecture 3: "Infinite" List

Lecture 4: Improvement

Chapter 7: Collecting Data from Users

Lecture 1: V-MODEL and Its Modifiers: Number, Lazy, and Trim

Lecture 2: Mini APP: Limiting User-submitted Data

Lecture 3: V-MODEL In Radio Buttons

Lecture 4: V-MODEL In Selection Lists and Checkboxes

Lecture 5: Mini App

Chapter 8: Controlling CSS Styles Using Vue

Lecture 1: Binding CSS Classes

Lecture 2: Controlling Inline CSS

Lecture 3: App & Practice: Automatically Highlighting Selected List Items

Chapter 9: Automatic Execution: Lifecycle Hooks

Lecture 1: LifeCycle Hooks

Lecture 2: Update and Render Hooks

Chapter 10: Automatic Execution: Watchers

Lecture 1: Watchers

Lecture 2: Watching Arrays and Objects

Lecture 3: Flush Timing

Lecture 4: Multiple Watchers

Lecture 5: $watch

Lecture 6: $watch: Arrays and Objects

Lecture 7: Setting a Getter to Watch Complicated Results

Chapter 11: Vue Components

Lecture 1: Vue Child Components Introduction

Lecture 2: Lifecycle Hooks of Child Components

Lecture 3: Props

Lecture 4: Props Misc

Lecture 5: The Object Syntax for Setting Props: PLACEHOLDER VIDEO

Lecture 6: Custom Events: Sending Data From A Child Component to Its Parent Component

Lecture 7: Building a Two-way Data Path Between a Parent Component and its Child One

Lecture 8: Using the v-model Directive in Child Component Tags

Lecture 9: Slots Basics

Lecture 10: Scoped Slots

Lecture 11: Teleport

Lecture 12: Inheriting Non-prop Attributes

Lecture 13: Dynamic Components

Lecture 14: KeepAlive: Reusing Component Instnances

Lecture 15: Outputting Components Dynamically

Chapter 12: Transition Effects

Lecture 1: CSS Transition Properties

Lecture 2: Vue Transition Classes

Lecture 3: Creating a Transition Effect

Lecture 4: Transitioning List Items

Lecture 5: How to Use Animate.css

Lecture 6: Creating Transition Effects Using Animate.css

Lecture 7: Transition Hooks

Lecture 8: How to "Tween" using GSAP: Green Sock Animation Platform

Lecture 9: Transitioning States Using GSAP

Lecture 10: Transition Component

Chapter 13: Reusing Codes: Mixins and Custom Directives

Lecture 1: Mixins