Skip to main content

Sâu bên trong Svelte là một hệ thống phản ứng (reactivity) mạnh mẽ giúp cho việc đồng bộ hoá DOM với tình trạng ứng dụng của bạn - ví dụ như, một phản hồi cho một sự kiện.

Để chứng minh, ta cần phải nối với một hệ thông xử lý sự kiện (event handler) (ta sẽ được học ở những phần sau).

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

Bên trong hàm increment, những gì chúng ta phải làm là thay đổi giá trị của count:

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

Svelte sẽ thêm vài code vào phép gán này để nó có thể thông báo cho DOM khi nào cần được cập nhật.

Tiếp theo: Khai báo

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	let count = 0;
 
	function increment() {
		// nhập code xử lý sự kiện vào đây
	}
</script>
 
<button>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>
 
initialising