Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Vue.js 3 Masterclass: Build 7 Real-World Apps

Vue.js 3 Masterclass: Xây dựng 7 Ứng dụng Thực tế

Vue.js 3 Masterclass: Xây dựng 7 Ứng dụng Thực tế

Thành thạo Vue 3 & Composition API bằng cách xây dựng 7 ứng dụng sẵn sàng cho sản xuất và khởi động sự nghiệp lập trình viên frontend của bạn!

4.7
(469 đánh giá)
3,384 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
15.5 giờ video
125 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Xây dựng ứng dụng Vue 3 hiện đại, an toàn kiểu dữ liệu bằng Composition API và TypeScript.
Tạo 7 ứng dụng thực tế để xây dựng một portfolio vững chắc.
Phát triển các component có thể mở rộng và tái sử dụng với props, events và slots.
Triển khai quản lý trạng thái sạch sẽ và hiệu quả bằng Pinia.
Cấu trúc ứng dụng một trang (SPA) với Vue Router, bao gồm các route động.
Viết các composable tùy chỉnh để chia sẻ logic reactive xuyên suốt ứng dụng.
Nâng cao trải nghiệm người dùng với transitions và mẫu Optimistic UI.
Triển khai các tính năng UI phức tạp như modal và Kéo & Thả từ đầu.

Yêu cầu

Hiểu biết vững chắc về JavaScript hiện đại (ES6+), bao gồm arrow functions, destructuring, modules và async/await.
Kiến thức cơ bản về HTML và CSS.
Quen thuộc với dòng lệnh (terminal).
Một trình soạn thảo mã (như VS Code) và Node.js đã được cài đặt trên máy của bạn.

Đối tượng phù hợp

Các lập trình viên JavaScript muốn học một framework front-end hiện đại.
Các lập trình viên có kinh nghiệm với các framework khác (như React hoặc Angular) muốn học Vue 3 nhanh chóng.
Các lập trình viên Vue 2 muốn nâng cấp kỹ năng lên Composition API và các phương pháp hay hiện đại.
Các lập trình viên Backend hướng tới việc trở thành lập trình viên Full-stack.
Những người tốt nghiệp bootcamp hoặc lập trình viên junior muốn xây dựng một portfolio vững chắc với các dự án thực tế, thực hành.

Nội dung khóa học

