【Vue.js】イベントリスナーについて

イベントリスナーは、簡単に言うと
「ユーザーの操作（クリックや入力など）に反応して、
プログラムを動かすための『スイッチ』」

ちょっと詳しく言うと
ユーザーの操作（クリック、キー入力、フォーム送信など）などの
イベントを検知し、それに応じたプログラムを実行する仕組みのことです。

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

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

<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">