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

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

<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はこんな感じで省略形を使える