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

Vue - The Complete Guide (incl. Router & Composition API)

Vue - Hướng dẫn Toàn diện (Bao gồm Router & Composition API)

Vue - Hướng dẫn Toàn diện (Bao gồm Router & Composition API)

Vue.js là một Framework JavaScript tuyệt vời để xây dựng Ứng dụng Frontend! VueJS kết hợp những điểm tốt nhất của Angular + React!

4.6
(66,421 đánh giá)
257,513 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đ 429.000đ -82%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
32.0 giờ video
740 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

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

Xây dựng các Ứng dụng Vue.js ấn tượng - từ những ứng dụng Nhỏ và Đơn giản cho đến những Ứng dụng Cấp Doanh nghiệp Lớn
Hiểu Lý thuyết đằng sau Vue.js và Sử dụng nó trong các Dự án Thực tế
Tận dụng Vue.js trong cả Ứng dụng Nhiều Trang và Ứng dụng Một Trang (MPAs và SPAs)
Học phiên bản mới nhất của Vue (Vue 3), bao gồm Composition API hoàn toàn mới

Yêu cầu

Yêu cầu Kiến thức JavaScript Cơ bản
Biết ES6 là một lợi thế nhưng không bắt buộc
Kiến thức Cơ bản về HTML và CSS được giả định xuyên suốt Khóa học

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

Khóa học này dành cho Tất cả mọi người quan tâm đến Phát triển Frontend và các Framework JavaScript Chính
Khóa học này dành cho bạn nếu bạn muốn tạo các Ứng dụng Phản ứng, chạy trên Trình duyệt
Khóa học này cũng nhắm đến các Học viên thích một Framework JavaScript gốc giúp việc Bắt đầu đơn giản hơn nhiều so với Angular 2
Không hài lòng với Angular 2? VueJS là dành cho bạn!

Nội dung khóa học

