Phát triển ứng dụng với VUE.JS

Trong thế giới frontend, Vue.js nổi lên như một framework tiến bộ (progressive), được yêu thích nhờ sự cân bằng hoàn hảo giữa sức mạnh, sự linh hoạt và trải nghiệm phát triển thú vị. Được thiết kế với triết lý cốt lõi là sự đơn giản và hiệu suất, Vue.js là lựa chọn lý tưởng cho cả những người mới bắt đầu lẫn các đội nhóm xây dựng những ứng dụng quy mô lớn. Khóa học này sẽ là cánh cửa đưa bạn vào hệ sinh thái Vue, giúp bạn làm chủ một trong những công cụ hiện đại và được săn đón nhất.

Chương trình sẽ giúp bạn nắm vững tư duy cốt lõi đã làm nên thành công của Vue: hệ thống phản ứng (Reactivity System), khả năng tự động cập nhật giao diện một cách hiệu quả khi dữ liệu thay đổi. Bạn sẽ học cách xây dựng ứng dụng theo kiến trúc component thông qua các Single File Component (.vue) thanh lịch, giúp đóng gói logic, giao diện và style một cách gọn gàng. Bạn sẽ đi sâu vào việc quản lý trạng thái, từ state cục bộ cho đến trạng thái toàn cục với Pinia – thư viện chính thức được khuyên dùng.

Thời lượng: 42h

Hình thức đào tạo:

- Đào tạo trực tiếp tại lớp học
- Đào tạo trực tuyến
- Đào tạo hybrid (trực tuyến kết hợp trực tiếp)
- Đào tạo tại văn phòng khách hàng

KẾT QUẢ ĐẠT ĐƯỢC:

LÀM CHỦ TRIẾT LÝ REACTIVE VÀ DATA BINDING CỦA VUE

Hiểu sâu cách Vue tự động đồng bộ hóa dữ liệu và giao diện, thành thạo các kỹ thuật data binding để xây dựng UI động.
THÀNH THẠO KIẾN TRÚC COMPONENT TRONG VUE

Có khả năng chia giao diện phức tạp thành các Single File Component (.vue) độc lập, dễ quản lý và tái sử dụng cao.
VẬN DỤNG HIỆU QUẢ DIRECTIVE, COMPUTED PROPERTY VÀ WATCHER

Sử dụng thành thạo các công cụ của Vue để xử lý logic trong template một cách gọn gàng và tối ưu về hiệu năng.
XÂY DỰNG ỨNG DỤNG MỘT TRANG (SPA) VỚI VUE ROUTER

Có khả năng thiết lập ứng dụng đa trang mượt mà, quản lý các luồng điều hướng và truyền dữ liệu giữa các trang.
QUẢN LÝ TRẠNG THÁI ỨNG DỤNG VỚI PINIA

Nắm vững cách sử dụng Pinia, thư viện quản lý trạng thái chính thức của Vue, để quản lý dữ liệu dùng chung trong ứng dụng.

Đối tượng tham gia

Sinh viên

Muốn học một framework hiện đại, hiệu suất cao với cộng đồng hỗ trợ mạnh mẽ và thân thiện.

Lập trình viên

Cần một công cụ mạnh mẽ để xây dựng giao diện người dùng một cách nhanh chóng và hiệu quả.

Chuyên viên công nghệ

Muốn tự hiện thực hóa các thiết kế tương tác mà không cần một framework quá phức tạp.

Người học về web

Muốn mở rộng kỹ năng, tìm kiếm một giải pháp linh hoạt và hiệu quả cho các dự án mới.

Nội dung khóa học

1. Làm quen với Vue.js

- Tổng quan về Vue.js:
  - Tìm hiểu về triết lý thiết kế “progressive” và khám phá hệ sinh thái phong phú của Vue.js.
- Cài đặt môi trường:
  - Hướng dẫn sử dụng công cụ Vite để khởi tạo một dự án Vue 3 một cách nhanh chóng.
- Cấu trúc dự án:
  - Khám phá cấu trúc thư mục của một dự án Vue và vai trò của từng thành phần.
- Vue Instance:
  - Hiểu về hàm createApp và các giai đoạn trong vòng đời của một Vue instance như created, mounted.
- Template Syntax:
  - Thực hành với cú pháp template và các kỹ thuật data binding cơ bản để hiển thị dữ liệu.

2. Vue Components và Single File Components (.vue)

- Khái niệm Component:
  - Nắm vững khái niệm Component và vai trò của nó trong việc xây dựng giao diện hiện đại.
