Skip to main content

Svelteの中心には、DOMを(例えば、イベントに応じて)アプリケーションの状態に同期し続けさせるための強力な reactivity システムがあります。

これを実演するには、まずイベントハンドラ (これは後ほど学習します) を定義する必要があります。

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

increment 関数の内側で必要なのは count の値を変更することだけです。

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

Svelteは、DOMが更新される必要があることを伝えるコードをこの代入に'取り付け'ます。

Next: Declarations

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