29 phần • 333 bài giảng
1 Chào mừng đến với Khóa học!
2 "Vue.js" là gì?
3 Các Cách Sử dụng Vue Khác nhau
4 Khám phá các Lựa chọn Thay thế cho Vue
5 Xây dựng Ứng dụng Đầu tiên Chỉ với JavaScript
6 Tham gia Cộng đồng Học trực tuyến của chúng tôi
7 Quan trọng: Đã thay đổi Đường dẫn Nhập tập lệnh Vue
8 Xây dựng lại Ứng dụng với Vue
9 Vue so với "Vanilla JavaScript" (chỉ JavaScript thuần)
10 Thiết lập Môi trường Phát triển cho Khóa học
11 Thiết lập Khóa học
12 Đề cương Khóa học & Nội dung Trong Khóa học
13 Cách Tận dụng Tối đa Khóa học này
14 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Quan trọng: Đã thay đổi Đường dẫn Nhập tập lệnh Vue
3 Tạo và Kết nối các Thể hiện Ứng dụng Vue
4 Nội suy và Ràng buộc Dữ liệu
5 Ràng buộc Thuộc tính với Chỉ thị "v-bind"
6 Hiểu về "methods" trong Ứng dụng Vue
7 Làm việc với Dữ liệu bên trong Ứng dụng Vue
8 Xuất Nội dung HTML Thô với v-html
9 Tóm tắt Đầu tiên
10 Hiểu về Ràng buộc Sự kiện
11 Sự kiện & Phương thức
12 Làm việc với Đối số Sự kiện
13 Sử dụng Đối tượng Sự kiện Gốc
14 Khám phá Bộ điều chỉnh Sự kiện
15 Khóa Nội dung với v-once
16 Ràng buộc Dữ liệu + Ràng buộc Sự kiện = Ràng buộc Hai chiều
17 Phương thức được sử dụng cho Ràng buộc Dữ liệu: Cách thức Hoạt động
18 Giới thiệu Thuộc tính Tính toán
19 Làm việc với Trình theo dõi
20 So sánh Methods, Computed Properties và Watchers
21 Cú pháp Rút gọn của v-bind và v-on
22 Tạo kiểu Động với Kiểu dáng Nội tuyến
23 Thêm Lớp CSS một cách Động
24 Lớp & Thuộc tính Tính toán
25 Lớp Động: Cú pháp Mảng
26 Tóm tắt Học phần
27 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Hiểu Vấn đề
3 Hiển thị Nội dung Có điều kiện
4 v-if, v-else và v-else-if
5 Sử dụng v-show Thay vì v-if
6 Hiển thị Danh sách Dữ liệu
7 Tìm hiểu Sâu hơn về v-for
8 Xóa các Mục Danh sách
9 Danh sách & Khóa
10 Tóm tắt Học phần
11 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Thiết lập Dự án & Các Phương thức Đầu tiên
3 Cập nhật Thanh Máu
4 Thêm "Đòn tấn công Đặc biệt"
5 Thêm Chức năng "Hồi máu"
6 Thêm Màn hình "Kết thúc Trò chơi"
7 Hoàn thiện Chức năng Cốt lõi
8 Thêm Nhật ký Chiến đấu
9 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Giới thiệu về Tính Phản ứng của Vue
3 Tính Phản ứng của Vue: Tìm hiểu Sâu
4 Một Ứng dụng so với Nhiều Ứng dụng
5 Hiểu về Templates
6 Làm việc với Refs
7 Cách Vue Cập nhật DOM
8 Vòng đời Ứng dụng Vue - Lý thuyết
9 Vòng đời Ứng dụng Vue - Thực hành
10 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Hiểu Vấn đề
3 Giới thiệu Components
4 Lý do: Xây dựng Giao diện Người dùng Phức tạp với Components
5 Nhiều Ứng dụng Vue so với Nhiều Components
6 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Tại sao Chúng ta Cần Máy chủ Phát triển
3 Tại sao Chúng ta Muốn Trải nghiệm Nhà phát triển Tốt hơn
4 Sửa lỗi npm run serve (Vue CLI)
5 Cài đặt & Sử dụng Vue CLI
6 Kiểm tra Dự án Đã tạo
7 Kiểm tra Mã Vue & Tệp ".vue"
8 Thêm Tiện ích mở rộng "Vetur" vào VS Code
9 Thêm về Tệp ".vue"
10 Một Dự án Vue Mới
11 Tạo một Ứng dụng Vue Cơ bản
12 Thêm một Component
13 Thêm Kiểu dáng
14 Một Bổ sung Nhỏ
15 Thiết lập Thay thế - sử dụng "npm init" & Volar
16 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Giới thiệu "Props" (Giao tiếp Cha => Con)
3 Hành vi của Prop & Thay đổi Props
4 Xác thực Props
5 Các Giá trị Prop được Hỗ trợ
6 Làm việc với Giá trị Prop Động
7 Phát ra Sự kiện Tùy chỉnh (Giao tiếp Con => Cha)
8 Định nghĩa & Xác thực Sự kiện Tùy chỉnh
9 Truyền xuống Prop / Sự kiện & Ràng buộc Tất cả Props
10 Demo: Thêm Components & Kết nối Chúng
11 Demo: Thêm Giao tiếp giữa các Components
12 Một Vấn đề Tiềm ẩn
13 Provide + Inject Giải cứu
14 Provide + Inject cho Hàm / Phương thức
15 So sánh Provide + Inject với Props & Sự kiện Tùy chỉnh
16 Tóm tắt Học phần
17 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Thiết lập Dự án
3 Components Toàn cục so với Components Cục bộ
4 Kiểu dáng Phạm vi
5 Giới thiệu Slots
6 Slots Được đặt tên
7 Kiểu dáng & Biên dịch Slot
8 Thêm về Slots
9 Slots Phạm vi
10 Components Động
11 Giữ Components Động Sống
12 Áp dụng Những gì Chúng ta Biết & Một Vấn đề
13 Dịch chuyển Phần tử
14 Làm việc với Fragments
15 Hướng dẫn Phong cách Vue
16 Chuyển sang Cấu trúc Thư mục Khác
17 Tóm tắt Học phần
18 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Thiết lập & Các Bước Đầu tiên
3 Components & Props Đầu tiên
4 Tạo kiểu và Thêm Components
5 Components Header & BaseCard
6 Thêm Base Button
7 Components Động & Truyền xuống Thuộc tính
8 Thêm & Tạo kiểu Tab
9 Thêm Biểu mẫu
10 Lấy Đầu vào Người dùng
11 Thêm Hộp thoại Modal
12 Xóa các Mục
13 Thêm "Teleport"
14 Tài nguyên Học phần
1 Giới thiệu Học phần
2 v-model & Đầu vào
3 Làm việc với Bộ điều chỉnh v-model và Số
4 v-model và Dropdowns
5 Sử dụng v-model với Checkboxes & Radiobuttons
6 Thêm Xác thực Biểu mẫu Cơ bản
7 Xây dựng Component Điều khiển Tùy chỉnh
8 Sử dụng v-model trên Components Tùy chỉnh
9 Tóm tắt Học phần
10 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Khởi động Ứng dụng & Tại sao chúng ta cần Backend
3 Thêm Backend
4 Cách (Không) Gửi Yêu cầu Http
5 Gửi Yêu cầu POST để Lưu trữ Dữ liệu
6 Yêu cầu Http & Phương thức Http (Động từ)
7 Sử dụng Axios Thay vì "fetch()"
8 Lấy Dữ liệu (Yêu cầu GET) & Chuyển đổi Dữ liệu Phản hồi
9 Tải Dữ liệu khi Component được Gắn kết
10 Hiển thị Thông báo "Đang tải..."
11 Xử lý Trạng thái "Không có Dữ liệu"
12 Xử lý Lỗi Kỹ thuật / Phía Trình duyệt
13 Xử lý Phản hồi Lỗi
14 Tóm tắt Học phần
15 Tài nguyên Học phần
1 Giới thiệu Học phần
2 Cái gì & Tại sao?
3 Thiết lập Định tuyến
4 Đăng ký & Hiển thị Các tuyến đường
5 Điều hướng với router-link
6 Tạo kiểu Liên kết Đang hoạt động
7 Điều hướng Theo chương trình
8 Truyền dữ liệu với Route Params (Đoạn động)
9 Điều hướng & Đường dẫn động
10 Một lỗi trong Vue
11 Cập nhật dữ liệu Params với Watchers
12 Truyền Params dưới dạng Props
13 Chuyển hướng & Route "Bắt tất cả"
14 Sử dụng Nested Routes
15 Thêm thú vị với Named Routes & Location Objects
16 Sử dụng Query Params
17 Hiển thị nhiều Route với Named Router Views
18 Kiểm soát hành vi cuộn trang
19 Giới thiệu Navigation Guards
20 Tìm hiểu sâu hơn về Navigation Guards
21 Guard toàn cục "afterEach"
22 Ngoài việc vào: Route Leave Guards
23 Sử dụng Route Metadata
24 Tổ chức tệp Route
25 Tổng kết
26 Tài nguyên Module
1 Giới thiệu Module
2 Cơ bản về Hoạt ảnh & CSS Transitions
3 Hiểu về CSS Animations
4 Tại sao "Chỉ CSS" là chưa đủ?
5 Chạy CSS Animations với sự trợ giúp của Vue
6 Sử dụng Transition Component
7 CSS Animations với Transition Component
8 Sử dụng Tên lớp CSS tùy chỉnh
9 Ví dụ: Tạo hoạt ảnh cho Modal
10 Chuyển tiếp giữa nhiều phần tử
11 Sử dụng Transition Events
12 Xây dựng JavaScript Transitions (thay vì CSS)
13 Vô hiệu hóa CSS Transitions
14 Bắt đầu với Danh sách có hoạt ảnh
15 Tạo hoạt ảnh danh sách với "transition-group"
16 Tạo hoạt ảnh di chuyển mục danh sách
17 Tạo hoạt ảnh thay đổi Route
18 Lưu ý quan trọng về Hoạt ảnh thay đổi Route
19 Tài nguyên Module
1 Giới thiệu Module
2 Là gì & Tại sao?
3 Tạo & Sử dụng Store
4 Kết nối Components với State
5 Giới thiệu Mutations - Cách tốt hơn để thay đổi dữ liệu
6 Truyền dữ liệu cho Mutations với Payloads
7 Giới thiệu Getters - Cách tốt hơn để lấy dữ liệu
8 Chạy mã Async với Actions
9 Hiểu về "Context" của Action
10 Sử dụng Mapper Helpers
11 Ví dụ: Thêm State
12 Tổ chức Store với Modules
13 Hiểu về Local Module State
14 Đặt tên không gian cho Modules
15 Cấu trúc mã & tệp Vuex
16 Một thử thách!
17 Giải pháp thử thách (1/3)
18 Giải pháp thử thách (2/3)
19 Giải pháp thử thách (3/3)
20 Tổng kết
21 Tài nguyên Module
1 Giới thiệu Module
2 Lập kế hoạch Dự án / Ứng dụng Web
3 Lập kế hoạch Yêu cầu dữ liệu
4 Lập kế hoạch Bố cục / Components
5 Đăng ký Routes
6 Thêm Components trang Route
7 Làm việc trên Bố cục chính & Kiểu dáng
8 Kết nối các Trang
9 Thêm Vuex và dữ liệu Huấn luyện viên
10 Làm việc trên Danh sách Huấn luyện viên và các mục Danh sách
11 Thêm một vài Components cơ sở (Base Card, Base Button, Base Badge)
12 Xây dựng Component Chi tiết Huấn luyện viên
13 Lọc Huấn luyện viên
14 Đăng ký làm Huấn luyện viên: Biểu mẫu
15 Thêm Huấn luyện viên vào Vuex
16 Thêm Xác thực biểu mẫu
17 Làm việc trên Biểu mẫu Liên hệ
18 Lưu trữ Yêu cầu (Tin nhắn) với Vuex
19 Hiển thị Yêu cầu đến (Tin nhắn)
20 Lọc Yêu cầu cho Huấn luyện viên đang hoạt động
21 Gửi yêu cầu PUT Http để lưu dữ liệu Huấn luyện viên
22 Lấy dữ liệu Huấn luyện viên (Yêu cầu GET Http)
23 Hiển thị Vòng quay tải
24 Thêm Xử lý lỗi Http
25 Gửi yêu cầu Http Yêu cầu huấn luyện
26 Lưu trữ dữ liệu Phản hồi Http
27 Thêm Chuyển tiếp Route
28 Trang "Không tìm thấy" & Tổng kết
29 Tài nguyên Module
1 Giới thiệu Module
2 Cách Xác thực hoạt động trong Ứng dụng Vue (hoặc bất kỳ SPA nào)
3 Khóa / Bảo vệ Tài nguyên Backend
4 Thêm trang Xác thực (Đăng nhập & Đăng ký)
5 Chuẩn bị Vuex
6 Thêm "Signup" Action & Luồng
7 UX tốt hơn: Vòng quay tải & Xử lý lỗi
8 Thêm "Login" Action & Luồng
9 Đính kèm Token vào Yêu cầu gửi đi
10 Cập nhật Giao diện dựa trên trạng thái Auth
11 Thêm "Logout" Action & Luồng
12 Xác thực & Định tuyến (bao gồm Navigation Guards)
13 Thêm "Tự động đăng nhập"
14 Thêm "Tự động đăng xuất"
15 Tổng kết
16 Tài nguyên Module
1 Giới thiệu Module
2 Triển khai cái gì?
3 Tối ưu hóa: Sử dụng Components không đồng bộ
4 Lưu ý: Components không đồng bộ & Định tuyến
5 Xây dựng Dự án cho Môi trường Production
6 Triển khai Ứng dụng Vue
7 Tài nguyên Module
1 Giới thiệu Module
2 Composition API giải quyết vấn đề gì?
3 Thay thế "data" bằng "refs"
4 Thay thế phương thức setup()
5 Xây dựng đối tượng "reactive"
6 Tính phản ứng: Tìm hiểu sâu
7 Thay thế "methods" bằng các hàm thông thường
8 Thay thế "Computed Properties" bằng hàm "computed"
9 Ràng buộc Hai chiều và Composition API
10 Làm việc với Watchers
11 Tổng kết đầu tiên
12 Cách sử dụng Template Refs
13 Components, Props & Composition API
14 Phát ra Sự kiện tùy chỉnh
15 Làm việc với Provide/ Inject
16 Lifecycle Hooks trong Composition API
17 Di chuyển từ Options API sang Composition API - Một dự án ví dụ
18 Di chuyển Component đầu tiên
19 Di chuyển một Component lớn
20 Di chuyển các Components còn lại
21 Định tuyến, Params & Composition API
22 Đối tượng Route & Router và Composition API
23 Sử dụng Vuex với Composition API
24 Tổng kết
25 Tài nguyên Module
1 Giới thiệu Module
2 Khái niệm Tái sử dụng
3 Sử dụng Mixins
4 Hiểu về Trộn Mixin
5 Mixins toàn cục
6 Nhược điểm của Mixins
7 Hooks / Composables tùy chỉnh & Composition API
8 Thêm Hàm Composition tùy chỉnh
9 Tại sao Hooks / Composables vượt trội hơn Mixins
10 Ví dụ: Tạo "Search" Hook
11 Những lưu ý về Hooks tùy chỉnh
12 Thêm suy nghĩ về Hooks / Composables tùy chỉnh
13 Ví dụ: Một "Sort" Hook tùy chỉnh
14 Tài nguyên Module
1 Cảm ơn bạn đã tham gia khóa học!
2 Tổng kết khóa học & Bước tiếp theo
1 Vue 3 - Tổng quan
2 Thay đổi quan trọng & Các bước Di chuyển
3 Vue 3: Tính năng mới
4 Composition API mới (Tùy chọn!)
5 Tài nguyên Di chuyển thêm
1 Nội dung khóa học Vue 2
1 Thêm: Nhiều nội dung hơn!

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

