イベントリスナーとコード実行の流れ

このようなコードがあるとします。

<button v-on:click="count++">+</button>

その中でイベントリスナーに当たる部分は @clickのところ。
このコードを紐解くと

①ボタンをクリックする（イベントの発生）
↓
②@clickがイベントを検知する
↓
③その後ろの処理が実行される
今の場合はcount++（カウントを１増やす）
と言う処理がボタンをクリックするたびに実行される。

これがあるおかげで
「フォームに文字を打った瞬間に、下のプレビューが変わる」
といった、リアルタイムで直感的な操作が可能になる。

ちなみにcount++というのは
count = count + 1と同じ意味。　
+がニコついているからといって２つ増やすと言う意味ではないので注意
２増やしたい時は count +=2 もしくはcount = count + 2のようにする

省略できる

<button v-on:click="count++">+</button>
<button @click="count++">+</button>

v-onはこんな感じで省略形を使える

v-onの代表的なイベント一覧

ジャンル	イベント	説明	使用例
マウス	`@click`	クリックしたとき	`<button @click="count++">+</button>`
	`@dblclick`	ダブルクリックしたとき	`<div @dblclick="zoomIn"></div>`
	`@mouseover`	マウスが乗ったとき	`<div @mouseover="showMenu"></div>`
	`@mouseout`	マウスが離れたとき	`<div @mouseout="hideMenu"></div>`
	`@mouseenter`	マウスが要素に入ったとき	`<div @mouseenter="showMenu"></div>`
	`@mouseleave`	マウスが要素から出たとき	`<div @mouseleave="hideMenu"></div>`
キーボード操作	`@keydown`	キーを押した瞬間	`<input @keydown="checkKey">`
	`@keyup`	キーを離した瞬間	`<input @keyup="search">`
入力	`@input`	入力するたびに発生	`<input @input="updateMessage">`
	`@change`	入力・選択が確定したとき	`<select @change="changeColor">`
	`@focus`	入力欄を選択したとき	`<input @focus="startEdit">`
	`@blur`	入力欄から離れたとき	`<input @blur="finishEdit">`
フォーム	`@submit`	フォーム送信時	`<form @submit="saveData">`

v-on を使用したプログラムの例

クリックするたびに　count を１ずつ増やしてボタンに反映させるプログラムです。

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>