Vueのイベント処理：@click / @input を理解して書けるようにする – 9/12

Vueのイベントは @click のようなディレクティブで書きます。頻出パターンを押さえて、TODOアプリに繋げます。

@clickの基本

<button @click="handleClick">Click</button>

handleClick は script setup 内で定義します。

<script setup>
const handleClick = () => {
  alert("クリック")
}
</script>

一覧の削除などで引数が必要なときは次のように書けます。

<button @click="removeTodo(todo.id)">削除</button>

Reactの onClick={() => ...} と似た役割です。

Vueは入力同期を v-model で書けるため、@input を直接使うよりシンプルになることが多いです。
ただし、入力時に即処理したい場合は @input を使います。