Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

Svelte 的核心是一个强大的反应系统,用于使 DOM 与你的应用状态保持同步 - 例如,响应事件。

¥At the heart of Svelte is a powerful system of reactivity for keeping the DOM in sync with your application state — for example, in response to an event.

通过将值封装在 $state(...) 中使 count 声明具有响应性:

¥Make the count declaration reactive by wrapping the value with $state(...):

App
let count = $state(0);

这称为符文,你可以通过它告诉 Svelte count 不是普通变量。符文看起来像函数,但它们是语言本身的一部分。

¥This is called a rune, and it’s how you tell Svelte that count isn’t an ordinary variable. Runes look like functions, but they’re not — when you use Svelte, they’re part of the language itself.

剩下的就是实现 increment

¥All that’s left is to implement increment:

App
function increment() {
	count += 1;
}
上一页 下一页
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>