Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Build Web Apps with Vue JS 3 & Firebase

Xây dựng Ứng dụng Web với Vue JS 3 & Firebase

Xây dựng Ứng dụng Web với Vue JS 3 & Firebase

Học Vue JS 3 & Firebase qua việc tạo và triển khai các ứng dụng web động (bao gồm Xác thực).

4.7
(7,864 đánh giá)
32,612 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 409.000đ -81%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
31.5 giờ video
314 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026
#Firebase #Frontend Development #Vue Js #Web Development

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

Học cách tạo ứng dụng Vue 3 từ con số 0
Nắm vững kiến thức chuyên sâu về các tính năng Vue như Vue Router, Vue CLI, Options API, Composition API, Teleport, v.v.
Trải nghiệm thực hành & chuyên sâu với các tính năng mới nhất của Vue 3 (như Composition API)
Học cách sử dụng Firebase làm back-end cho ứng dụng Vue (như cơ sở dữ liệu, dịch vụ xác thực, hosting, v.v.)
Xây dựng & triển khai 4 ứng dụng web thực tế với Vue & Firebase
Học cách tích hợp hệ thống xác thực vào ứng dụng Vue js của bạn bằng Firebase Auth
Trở thành cao thủ Vue 3!

Yêu cầu

Hiểu biết cơ bản về HTML, CSS & JavaScript
Biết ES6 là một lợi thế
Hiểu về JavaScript bất đồng bộ là điểm cộng nhưng không bắt buộc

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

Dành cho bất kỳ ai muốn học cách tạo website với Vue 3 & Firebase
Dành cho bất kỳ ai muốn học Vue và Firebase
Dành cho bất kỳ ai muốn tìm hiểu về Xác thực trong ứng dụng Vue
Dành cho bất kỳ ai muốn học Vue từ đầu
Dành cho bất kỳ ai muốn học cách sử dụng Firebase trong ứng dụng của họ

Nội dung khóa học

