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

Svelte.js - The Complete Guide (incl. Sapper.js)

Svelte.js - Hướng dẫn Toàn diện (Bao gồm Sapper.js)

Svelte.js - Hướng dẫn Toàn diện (Bao gồm Sapper.js)

Xây dựng ứng dụng web hiệu năng cao với SvelteJS - một trình biên dịch JavaScript nhẹ

4.5
(3,640 đánh giá)
21,228 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đ 899.000đ -94%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
12.5 giờ video
197 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ì

Học SvelteJS từ đầu, không yêu cầu kiến thức trước
Toàn bộ lý thuyết và ứng dụng thực tế của Svelte
Các khái niệm cốt lõi và kỹ thuật nâng cao để xây dựng ứng dụng Svelte

Yêu cầu

Yêu cầu kiến thức JavaScript cơ bản
KHÔNG yêu cầu kiến thức trước về SvelteJS hay bất kỳ framework hay thư viện JavaScript nào khác

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

Dành cho học viên JavaScript từ cơ bản đến nâng cao, quan tâm đến việc xây dựng ứng dụng frontend hiệu năng cao
Dành cho học viên đã biết các framework JavaScript hiện đại và muốn tìm hiểu một giải pháp thay thế nhẹ, sẵn sàng cho sản xuất

Nội dung khóa học

19 phần • 196 bài giảng
1 Giới thiệu
2 Tại sao chọn Svelte?
3 Svelte là gì?
4 Tham gia Cộng đồng Học trực tuyến của chúng tôi
5 Thiết lập Ứng dụng Đầu tiên & Dự án Khóa học
6 Viết Mã Svelte Đầu tiên
7 Nội dung Khóa học
8 Cách Tận dụng Tối đa Khóa học
9 Tài nguyên Khóa học
1 Giới thiệu Mô-đun
2 Sử dụng Dấu Ngoặc Nhọn & Hiểu Cú pháp Chính
3 Biến Phản ứng (Reactive)
4 Tìm hiểu Sâu hơn về Tính Phản ứng
5 Ràng buộc với Thuộc tính Phần tử
6 Phím tắt Ràng buộc Hai chiều
7 Sử dụng Nhiều Component
8 Component & Truyền thông qua Props
9 Tìm hiểu Sâu về Ràng buộc
10 Sử dụng Thuộc tính Tự mở rộng
11 Xuất Nội dung HTML
12 Ví dụ về XSS
13 Thiết lập Lớp CSS Động
14 Tổng kết
15 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Sử dụng Câu lệnh "if" trong HTML
3 if, else & else-if
4 Xuất Danh sách với "each"
5 "each", "else" & Trích xuất Chỉ mục
6 Danh sách & Khóa (Keys)
7 Tìm hiểu Kỹ hơn về Khóa Danh sách
8 Tổng kết
9 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Cập nhật Mảng & Đối tượng Bất biến
3 Hiểu về Bộ điều chỉnh Sự kiện (Event Modifiers)
4 Sử dụng Hàm Nội tuyến
5 Tổng kết
6 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Thiết lập Dự án & Component Đầu tiên
3 Các Cách Khác nhau để Gắn Component
4 Cách Nhúng Widget
5 Thêm Dữ liệu
6 Thêm Component Mới (MeetupItem)
7 Làm việc với Các Loại Component Khác nhau
8 Truyền Dữ liệu vào Component
9 Thêm Component "MeetupGrid"
10 Thêm Meetup Mới qua Biểu mẫu
11 Tạo Component "TextInput"
12 Thêm Component "Button" Tùy chỉnh
13 Tổng kết
14 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Hiểu về Các Loại Component Khác nhau
3 Tổng quan về Truyền thông giữa các Component
4 Chuyển tiếp Sự kiện (Event Forwarding)
5 Phát ra Sự kiện Tùy chỉnh
6 Cách Trích xuất Dữ liệu Sự kiện
7 Sử dụng Spread Props & Props Mặc định
8 Làm việc với Slots
9 Slots Đặt tên & Slots Mặc định
10 Ví dụ: Mở & Đóng Modal
11 Sử dụng Slot Props
12 Vòng đời Component - Lý thuyết
13 Các Hook Vòng đời Tạo & Cập nhật trong Thực tế
14 Sử dụng "tick()"
15 Tổng kết
16 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Thêm Props Mặc định
3 Truyền thông qua Sự kiện Tùy chỉnh
4 Tận dụng Slots
5 Tạo Component "EditMeetup"
6 Truyền thông giữa các Component
7 Thêm Slots nữa nào!
8 Thêm Component "Modal" Có thể Tái sử dụng
9 Hoàn thiện Component "Modal"
10 Tổng kết
11 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Ôn tập Ràng buộc Hai chiều
3 Hiểu về Ràng buộc Component Tùy chỉnh
4 Dựa vào Chuyển đổi Số Tự động
5 Ràng buộc Checkbox & Radio Button
6 Ràng buộc Dropdown
7 Ràng buộc với Tham chiếu Phần tử
8 Ràng buộc với Tham chiếu Component
9 Xác thực Biểu mẫu & Đầu vào
10 Tổng kết
11 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Khám phá Các Giải pháp Xác thực Khác nhau
3 Thêm Xác thực & Hiển thị Lỗi vào Component "TextInput"
4 Thêm Logic Xác thực
5 Hoàn thiện Xác thực "TextInput"
6 Xác thực Toàn bộ Biểu mẫu
7 Cải thiện & Tổng kết
8 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Vấn đề là gì?
3 Tạo Writable Store & Đăng ký (Subscribing)
4 Cập nhật Dữ liệu Store
5 Stores và Component Trạng thái & Trình bày
6 Quản lý Đăng ký Store
7 Sử dụng Tự động Đăng ký (Autosubscriptions)
8 Store Thứ hai!
9 Đăng ký trong Thời gian Ngắn
10 Hiểu về Readable Stores
11 Sức mạnh Không giới hạn với Custom Stores
12 Tổng kết
13 Derived Store & Ràng buộc Store
14 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Một Lỗi Có thể Xảy ra
3 Thiết lập Store
4 Sử dụng Custom Store
5 Truy cập Store từ Các Component Khác nhau
6 Thêm Component "MeetupDetail"
7 Chuẩn bị Biểu mẫu "Chỉnh sửa Meetup"
8 Tiếp tục Làm việc với Tính năng "Chỉnh sửa"
9 Thêm Tính năng "Xóa"
10 Thêm Component "Lọc"
11 Một số Bước Cuối cùng
12 Tổng kết
13 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tạo hoạt ảnh cho Giá trị với Tweened Store
3 Sử dụng Spring Store Thay thế
4 Chuẩn bị Ví dụ về Hiệu ứng chuyển tiếp
5 Hiệu ứng chuyển tiếp Phần tử
6 Tìm hiểu Thêm về Hiệu ứng chuyển tiếp
7 Sử dụng Hiệu ứng chuyển tiếp "vào" và "ra" Khác nhau
8 Tạo hoạt ảnh cho Các mục Bị ảnh hưởng (Passive)
9 Hiệu ứng chuyển tiếp Hoãn lại (Deferred)
10 Tổng kết
11 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tạo hoạt ảnh cho Modal
3 Tạo hoạt ảnh cho Các mục Meetup
4 Tạo hoạt ảnh cho Huy hiệu "Yêu thích" & Tổng kết
5 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Thêm REST API
3 Gửi Dữ liệu qua Yêu cầu POST
4 Hiển thị Chỉ báo Tải & Gửi Dữ liệu Chính xác
5 Tải & Chuyển đổi Dữ liệu
6 Những Điều cần Lưu ý
7 Sử dụng Khối "await"
8 Http + Store
9 Tổng kết
10 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Lưu trữ Meetup trên Máy chủ
3 Tải & Chuyển đổi Dữ liệu
4 Thêm Vòng quay Tải (Loading Spinner)
5 Cập nhật qua PATCH
6 Gửi Cập nhật "Yêu thích" & Xóa Dữ liệu
7 Sửa Thứ tự Các mục
8 Thêm Xử lý Lỗi
9 Tổng kết
10 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Component Động
3 Component Đệ quy
4 Truy cập Windows, Body & Head
5 Script Liên Component
6 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Cái gì và Tại sao?
3 Hiểu về Cấu trúc Thư mục
4 Kiểm tra Trang Web
5 Tên tệp & Đường dẫn (Routes)
6 Trang Lỗi & Trang Bố cục (Layout)
7 Tải trước trong Components
8 Tải dữ liệu trước
9 Di chuyển Dự án Meetup vào Dự án Sapper
10 Lấy dữ liệu ở Phía Client
11 Tải dữ liệu trước ở Máy chủ
12 Đồng bộ Dữ liệu đã Tải & Store
13 Chỉnh sửa & Xóa Meetups
14 Hiển thị Trang MeetupDetail
15 Thêm CSS Toàn cục
16 Tổng kết
17 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Module
2 Các Loại Ứng dụng & Tùy chọn Triển khai
3 Xây dựng Ứng dụng
4 Hiển thị Nội dung Chính xác trên Máy chủ
5 Triển khai Ứng dụng SSR
6 Lưu trữ Site Tĩnh
7 Tổng kết
8 Tài nguyên & Liên kết Hữu ích
1 Svelte vs React vs Angular vs Vue
2 Tổng kết Khóa học
3 Nội dung Bổ sung

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