14 phần • 125 bài giảng
1 Vue 3 KHÔNG Cần Cài đặt - Xây dựng Ứng dụng Đầu tiên của Bạn
2 Tài nguyên Khóa học
1 Giới thiệu: Dự án 1
2 Làm cho Ứng dụng Vue Sống động!
3 Tính Reactive trong Vue - Sử dụng ref()
4 Computed Properties - Sử dụng computed()
5 CSS Classes có Điều kiện
6 Input Bindings
7 Bài tập 1 - Xây dựng Trò chơi Đố đơn giản
8 Bài tập 1 - Lời giải
1 Giới thiệu: Dự án Mini thứ 2
2 Xử lý Sự kiện (v-on)
3 Event Handling Modifiers
4 Render có Điều kiện (v-if)
5 Render Danh sách (v-for)
6 Attribute Binding
7 Bài tập 2 - Bật/Tắt Yêu thích / Xóa Ảnh
8 Bài tập 2 - Lời giải cho Nhiệm vụ 1
9 Bài tập 2 - Lời giải cho Nhiệm vụ 2
1 Giới thiệu: Dự án Mini thứ 3
2 Lifecycle Hooks
3 Template Refs (Truy cập Phần tử DOM)
4 Hiển thị Danh sách Công việc
5 Thêm Công việc Mới
6 Watchers và Side Effects
7 So sánh watch với watchEffect
8 Sử dụng Local Storage
9 Bài tập 3 - Nút Xóa & Lọc Công việc
10 Bài tập 3 - Lời giải
1 Giới thiệu: Dự án Trung bình thứ 4
2 Tạo Dự án Vue bằng Vite
3 Hiểu Cấu trúc và Các tệp Dự án
4 Cài đặt và Sử dụng TailwindCSS
5 Tạo và Sử dụng Components
6 Render một Danh sách Components
7 Truyền Props
8 Component Events
9 Fall through Attributes
10 Basic Component Slots
11 Bài tập 4 - Tạo một Component Card có thể Tái sử dụng
12 Bài tập 4 - Lời giải
13 Named Slots
14 Conditional Named Slots
15 Component Variants
1 Giới thiệu: Dự án Trung bình thứ 4 - Checkpoint #1
2 Thiết lập Máy chủ API Mock
3 Lấy dữ liệu
4 Trạng thái Tải
5 Ngăn chặn Layout Shifts (Placeholders)
6 Gửi dữ liệu lên Máy chủ
7 Bài tập 5 - Tải các Đặt chỗ
8 Bài tập 5 - Lời giải
1 Giới thiệu: Dự án Trung bình thứ 4 - Checkpoint #2
2 Giải thích Optimistic UI với Ví dụ Đặt sự kiện
3 Triển khai Optimistic UI cho Đặt sự kiện
4 Hủy Đặt chỗ với Optimistic UI
5 Trích xuất EventList: Tại sao?
6 Trích xuất EventList: Bắt đầu nào!
7 Trích xuất EventList: Xử lý Trạng thái Trống
8 Trích xuất EventList: Xử lý Lỗi và Khôi phục Lỗi
9 Thiết kế Responsive
10 Dynamic Components & Icons
1 Giới thiệu: Composables và Chia sẻ Trạng thái
2 Tạo và Sử dụng Composables
3 Sử dụng Composable và Loại bỏ Events
4 Component BookingList
5 Component Xử lý Lỗi & Bài tập 6
6 Lời giải Bài tập 6
1 Giới thiệu: Dự án Trung bình thứ 5
2 Tạo Dự án Vue TypeScript & Thêm Tailwind
3 Định nghĩa Props và Events với Kiểu TypeScript
4 Thu hẹp Kiểu của refs và Dữ liệu Khác
5 Render Tabs - Làm thế nào để Hiển thị Trạng thái Active của Tab?
6 Render Nội dung Tab bằng Dynamic Components
7 Transitions - Làm thế nào để Thêm CSS Transitions vào Nội dung Tab
8 Custom Transition Components - Làm thế nào để Tái sử dụng Transitions?
1 Giới thiệu: Dự án Trung bình thứ 5 Checkpoint #2
2 General Form Markup & Transition Gotcha
3 Hàm reactive Khác với ref trong Vue 3 như thế nào?
4 Component KeepAlive - Làm thế nào để Không Mất Trạng thái của Dynamic Components?
5 Tạo Form Riêng tư & Thông báo: Thêm Markup và Duy trì Dữ liệu Người dùng
6 Đồng bộ Local Storage: Làm thế nào để Lưu trữ và Truy xuất Cài đặt
7 An toàn TypeScript: Generics và Keyof - Tính an toàn Kiểu dữ liệu Tuyệt vời!
8 Xây dựng Hệ thống Thông báo bằng Component Toast
9 Tạo một Composable useNotifications
10 Component Teleport - Làm thế nào để Di chuyển Markup sang Phần tử Khác (ví dụ: body)
1 Giới thiệu: Dự án thứ 6
2 Tạo Dự án Sổ tay Công thức
3 Hiểu Vue Router và Cấu hình của nó
4 Route Views được Render như thế nào và Làm thế nào để Thêm Liên kết?
5 Thêm Routes, RouterLink vs Phần tử A và Sử dụng Tên Route
6 Dynamic Routes - Làm thế nào để Định nghĩa và Đọc Tham số trong Component?
7 Liên kết đến Dynamic Routes với Tham số
8 Fallback Route, Trang 404 - Không dễ đâu!
9 Điều hướng Theo chương trình
10 Cảnh báo và Giải pháp khi Lấy dữ liệu Bên trong Hook onMounted!
11 Redirects và Aliases
1 Hiểu Pinia: Nó là gì, Hoạt động như thế nào và Tại sao Bạn Cần nó
2 Định nghĩa và Tạo Store
3 Thêm Actions vào Pinia Store của Bạn
4 Làm việc với Getters trong Pinia
5 Liệt kê và Lọc Công thức: Cân bằng Logic trong Store
6 Pinia Plugins
7 Pinia Plugin: Đồng bộ với Local Storage
8 Pinia và TypeScript: Gõ kiểu cho Thuộc tính Tùy chỉnh
9 Bài tập 7 - Form Chỉnh sửa
10 Lời giải Bài tập 7 - Form Chỉnh sửa
11 Yêu thích: Pinia Action, Getter và Thay đổi Component
12 Yêu thích: Kết hợp Trạng thái Pinia và Danh sách Yêu thích
13 Thêm Tailwind CSS và Tạo kiểu cho Ứng dụng của Bạn
1 Giới thiệu: Dự án Trung bình thứ 7
2 Thiết lập Dự án Bản sao Trello
3 Thêm UI Danh sách
4 Kiểu dữ liệu & Danh sách Card Reactive
5 Thêm Tính năng Kéo & Thả
6 Named Slots Scoped Hoạt động như thế nào
7 Xây dựng Modal Dialog - Rất đơn giản!
8 Xây dựng Modal Dialog - Mở & Đóng
9 Tập trung vào Input khi Modal Dialog Mở
10 Giữ Focus Bên trong Modal Dialog
11 Thêm & Chỉnh sửa Card - Logic Ứng dụng
12 Thêm & Chỉnh sửa Card - Logic ModalDialog & Hoàn thiện
13 Tóm tắt: Những gì Chúng ta đã Học
14 Tiếp theo là gì? 11 Ý tưởng Mở rộng Dự án
1 Phần thưởng

Giới thiệu khóa học

Learn Vue.js 3 by building 7 real-world applications — from scratch to production-ready — and gain the skills top companies actively seek.

If you want to become a job-ready frontend developer in 2025, you need more than theory — you need projects that prove your skills. This course focuses 100% on Vue 3 with the Composition API, the modern standard companies actually use, so you’ll be prepared for the real job market and advanced technical interviews anywhere in the world.

What you’ll learn and build:

  • Vue 3 Fundamentals – templates, directives, loops, and conditional rendering

  • Modern Components – props, events, slots, and reusable architecture

  • Advanced Techniques – custom composables, smooth transitions, Drag & Drop

  • Routing & State – SPAs with Vue Router and clean state management with Pinia

  • TypeScript Integration – safer, more maintainable Vue code

  • UI/UX – Optimistic UI patterns for a better user experience

  • Custom Components – build a fully functional modal from scratch

Projects you’ll complete:

  1. Can You Drive?

  2. Simple Quiz (your exercise project)

  3. Image Gallery

  4. Task List

  5. Event Registration Mini-App

  6. User Settings App

  7. Recipe Book App

  8. Trello Board App (Drag & Drop + Modals)

By the end, you’ll have 7 portfolio-ready apps and the confidence to build scalable, high-performance, production-grade applications with Vue 3 in any real-world environment. Enroll today!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Vue Js
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