28 phần • 314 bài giảng
1 Vue là gì?
2 Tính năng mới trong Vue 3
3 Những gì bạn nên biết trước
4 Thiết lập môi trường
5 Tệp khóa học
1 Cách sử dụng Vue (sử dụng CDN)
2 Tạo một Ứng dụng Vue
3 Templates & Dữ liệu
4 Phương thức & Sự kiện Click
5 Render có điều kiện
6 Các sự kiện chuột khác
7 Xuất danh sách (v-for)
8 Ràng buộc thuộc tính (Attribute Binding)
9 Lớp động (Dynamic Classes)
10 THỬ THÁCH - Thêm vào Mục yêu thích
11 GIẢI PHÁP - Thêm vào Mục yêu thích
12 Thuộc tính tính toán (Computed Properties)
1 Tại sao nên dùng Vue CLI?
2 Cách sử dụng Vue CLI
3 Hướng dẫn chi tiết Dự án mới
4 Tệp Vue & Templates
5 Tham chiếu Template (Template Refs)
6 Nhiều Component
7 Kiểu Component & Kiểu toàn cục
8 Truyền dữ liệu với Props
9 Phát ra sự kiện tùy chỉnh (Emitting Custom Events)
10 Bộ điều chỉnh sự kiện Click (Click Event Modifiers)
11 Slots
12 THỬ THÁCH - Tái sử dụng Component
13 Sử dụng Teleport
1 Xem trước & Thiết lập Dự án 1
2 Bắt đầu một Game mới
3 Vòng đời Component (Component Lifecycle Hooks)
4 Tạo Bộ đếm thời gian phản ứng
5 Phát sự kiện tùy chỉnh với dữ liệu
6 THỬ THÁCH - Hiển thị một Component Kết quả
7 Hoàn thiện
1 Giới thiệu & Thiết lập Biểu mẫu
2 Ràng buộc dữ liệu hai chiều (Two-way Data Binding)
3 Trường chọn (Select Fields)
4 Hộp kiểm (Checkboxes)
5 Sự kiện bàn phím & Bộ điều chỉnh
6 THỬ THÁCH - Xóa Kỹ năng
7 Gửi Biểu mẫu
1 Tại sao nên dùng Vue Router?
2 Thiết lập Router cho Dự án mới
3 Liên kết Router (Router Links)
4 Cấu trúc thư mục
5 Tham số Route (Route Parameters)
6 Liên kết động (Dynamic Links)
7 Trang 404 & Chuyển hướng
8 Điều hướng theo chương trình (Programmatic Navigation)
9 Tải Component lười biếng (Lazy Loading)
1 Sử dụng JSON Server
2 Nơi lấy dữ liệu
3 Hiển thị dữ liệu có điều kiện
1 Xem trước & Thiết lập Dự án 2
2 Giao diện chính & Dữ liệu
3 Template Dự án đơn lẻ
4 Sử dụng Material Icons
5 Xóa Dự án
6 Hoàn thành Dự án
7 Biểu mẫu Dự án mới
8 Thêm Dự án mới
9 Component Thanh điều hướng (Navbar)
10 Route Chỉnh sửa Dự án
11 THỬ THÁCH - Cập nhật Dự án
12 Tạo Thanh lọc (Filter Nav)
13 THỬ THÁCH - Hiển thị Dự án đã lọc
1 Nhược điểm của Options API
2 Kiến thức cơ bản về Composition API
3 Tham chiếu Template trong Hàm Setup
4 Sử dụng Refs cho Tính phản ứng (Reactivity)
5 Refs vs Reactive
6 Giá trị tính toán (Computed Values) trong Hàm Setup
7 Sử dụng watch và watchEffect
8 Sử dụng Props trong Hàm Setup
9 Vòng đời Component (Lifecycle Hooks)
1 Lấy dữ liệu trong Hàm Setup
2 Hàm Composition có thể tái sử dụng (Composables)
3 Tạo một Composable khác
4 Tạo Vòng quay tải (Loading Spinner)
5 Tạo Biểu mẫu Web
6 THỬ THÁCH - Tạo Yêu cầu POST
7 Bài học Bất đồng bộ trong tương lai & Tạo kiểu bổ sung
1 Ôn tập Định tuyến & Thanh điều hướng
2 Sử dụng useRouter
3 Sử dụng useRoute
4 THỬ THÁCH - Tạo một Route Thẻ (Tag)
5 Tạo Đám mây thẻ (Tag Cloud)
1 Tạo một Dự án Firebase
2 Kết nối đến một Dự án Firebase
3 Bộ sưu tập & Tài liệu Firestore (Collections & Documents)
4 Lấy một Bộ sưu tập Tài liệu
5 Lấy Tài liệu đơn lẻ
6 Thêm Tài liệu
7 Xóa Tài liệu
8 Sử dụng Dấu thời gian (Timestamps)
9 Sắp xếp Bộ sưu tập
10 Giới thiệu về Trình nghe Thời gian thực (Real-Time Listeners)
1 Xem trước & Thiết lập Dự án 3
2 Thiết lập Firebase (& Tái sử dụng Dự án Firebase)
3 Tạo Biểu mẫu Đăng ký & Đăng nhập
4 THỬ THÁCH - Chuyển đổi giữa các Biểu mẫu
5 Thiết lập Xác thực Firebase
6 Tạo một Composable Đăng ký
7 Xuất lỗi
8 Tạo một Composable Đăng nhập
9 Thiết lập Ngữ cảnh & Phát sự kiện
10 Component Thanh điều hướng
11 Đăng xuất Người dùng (Composable)
12 Lấy Người dùng hiện tại (Composable)
13 Bảo vệ Route (cho Người dùng chưa xác thực)
14 Chờ Firebase Auth khởi tạo
15 THỬ THÁCH - Theo dõi Người dùng hiện tại
16 Biểu mẫu Trò chuyện mới
17 Thêm Tin nhắn mới vào Firestore
18 Trình nghe Firestore Thời gian thực (Composable)
19 Tạo Cửa sổ trò chuyện
20 Định dạng Ngày tháng (date-fns)
21 THỬ THÁCH - Tự động cuộn Cửa sổ trò chuyện
22 Hủy đăng ký khỏi Trình nghe Thời gian thực
23 Bảo vệ Route cuối cùng
24 Kiểm thử & Bước tiếp theo
1 Firebase CLI
2 Build một Ứng dụng
3 Triển khai Ứng dụng
4 Thay đổi & Triển khai lại
1 Quy tắc Bảo mật là gì?
2 Giải thích Đường dẫn & Quy tắc
3 Yêu cầu Xác thực
4 Khóa API theo một Tên miền
1 Xem trước & Thiết lập Dự án 4
2 Kiểu toàn cục & Phông chữ tùy chỉnh
3 Tạo một Dự án Firebase
4 Kết nối đến Firebase
5 Tái sử dụng Firebase Composables
6 Tạo Giao diện Đăng nhập
7 Thêm trạng thái 'đang chờ xử lý' cho Yêu cầu
8 Tạo Giao diện Đăng ký
9 Thêm Component Thanh điều hướng
10 THỬ THÁCH - Đăng xuất Người dùng
11 THỬ THÁCH - Hiển thị Liên kết có điều kiện
12 Component Danh sách phát mới (New Playlist)
13 Xử lý Thay đổi Tệp
14 Giới thiệu về Firebase Storage
15 Tải lên Hình ảnh (phần 1)
16 Tải lên Hình ảnh (phần 2)
17 Thêm Danh sách phát mới
18 THỬ THÁCH - Lấy Dữ liệu Danh sách phát Thời gian thực
19 Liệt kê Danh sách phát
20 Cập nhật Thanh điều hướng & Bảo vệ Route
21 Route Chi tiết Danh sách phát
22 Chuyển hướng đến Chi tiết Danh sách phát
23 Lấy Tài liệu đơn lẻ (Thời gian thực)
24 Template Chi tiết Danh sách phát
25 Kiểm tra Quyền sở hữu Danh sách phát
26 THỬ THÁCH - Xóa một Danh sách phát (Composable)
27 Xóa Hình ảnh khỏi Storage
28 Thêm về Quy tắc Firestore
29 Quy tắc Storage
30 Thêm Bài hát vào Danh sách phát
31 Cập nhật Chi tiết Danh sách phát
32 Liệt kê Bài hát
33 THỬ THÁCH - Xóa Bài hát
34 Route Danh sách phát của Người dùng
35 Truy vấn Firestore (Firestore Queries)
36 Hiển thị Danh sách Phát của Người dùng
37 Hoàn thiện Cuối cùng
38 Xây dựng & Triển khai
39 Bước Tiếp theo
1 Giới thiệu & Dự án Khởi đầu
2 Tệp Cấu hình Firebase
3 Lấy Dữ liệu từ Firestore
4 Dữ liệu Bộ sưu tập Thời gian Thực
5 Thêm Tài liệu Mới
6 Xóa Tài liệu
7 Cập nhật Tài liệu
8 Thiết lập Xác thực Firebase
9 Đăng ký Người dùng Mới
10 Đăng xuất Người dùng
11 Đăng nhập Người dùng
12 Lấy Thông tin Người dùng Hiện tại
13 Nội dung Thanh điều hướng Có điều kiện
14 Chờ Xác thực Sẵn sàng
15 Tạo Bộ bảo vệ Tuyến đường
16 Chuyển hướng Người dùng
17 Truy vấn Firestore
1 Bài học JavaScript Bổ sung
2 ES6 Modules (Import & Export)
3 Sử dụng map( ) & filter( )
4 Cú pháp Spread
5 Chuỗi Mẫu (Template Strings)
6 Cú pháp Hàm Mũi tên
7 Fetch & Promises
8 Async & Await
1 Giới thiệu
2 Tệp Khóa học
3 Thiết lập Trình soạn thảo Văn bản
1 Vue.js là gì?
2 Thiết lập Vue.js (cách đơn giản)
3 Đối tượng Vue (Vue Instance)
4 Phương thức (Methods)
5 Ràng buộc Dữ liệu (Data Binding)
6 Sự kiện (Events)
7 Đối tượng Sự kiện (Event Object)
8 Sự kiện Bàn phím (Keyboard Events)
9 Ràng buộc Dữ liệu Hai chiều (v-model)
10 Bổ từ (Modifiers)
11 Xuất có Điều kiện với v-if
12 Vòng lặp với v-for
1 Vue CLI
2 Thành phần & Tệp Vue
3 Hàm data()
4 Lồng ghép Thành phần
5 CSS Phạm vi (Scoped CSS)
6 Truyền Dữ liệu với Props
7 Sự kiện Tùy chỉnh (Custom Events)
8 Móc Vòng đời (Life-cycle Hooks)
9 Tạo Yêu cầu với Axios
10 Bộ lọc (Filters)
11 Thuộc tính Tính toán (Tìm kiếm tùy chỉnh)
1 Vue Router là gì?
2 Thiết lập Tuyến đường (Routes)
3 Liên kết Bộ định tuyến (Router Links)
4 Tham số Tuyến đường (Route Parameters)
5 Theo dõi Đối tượng $route
6 Thêm về Liên kết Bộ định tuyến
7 Chuyển hướng Người dùng Theo chương trình
8 Chế độ Hash vs History
9 Tạo kiểu cho Liên kết Đang hoạt động
1 Xem trước & Thiết lập Dự án
2 Cấu trúc Dự án
3 Thiết kế Vật liệu (Material Design)
4 Thành phần Thanh điều hướng
5 Thành phần Trang chủ (Index)
6 Xóa Dữ liệu (cục bộ)
7 Giới thiệu về Firebase
8 Thiết lập Firestore
9 Cài đặt Firebase
10 Lấy Dữ liệu từ Firestore
11 Xóa Dữ liệu từ Firestore
12 Thành phần Thêm Smoothie
13 Thêm Thành phần Nguyên liệu
14 Hiển thị Nguyên liệu
15 Lưu Bản ghi vào Firestore
16 Xóa Nguyên liệu
17 Tuyến đường Chỉnh sửa Smoothie
18 Truy vấn Firestore
19 Biểu mẫu Chỉnh sửa Smoothie
20 Cập nhật Bản ghi trong Firestore
21 Triển khai lên Firebase
22 Tổng kết Dự án
1 Tổng quan & Thiết lập Dự án
2 Cấu trúc Dự án
3 Thiết lập Firestore
4 Tạo Màn hình Chào mừng
5 Truyền Props Qua Tuyến đường
6 Bộ bảo vệ Tuyến đường (Route Guards)
7 Tạo Cửa sổ Trò chuyện
8 Thành phần Tin nhắn Mới
9 Thêm Tin nhắn vào Firestore
10 Sự kiện Thời gian Thực (trình lắng nghe sự kiện)
11 Định dạng Thời gian với Moment
12 Cuộn Tự động
13 Triển khai Ứng dụng
14 Tổng kết Dự án
1 Tổng quan & Thiết lập Dự án
2 Cấu trúc Dự án
3 Thiết lập Firebase
4 Thành phần Thanh điều hướng
5 Thành phần Bản đồ
6 Google Maps API
7 Tạo Bản đồ Mới
8 Tạo Trang Đăng ký
9 Cấu trúc Xác thực & Dữ liệu Firebase
10 Kiểm tra Bí danh có tồn tại không
11 Đăng ký Người dùng
12 Tạo Bản ghi Người dùng trong Firestore
13 Bao bọc Đối tượng Vue (Wrapping)
14 Đăng xuất Người dùng
15 Thành phần Đăng nhập
16 Đăng nhập Người dùng
17 Geolocation API
18 Cập nhật Vị trí Người dùng
19 Bảo vệ Tuyến đường (xác thực)
20 Liên kết Thanh điều hướng Có điều kiện
21 Điểm đánh dấu Ninja (trên bản đồ)
22 Hồ sơ Người dùng
23 Bình luận Người dùng (thảo luận dữ liệu)
24 Thêm Bình luận
25 Hiển thị Bình luận (Thời gian Thực)
26 Một số Kiểu dáng Cuối cùng
27 Triển khai Ứng dụng
1 Cloud Functions là gì?
2 Tạo Hàm Có thể Gọi Đơn giản
3 Gọi một Hàm
4 Giới thiệu về Quy tắc Firebase
1 Hàm Mũi tên ES6
2 Promise ES6
3 Import và Export
4 Phương thức Lọc JavaScript (Filter)
1 Giới thiệu Vue CLI 3
2 Sử dụng Vue CLI Mới
3 Dịch vụ CLI (CLI Service)
4 Cài đặt Tùy chỉnh (Custom Presets)
5 Thêm Plugin
6 Xây dựng & Triển khai lên Firebase
7 Tạo mẫu Ngay lập tức (Instant Prototyping)
8 Mục tiêu Xây dựng (Tạo Thành phần Web)
9 Sử dụng Thành phần Web (Web Components)
10 Giao diện Đồ họa Vue (phần 1)
11 Giao diện Đồ họa Vue (phần 2)
12 Sử dụng 'vue init' với CLI Mới

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

