Skip to main content

Svelte 的核心是一个强大的 响应 系统,用来保持 DOM 跟应用状态同步。比如说响应事件。

要演示这个,我们首先需要创建一个事件处理器(我们会在 稍后 学习这个):

App.svelte
<button on:click={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

increment 函数内,我们只需要更改 count 的值即可:

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

Svelte 会把这个赋值“构建”成一些代码,来通知 DOM 它需要更新了。

Next: 声明

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	let count = 0;
 
	function increment() {
		// event handler code goes here
	}
</script>
 
<button>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>
 
initialising