- Single File Components:
  - Tìm hiểu cấu trúc 3 phần <template>, <script setup>, <style scoped> của một file .vue.
- Đăng ký component:
  - Phân biệt và thực hành cách đăng ký component ở cấp độ global và local.
- Thực hành:
  - Tự tay xây dựng các component UI có thể tái sử dụng như Button, Card, và Modal.

3. Data Binding và Directives

- Directives:
  - Học cách sử dụng các chỉ thị đặc biệt (Directives) để thao tác với DOM một cách khai báo.
- Các directive phổ biến:
  - Thực hành với v-bind để ràng buộc thuộc tính, v-on để lắng nghe sự kiện, và v-model cho two-way data binding.
- Điều khiển luồng:
  - Sử dụng v-if, v-else và v-for để điều khiển việc render các phần tử và danh sách.

4. Computed Properties và Watchers

- Computed Properties:
  - Tìm hiểu cách tạo ra các dữ liệu dẫn xuất, được cache lại để tối ưu hiệu năng, lý tưởng cho việc tính toán phức tạp.
- Watchers:
  - Học cách theo dõi sự thay đổi của một nguồn dữ liệu và thực thi một hành động bất đồng bộ, ví dụ như gọi API.
- So sánh chi tiết:
  - Phân biệt rõ khi nào nên sử dụng Methods, Computed Properties, hay Watchers cho từng tình huống cụ thể.

5. Giao tiếp giữa các Component

- Props:
  - Nắm vững cách truyền dữ liệu từ component cha xuống con thông qua props, bao gồm cả việc định nghĩa và xác thực.
- Events:
  - Học cách để component con có thể phát sự kiện ($emit) lên component cha để thông báo về một sự thay đổi.
- Provide/Inject:
  - Giới thiệu về cặp Provide/Inject như một giải pháp để truyền dữ liệu qua nhiều cấp component.

6. Vue Router

- Xây dựng SPA:
  - Hướng dẫn cài đặt và cấu hình Vue Router để xây dựng một ứng dụng Single Page Application.
- Định nghĩa Route:
  - Học cách định nghĩa các route và liên kết chúng với các component trang (Views).
- Điều hướng:
  - Sử dụng <router-link> và các phương thức điều hướng programmatically để di chuyển giữa các trang.
- Route Parameters:
  - Tìm hiểu cách tạo các trang chi tiết động bằng cách sử dụng Route Parameters.

7. Quản lý Trạng thái với Pinia

- Nhu cầu quản lý state:
  - Thảo luận về lý do tại sao cần một thư viện quản lý trạng thái toàn cục trong các ứng dụng lớn.
- Giới thiệu Pinia:
  - Tìm hiểu về Pinia – giải pháp quản lý state chính thức, hiện đại và đơn giản của Vue.
- Các khái niệm cốt lõi:
  - Nắm vững các khái niệm Store, State, Getters, và Actions để tổ chức dữ liệu.
- Thực hành:
  - Xây dựng một store để quản lý giỏ hàng hoặc trạng thái đăng nhập của người dùng.

8. Đồ án cuối khóa

- Xây dựng Ứng dụng Vue.js
  - Mục tiêu: Vận dụng toàn bộ kiến thức để xây dựng một ứng dụng SPA hoàn chỉnh, có tính tương tác cao và kiến trúc tốt.
  - Quy trình thực hiện:
    - Lập kế hoạch: Lựa chọn đề tài (ví dụ: ứng dụng tìm kiếm phim, trang thương mại điện tử nhỏ, dashboard quản lý) và thiết kế cấu trúc component.
    - Dựng Giao diện: Xây dựng các component UI và layout chính của ứng dụng.
    - Quản lý Trạng thái: Sử dụng state cục bộ và Pinia để quản lý dữ liệu cho ứng dụng.
    - Thiết lập Routing: Dùng Vue Router để tạo các trang và luồng điều hướng.
    - Tích hợp API: Sử dụng axios hoặc fetch để kết nối với REST API, thực hiện các thao tác CRUD và xử lý trạng thái loading/error.
    - Hoàn thiện và Triển khai: Tối ưu hóa, kiểm thử và triển khai ứng dụng lên một nền tảng miễn phí như Vercel hoặc Netlify.
  - Yêu cầu đầu ra: Một ứng dụng SPA hoạt động, mã nguồn được quản lý chuyên nghiệp trên GitHub theo các best practice của Vue, và file README.md mô tả dự án.