［Vue.js］click イベント
公開日：2026-02-18
更新日：2026-02-18
更新日：2026-02-18
1. 概要
ボタンが click された時のイベントを拾って処理を実行します。
動作確認：Vite 7.3.1、Vue.js 3.5.25
動作確認：Vite 7.3.1、Vue.js 3.5.25
2. コード
index.html と src/main.ts は、「Hello, World」で作成したものを使用します。
src/App.vue
イベントハンドラーでは受け取らないようにすることもできます。
$event は、イベント発生時に設定される特別な変数です。
src/App.vue
コード
<script setup lang="ts">
const outputLog1 = ()=> {
console.log('OK');
}
const outputLog2 = (_event?: MouseEvent)=> {
console.log(_event);
}
const outputLog3 = (msg:string)=> {
console.log(msg);
}
const outputLog4 = (_event: MouseEvent, msg:string)=> {
console.log(_event);
console.log(msg);
}
</script>
<template>
クリックすると outputLog1 が呼び出される<br />
<button v-on:click="outputLog1">Test 1</button><br /><br />
<button @click="outputLog1">Test 1（v-on:click の省略記法）</button><br /><br />
引数を省略すると、イベントオブジェクトが渡される<br />
<button @click="outputLog2">Test 2</button><br /><br />
引数を指定すると、イベントオブジェクトは渡されない<br />
<button @click="outputLog3('Test 3')">Test 3</button><br /><br />
イベントオブジェクトと引数の両方を渡したい場合は、$event と引数を両方指定する<br />
<button @click="outputLog4($event, 'Test 4')">Test 4</button><br />
</template>イベントハンドラーでは受け取らないようにすることもできます。
$event は、イベント発生時に設定される特別な変数です。
