v-on (@) イベントリスナーディレクティブ

最終更新：2026-10-22

v-on はイベントリスナーを割り当てます。省略記法は @ です。.stop、.prevent、.once などの修飾子で挙動をカスタマイズできます。

📝 構文

<button v-on:click="count++">+1</button>
<button @click="greet">あいさつ</button>
<form @submit.prevent="onSubmit">

expression	イベント名 + ハンドラーまたはインラインステートメント。.stop、.prevent、.once、.self などの修飾子が使えます

戻り値：ディレクティブ。戻り値なし

以下のコードを編集して結果を確認しましょう：

出力：

Shows 'Clicked 0 times'; each click increments the counter.

💡 ヒント @ は v-on: の省略記法です。日常の開発では @click の形を使います。

ℹ️ 補足 よく使う修飾子：.stop（バブリング防止）、.prevent（デフォルト動作の防止）、.once（1 回だけ発火）、.self（自身がターゲットのときのみ発火）。

⚠️ 注意 メソッド名は括弧なしで渡します（@click="greet"）。引数を渡す場合のみ括弧を付けます（@click="greet('hi')"）。

Q @click="fn" と @click="fn()" の違いは何ですか？

A 前者はイベントオブジェクトが自動的に第 1 引数として渡されます。後者は即座に呼び出されるため、自分で引数を渡したいときだけ括弧を書きます。

Q 修飾子は連結できますか？

A はい。@click.stop.prevent のように書け、記述順に適用されます。

Q キーボードイベントを監視するには？

A @keyup.enter や @keydown.esc のようなキー修飾子を使います。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。