Svelte.js is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.

You'll write your frontend application using normal JavaScript, following specific rules laid out by Svelte (which are of course taught in this course). As a result, the Svelte compiler will produce a small and highly optimized JavaScript bundle which can be deployed.

In this course, you learn all about Svelte, how it works, its core features and how to run your final app on a real server!

Svelte.js is a tool for building highly reactive, modern user interfaces for the web - and it's a great alternative to JavaScript frameworks and libraries like React.js, Angular or Vue.

What will you learn?

  • What is Svelte and why would you use it?

  • All the core features and base syntax

  • How to render conditional and list content

  • How to write reactive and fast web applications

  • All about components, how to pass data around and how to create re-usable building blocks

  • How to efficiently manage data in your application via Svelte stores

  • How to reach out to a backend server and send + fetch data

  • How to pre-render your app on a server and improve SEO

Is this course for you?

Svelte is a popular alternative to React.js, Angular and Vue and learning it will benefit any frontend web developer.

You don't need to know these frameworks to learn Svelte though - but if you do know them, you'll learn about an interesting alternative which might allow you to build your web projects with less code (and get an even faster app along the way!).

You need NO advanced JavaScript knowledge, basic knowledge will do.

If you're interested in building modern, reactive user interfaces that load quickly and run fast, SvelteJS is a tool you shouldn't overlook!

What's in the course?

  • Learn Svelte from scratch - zero knowledge assumed!

  • Theory and practice modules

  • A complete course project (the "meetup planner")

  • Assignments and tasks

  • All source code is attached to lectures and modules

  • 30 day trial phase - get your money back with no questions asked if you're not happy!

Who's teaching you?

My name is Maximilian Schwarzmüller and I'm teaching a broad variety of web & mobile development topics here on Udemy. I immediately loved Svelte when I learned about it since it fills an important gap between vanilla JavaScript and frameworks like Angular, React or Vue.

It can be used to replace these frameworks or to enhance apps built with them - and I simply love lightweight apps and clean syntax rules.

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