Course Content
Subtitle Guide – Hướng dẫn thêm phụ đề
0/1
Set up subtitle for video – Hướng dẫn thêm phụ đề
01 – Getting Started
0/13
Subtitle File Resource
001 Welcome to the Course!
01:39
002 What is Vue.js
07:51
003 Different Ways of Using Vue
02:35
004 Exploring Vue Alternatives
03:12
005 Building A First App With Just JavaScript
07:26
006 Join our Online Learning Community
007 Re-building the App with Vue
11:39
008 Vue vs Vanilla JavaScript (just JavaScript)
01:10
009 Setting Up the Course Development Environment
02:04
010 Course Outline & What’s In The Course
02:58
011 How To Get The Most Out Of This Course
03:23
012 Module Resources
02 – Basics & Core Concepts – DOM Interaction with Vue
0/27
Subtitle File Resource
001 Module Introduction
00:48
002 Creating and Connecting Vue App Instances
08:40
003 Interpolation and Data Binding
03:35
004 Binding Attributes with the v-bind Directive
05:37
005 Understanding methods in Vue Apps
05:47
006 Working with Data inside of a Vue App
03:23
007 Outputting Raw HTML Content with v-html
03:31
008 A First Summary
04:12
009 Understanding Event Binding
07:17
010 Events & Methods
06:12
011 Working with Event Arguments
02:59
012 Using the Native Event Object
08:59
013 Exploring Event Modifiers
09:54
014 Locking Content with v-once
02:08
015 Data Binding + Event Binding = Two-Way Binding
06:32
016 Methods used for Data Binding How It Works
06:46
017 Introducing Computed Properties
05:58
018 Working with Watchers
10:49
019 Methods vs Computed Properties vs Watchers
02:27
020 v-bind and v-on Shorthands
01:53
021 Dynamic Styling with Inline Styles
07:19
022 Adding CSS Classes Dynamically
06:31
023 Classes & Computed Properties
01:57
024 Dynamic Classes Array Syntax
01:22
025 Module Summary
04:27
026 Module Resources
03 – Rendering Conditional Content & Lists
0/12
Subtitle File Resource
001 Module Introduction
01:35
002 Understanding the Problem
03:16
003 Rendering Content Conditionally
05:09
004 v-if, v-else and v-else-if
04:18
005 Using v-show Instead Of v-if
02:25
006 Rendering Lists of Data
06:20
007 Diving Deeper Into v-for
05:12
008 Removing List Items
03:59
009 Lists & Keys
08:26
010 Module Summary
02:15
011 Module Resources
04 – Course Project The Monster Slayer Game
0/10
Subtitle File Resource
001 Module Introduction
01:18
002 Project Setup & First Methods
12:27
003 Updating the Health Bars
07:07
004 Adding a Special Attack
06:23
005 Adding a Heal Functionality
04:47
006 Adding a Game Over Screen
09:38
007 Finishing the Core Functionality
06:08
008 Adding a Battle Log
14:11
009 Module Resources
05 – Vue Behind the Scenes
0/11
Subtitle File Resource
001 Module Introduction
01:31
002 An Introduction to Vue’s Reactivity
04:26
003 Vue Reactivity A Deep Dive
08:10
004 One App vs Multiple Apps
03:53
005 Understanding Templates
03:56
006 Working with Refs
05:22
007 How Vue Updates the DOM
06:26
008 Vue App Lifecycle – Theory
04:46
009 Vue App Lifecycle – Practice
09:48
010 Module Resources
00:00
06 – Introducing Components
0/7
Subtitle File Resource
001 Module Introduction
01:30
002 Understanding the Problem
08:39
003 Introducing Components
10:54
004 The Why Building Complex User Interfaces With Components
01:00
005 Multiple Vue Apps vs Multiple Components
006 Module Resources
07 – Moving to a Better Development Setup & Workflow with the Vue CLI
0/17
Subtitle File Resource
001 Module Introduction
01:35
002 Why We Need A Development Server
03:29
003 Why We Want A Better Developer Experience
05:50
004 A Note About The NodeJS Version
005 Installing & Using the Vue CLI
08:27
006 Inspecting the Created Project
05:59
007 Inspecting the Vue Code & .vue Files
06:04
008 Adding the Vetur Extension to VS Code
01:15
009 More on .vue Files
01:40
010 A New Vue Project
05:05
011 Creating a Basic Vue App
09:32
012 Adding a Component
08:14
013 Adding Styling
02:16
014 A Small Addition
015 An Alternative Setup – using npm init & Volar
016 Module Resources
08 – Component Communication
0/18
Subtitle File Resource
001 Module Introduction
01:41
002 Introducing Props (Parent = Child Communication)
10:03
003 Prop Behavior & Changing Props
06:30
004 Validating Props
07:14
005 Supported Prop Values
006 Working with Dynamic Prop Values
05:37
007 Emitting Custom Events (Child = Parent Communication)
11:15
008 Defining & Validating Custom Events
04:05
009 Prop Event Fallthrough & Binding All Props
010 Demo Adding Components & Connecting Them
13:15
011 Demo Adding More Component Communication
06:24
012 A Potential Problem
06:26
013 Provide + Inject To The Rescue
08:16
014 Provide + Inject for Functions Methods
03:59
015 Provide + Inject vs Props & Custom Events
02:06
016 Module Summary
04:44
017 Module Resources
09 – Diving Deeper Into Components
0/19
Subtitle File Resource
001 Module Introduction
01:38
002 Project Setup
02:38
003 Global vs Local Components
09:22
004 Scoped Styles
05:15
005 Introducing Slots
06:24
006 Named Slots
05:35
007 Slot Styles & Compilation
02:26
008 More on Slots
07:19
009 Scoped Slots
09:34
010 Dynamic Components
07:07
011 Keeping Dynamic Components Alive
02:44
012 Applying What We Know & A Problem
09:24
013 Teleporting Elements
03:50
014 Working with Fragments
01:23
015 The Vue Style Guide
03:02
016 Moving to a Different Folder Structure
02:56
017 Module Summary
03:38
018 Module Resources
10 – Course Project The Learning Resources App
0/15
Subtitle File Resource
001 Module Introduction
01:37
002 Setup & First Steps
05:24
003 First Components & Props
10:46
004 Styling and More Components
07:19
005 Header & BaseCard Components
07:00
006 Adding a Base Button
05:19
007 Dynamic Components & Attribute Fallthrough
08:38
008 Adding & Styling Tabs
04:58
009 Adding a Form
04:12
010 Fetching User Input
08:27
011 Adding a Modal Dialog
12:19
012 Deleting Items
06:42
013 Adding Teleport
01:29
014 Module Resources
11 – Forms
0/11
Subtitle File Resource
001 Module Introduction
00:33
002 v-model & Inputs
06:03
003 Working with v-model Modifiers and Numbers
06:54
004 v-model and Dropdowns
02:26
005 Using v-model with Checkboxes & Radiobuttons
07:13
006 Adding Basic Form Validation
05:13
007 Building a Custom Control Component
06:27
008 Using v-model on Custom Components
06:48
009 Module Summary
01:14
010 Module Resources
12 – Sending Http Requests
0/16
Subtitle File Resource
001 Module Introduction
01:09
002 Starting App & Why we need a Backend
05:04
003 Adding a Backend
03:21
004 How To (Not) Send Http Requests
05:24
005 Sending a POST Request to Store Data
05:45
006 Http Requests & Http Methods (Verbs)
007 Using Axios Instead Of fetch()
008 Getting Data (GET Request) & Transforming Response Data
09:51
009 Loading Data When a Component Mounts
02:00
010 Showing a Loading… Message
02:55
011 Handling the No Data State
03:00
012 Handling Technical Browser-side Errors
06:42
013 Handling Error Responses
06:49
014 Module Summary
01:32
015 Module Resources
00:00
13 – Routing Building Multi-Page Single Page Applications
0/27
Subtitle File Resource
001 Module Introduction
00:41
002 What & Why
04:39
003 Routing Setup
04:36
004 Registering & Rendering Routes
06:25
005 Navigating with router-link
04:55
006 Styling Active Links
03:05
007 Programmatic Navigation
04:01
008 Passing Data with Route Params (Dynamic Segments)
10:46
009 Navigation & Dynamic Paths
03:00
010 A Vue Bug
011 Updating Params Data with Watchers
05:31
012 Passing Params as Props
03:37
013 Redirecting & Catch All Routes
07:50
014 Using Nested Routes
05:34
015 More Fun with Named Routes & Location Objects
05:21
016 Using Query Params
03:59
017 Rendering Multiple Routes with Named Router Views
05:52
018 Controlling Scroll Behavior
06:17
019 Introducing Navigation Guards
07:31
020 Diving Deeper Into Navigation Guards
06:50
021 The Global afterEach Guard
01:27
022 Beyond Entering Route Leave Guards
07:13
023 Utilizing Route Metadata
02:14
024 Organizing Route Files
04:49
025 Summary
02:12
026 Module Resources
14 – Animations & Transitions
0/20
Subtitle File Resource
001 Module Introduction
01:11
002 Animation Basics & CSS Transitions
07:28
003 Understanding CSS Animations
04:20
004 Why Is Just CSS Not Enough
04:27
005 Playing CSS Animations with Vue’s Help
04:46
006 Using the Transition Component
05:02
007 CSS Animations with the Transition Component
02:28
008 Using Custom CSS Class Names
03:34
009 Example Animating a Modal
08:38
010 Transitioning Between Multiple Elements
09:15
011 Using Transition Events
08:31
012 Building JavaScript Transitions (instead of CSS)
14:57
013 Disabling CSS Transitions
03:05
014 Getting Started with Animated Lists
06:44
015 Animating Lists with transition-group
05:26
016 Animate List Item Movement
03:53
017 Animating Route Changes
12:15
018 An Important Note on Animated Route Changes
019 Module Resources
15 – Vuex
0/22
Subtitle File Resource
001 Module Introduction
00:59
002 What & Why
07:12
003 Creating & Using a Store
04:43
004 Connecting Components to State
02:36
005 Introducing Mutations – A Better Way of Changing Data
06:30
006 Passing Data to Mutations with Payloads
04:07
007 Introducing Getters – A Better Way Of Getting Data
07:41
008 Running Async Code with Actions
07:33
009 Understanding the Action Context
02:02
010 Using Mapper Helpers
05:57
011 Example Adding More State
08:09
012 Organizing your Store with Modules
04:10
013 Understanding Local Module State
04:27
014 Namespacing Modules
05:03
015 Structuring Vuex Code & Files
08:44
016 A Challenge!
01:51
017 Challenge Solution (13)
12:00
018 Challenge Solution (23)
11:27
019 Challenge Solution (33)
03:18
020 Summary
01:19
021 Module Resources
16 – Main Project Find a Coach Web App
0/30
Subtitle File Resource
001 Module Introduction
02:35
002 Planning the Project Web App
04:26
003 Planning the Data Requirements
05:11
004 Planning the Layout Components
05:06
005 Registering Routes
05:58
006 Adding Route Page Components
05:27
007 Working on the Main Layout & Styling
07:42
008 Wiring Up Pages
05:22
009 Adding Vuex and Coach Data
12:15
010 Working on the Coaches List and List Items
11:21
011 Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
12:54
012 Building the Coach Detail Component
08:24
013 Filtering Coaches
11:10
014 Registering as a Coach The Form
10:13
015 Adding Coaches to Vuex
13:37
016 Adding Form Validation
12:35
017 Working on the Contact Form
08:09
018 Storing Requests (Messages) With Vuex
08:31
019 Outputting Incoming Requests (Messages)
10:01
020 Filtering Requests for the Active Coach
04:45
021 Sending a PUT Http Request to Store Coach Data
11:05
022 Fetching Coach Data (GET Http Request)
07:51
023 Rendering a Loading Spinner
06:38
024 Adding Http Error Handling
09:18
025 Sending Coaching Requests Http Requests
15:48
026 Caching Http Response Data
08:29
027 Adding Route Transitions
10:20
028 The Not Found Page & Summary
02:19
029 Module Resources
17 – Vue & Authentication
0/17
Subtitle File Resource
001 Module Introduction
01:00
002 How Authentication Works in Vue Apps (or any SPA)
06:09
003 Locking Protecting Backend Resources
05:56
004 Adding an Authentication Page (Login & Signup)
09:54
005 Preparing Vuex
04:22
006 Adding a Signup Action & Flow
09:05
007 Better UX Loading Spinner & Error Handling
05:31
008 Adding a Login Action & Flow
03:15
009 Attaching the Token to Outgoing Requests
04:20
010 Updating the UI Based on Auth State
04:04
011 Adding a Logout Action & Flow
03:34
012 Authentication & Routing (incl. Navigation Guards)
11:41
013 Adding Auto Login
08:52
014 Adding Auto Logout
13:34
015 Summary
01:19
016 Module Resources
18 – Optimizing & Deploying Vue Apps
0/8
Subtitle File Resource
001 Module Introduction
01:10
002 What To Deploy
02:50
003 Optimization Using Asynchronous Components
12:16
004 Note Async Components & Routing
005 Building the Project For Production
03:54
006 Deploying a Vue App
08:55
007 Module Resources
19 – The Composition API – Replacing the Options API
0/26
Subtitle File Resource
001 Module Introduction
02:00
002 Which Problem Does The Composition API Solve
06:51
003 Replacing data with refs
11:30
004 Replacing the setup() Method
005 Building reactive Objects
10:57
006 Reactivity A Deep Dive
08:23
007 Replacing methods with Regular Functions
07:02
008 Replacing Computed Properties with the computed Function
07:52
009 Two-Way-Binding and the Composition API
02:58
010 Working with Watchers
05:42
011 A First Summary
01:37
012 How To Use Template Refs
04:49
013 Components, Props & The Composition API
07:57
014 Emitting Custom Events
02:33
015 Working with Provide Inject
03:42
016 Lifecycle Hooks in the Composition API
05:14
017 Migrating from Options API to Composition API – An Example Project
01:56
018 Migrating a First Component
06:40
019 Migrating a Big Component
12:38
020 Migrating the Remaining Components
11:56
021 Routing, Params & The Composition API
07:27
022 The Route & Router Objects and the Composition API
05:08
023 Using Vuex with the Composition API
04:33
024 Summary
03:10
025 Module Resources
20 – Reusing Functionality Mixins & Custom Composition Functions
0/15
Subtitle File Resource
001 Module Introduction
01:16
002 Reusability Concepts
04:54
003 Using Mixins
04:48
004 Understanding Mixin Merging
03:11
005 Global Mixins
02:52
006 Disadvantages of Mixins
03:28
007 Custom Hooks Composables & The Composition API
08:40
008 More Custom Composition Functions
03:48
009 Why Hooks Composables Beat Mixins
01:27
010 Example Creating a Search Hook
11:29
011 Custom Hooks Gotchas
08:43
012 More Thoughts on Custom Hooks Composables
02:54
013 Example A Custom Sort Hook
05:29
014 Module Resources
21 – Roundup & Next Steps
0/1
001 Course Roundup & Next Steps
03:08
22 – Vue 2 to Vue 3 Migration
0/6
Subtitle File Resource
001 Vue 3 – Overview
06:30
002 Important Changes & Migration Steps
17:51
003 Vue 3 New Features
05:27
004 The New Composition API (Optional!)
23:45
005 Further Migration Resources
Vue – The Complete Guide (incl. Router & Composition API)

It turns out, that it’s NOT recommended to use async components for routing (you may use them to conditionally load and fetch component code when working with v-if etc. though).

For routing, simply change the syntax from

const CoachDetail = defineAsyncComponent(() =>
  import('./pages/coaches/CoachDetail.vue')
);

to

const CoachDetail = () => import('./pages/coaches/CoachDetail.vue');

(for all routes)

Previous
Next

Please contact me via telegram

DMCA.com Protection Status