Join this bestselling Vue course to learn how to use the latest version of VueJS to build amazing, modern web apps!

No matter at which metric you look at (Google Trends, Github Stars, Tweets ...) - VueJS is the shooting star in the world of JavaScript frameworks - it simply is amazing!

This bestselling Udemy course teaches the latest version of Vue (Vue.js 3) from the ground up and in great detail. We'll cover all the core basics but we'll not stop thereafter - this course also dives into advanced concepts like the Composition API introduced with Vue 3.

Frontend frameworks like Vue JS are extremely popular because they give us this reactive, great user experience we know from mobile apps - but now in the browser! No wonder that jobs requiring frontend framework skills like VueJS are amongst the best paid ones in the industry!

You may know Angular 2+ and ReactJS, well, VueJS combines the best of both frameworks and makes building anything from small widgets to big, enterprise-level apps a breeze and a whole lot of fun!

And if you don't know the two mentioned frameworks: That's fine, too, this course does not expect any knowledge of any other frontend framework - you will learn it all throughout this Course!

This course covers it all!

We'll start at the very basics, what Vue.js is and how it works before we move on to more complex and advanced topics but I'll be honest: It's too much to fit it all into one sentence, so here's what you'll learn in this Course:

  • What is VueJS and Why would you use it?

  • The Basics (including the basic Syntax, Understanding Templates and much more!)

  • How to Output Reactive Data & Listen to Events

  • Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)

  • Setting up a Development Environment and Workflow

  • Using Components (and what Components are to begin with)

  • A Deep Dive Look Behind the Scenes of Vue

  • Binding to Form Inputs

  • Sending Http Requests to Backend APIs

  • Authentication & Vue

  • How to make your App more Beautiful with Animations and Transitions

  • How to create an awesome Single-Page-Application (SPA) with Routing

  • How to improve State Management by using Vuex

  • How to Deploy the App

  • And much more!

All these topics are taught with real examples and demo projects. This course is full of exercises, challenges and bigger courser projects that allow you to practice what you learned.

Along with many other smaller projects, we will build a couple of bigger main projects:

  • The "Monster Slayer" Game - a game running in the browser, 100% powered by Vue

  • The "Learning Resource Manager" - a web app that allows you to manage (add, delete, list) your favorite learning resources

  • The "Find a Coach" app - a web app that allows you to sign up / login, register as a coach, list and filter available coaches and send messages to coaches

Is this course for you?

Now that you know what this course is about, let's see if this course is for you!

Here are three types of students who will love this course:

Student #1:

Has some JavaScript experience and is interested in what this language can do. You heard and read that JavaScript allows you to create nice web applications and enhance existing web pages. VueJS is your choice!

Student #2:

You already have some experience with other frontend frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing frameworks, you seek some alternatives - VueJS might be what you were looking for!

Student #3:

Has experience with backend frameworks/ languages but now also wants to enter the frontend world. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!

Bonus: Student #4

Is disappointed by Angular 2+. Does a good framework need 2 hours of setup? No, certainly not - as VueJS will prove to this student!

Let's dive into VueJS right now!

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 Frameworks
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 😊