まず、v-onディレクティブは、HTML要素にイベントリスナーを追加するために使用されます。以下のように使用します。
<button v-on:click="handleClick">クリック</button>上記の例では、"クリック"ボタンがクリックされたときに、handleClickというメソッドが呼び出されます。
次に、methodsオプションを使用して、Vueインスタンス内でメソッドを定義します。以下は、handleClickメソッドの例です。
methods: {
handleClick() {
// メソッドの処理を記述
}
}handleClickメソッド内には、ボタンがクリックされたときに実行したい処理を記述します。たとえば、データの変更やAPIの呼び出しなどの操作を行うことができます。
また、v-onディレクティブでは、引数を指定することもできます。以下の例では、引数を使用してメソッドにデータを渡しています。
<button v-on:click="handleClick('Hello')">クリック</button>methods: {
handleClick(message) {
console.log(message); // 'Hello'が出力される
}
}このように、v-onディレクティブとmethodsを組み合わせることで、簡単にイベントハンドリングを実現することができます。さらに、v-onディレクティブは、マウスイベントやキーボードイベントなど、さまざまな種類のイベントに対応しています。
以上がVue.jsにおけるv-onディレクティブとmethodsの使用方法についての解説です。これらの基本的な概念を理解していれば、より複雑なイベントハンドリングも行うことができます。