If you're looking to get started building full-stack applications with Vue 3 (or Vue 2) and Firebase, then look no further. In this course I'll take you from novice to ninja in Vue JS 3, starting out with the very basics and then moving on towards creating fully-fledged Vue applications. 

We'll spend a whole chapter learning about the Vue Router - and how to create SPA's (single page applications) using it - as well as exploring how to use the Vue CLI to get up and running quickly when creating slightly larger Vue applications.

We'll also dive deep into the newest features Vue 3 has to offer, including a lot about the Composition API & Composable Functions.

I'll also teach you how to use Firebase - an online & free service provided by Google which will act as a feature-rich back-end to our Vue applications. We'll learn how to use Firebase to store and retrieve real-time data to and from a NoSQL database called Firestore, as well as authenticate our app's users with the Firebase Auth service, We'll also take a peak at Firebase Storage (which will enable us to allow users to upload images on our Vue sites), as well as deploying all of our applications to Firebase hosting.

Along the way we'll create several full projects, including a reaction timer, project tracker, a blog, a real-time chatroom & a music playlist website.

There's a crazy amount to cover, but by the end of this course you'll be in a position to create full-stack web applications (complete with user authentication) using Vue 3 and Firebase!

I'm also know as The Net Ninja on YouTube

...With around 600,000 subscribers and nearly 2000 free web development tutorials. So feel free to check out my teaching style and reviews before you buy my course :).

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 Firebase
Hiển thị tất cả khoá học Frontend Development
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 😊