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)
About Lesson

The Vue ecosystem keeps on advancing and developing and therefore, there now are official alternatives to using the Vue CLI & Vetur.

You CAN still use those tools (and in this course, these are the tools being used – so to follow along smoothly, you might want to use them as well).

But, alternatively and 100% optionally to using the Vue CLI and Vetur, you can also use two different tools / approaches:

1. Use npm init vue instead of installing and using the Vue CLI

2. Use the Volar extension instead of Vetur

You don’t have to use either of the two, but you may want to experiment with them. The Vue code you write, is of course 100% the same as shown in this course – no matter which setup you’re using.

npm init vue uses an official package to help you initialize Vue projects. You get a command line wizard that walks you through project creation, comparable to what you get with the Vue CLI (though with slightly different choices and options). For a basic Vue project, you can select “No” for all options.

Join the conversation
Previous
Next

Please contact me via telegram

DMCA.com Protection Status