Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

Svelte 的核心是一个强大的响应式系统,用于保持 DOM 与你的应用程序状态同步 — 例如,响应事件的时候。

通过使用 $state(...) 包裹值使 count 声明变成响应式:

App
let count = $state(0);

这被称为符文(rune),它告诉 Svelte count 不是普通变量。符文看起来像函数,但它们不是 — 当使用 Svelte 时,它们是语言本身的一部分。

剩下的就是实现 increment 函数:

App
function increment() {
	count += 1;
}

在 GitHub 编辑此页面

上一页 下一页
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	let count = 0;
 
	function increment() {
		// TODO implement
	}
</script>
 
<button onclick={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>