Svelte
基于编译器的框架，打造快速轻量的界面。
Svelte is a compiler that turns small, readable components into fast JavaScript, and SvelteKit is the framework that turns those components into a complete website. This track teaches Svelte 5 the modern way, with runes, snippets and event attributes such as onclick, then moves on to SvelteKit 2 routing, load functions and form actions, and finishes with production skills: motion, accessibility, server-side rendering and deployment.
You already know JavaScript, so every lesson goes straight to what Svelte adds, with real examples from a small social app called Nova: a like button, a post card, a leaderboard and a profile page.
- 课时
- 24
- 时长
- 3 小时
- 级别
- 中级
本课程的内容目前为英文。
- 铜牌 可挑战
- 银牌 可挑战
- 金牌 未解锁
准备好证明自己了吗？
三场考试正等着你：铜牌、银牌和金牌。
学完后你将能够
- Build interactive components with the runes
$state,$derived,$effectand$props - Render conditions, keyed lists and async data, and handle events and bindings
- Compose components with snippets, context and shared state in
.svelte.tsmodules - Build SvelteKit pages with layouts, dynamic routes, load functions and form actions
- Ship accessible, server-rendered apps whose motion respects every user
- Build for production with the right adapter and the performance habits that matter
学习旅程
1 第 1 单元Why Svelte
The compiler approach, your first component, and styles that stay inside it.
0 / 32 第 2 单元Reactivity with runes
$state, deep state, $derived, $effect, $props and $bindable: the tools behind every Svelte 5 component.
0 / 53 第 3 单元Template syntax
Conditions, keyed lists, promises, events, two-way bindings, and the class and style directives.
0 / 44 第 4 单元Composition
Child content with snippets, sharing data with context, and state that lives in .svelte.ts modules.
0 / 35 第 5 单元SvelteKit: routing and data
Routes and layouts from folders, dynamic params, load functions, form actions, errors and redirects.
0 / 46 第 6 单元Production
Motion that respects reduced-motion settings, accessibility warnings, SSR and hydration, adapters and speed.
0 / 5