Vue基本⑦（クリックイベント）
何かをしたら何かが発生するという処理を解説していきます。
ボタンクリックしたら何か処理する、キーを入力したら別の処理をするなどの発火イベントはv-onディレクティブを使用します。
v-bind:ディレクティブと同じようにv-on:として使用し、その後に何か起きた時の種類を書きます。
例えば、クリックされた場合はclickと書き、=""を中の値として書いて実行したい処理を書きます。
ボタンを押すと１ずつ増える処理を書きました。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<p>{{ count }}</p>
<button v-on:click="count++">button</button>
</template>
このv-on:ディレクティブも非常によく使うので@に省略することができます。
こちらもESLintでは@が推奨されているので@を使っていきましょう。
<template>
<p>{{ count }}</p>
<button @click="count++">button</button>
</template>
そして、このv-onディレクティブの中に関数も入れることができ、クリックされたら実行できるようになります。
<script setup>
import { ref } from 'vue'
const count = ref(0)
function countUp() {
count.value++
}
</script>
<template>
<p>{{ count }}</p>
<button @click="count++">button</button>
<button @click="countUp">button</button>
</template>
関数内では.valueを付けるのを忘れずに。
v-onディレクティブ（@）の後ろ、今回ならclickのところをイベントと言い、実行するイベントのことをハンドラーと言います。
<button @click="count++">のように処理を直接書くパターン（インラインハンドラー）と
<button @click="countUp">のように関数自体を書くパターン（メソッドハンドラー）の２種類があります。
イベントの種類の詳細はこちら
では次はイベントオブジェクトの取得方法です。
clickイベントのようなブラウザが発生させているイベントは、そのイベントが発生したと同時にイベントオブジェクトという、そのイベントの情報を持ったオブジェクトを生成していてVueではそれを取得できるようになっています。
どうするかというと、メソッドハンドラーは第一引数に自動で入るようになっています。
下記のように引数にeventを入れconsole.logに出力します。
function countUp(event) {
console.log(event);
count.value++
}
こうするとボタンをクリックするとイベントの情報を持ったオブジェクトが取れます。
このconsole.log(event);をよく見ると
clientX,clientYという、ボタンのクリックした座標が取れています。
これを関数に入れるとボタンを押す度に座標が取れるということになります。
function countUp(event) {
console.log(event)
count.value = event.clientX
}
次にインラインハンドラーです。
こちらは下記のように特殊な変数を使うことができます。
<button @click="count = $event">button</button>
$eventここにイベントオブジェクトが格納されます。
ここに先ほどのclientXを入れて呼び出してみましょう。
<template>
<p>{{ count }}</p>
<button @click="count = $event.clientX">button</button>
<button @click="countUp">button</button>
</template>
先ほどと同じようにX座標が取れています。
（イベントハンドラーで$eventは使えないので注意）
では、次はメソッドハンドラーとして指定した関数に引数を渡したい場合、そういう時はメソッドハンドラーではなく、インラインハンドラーとして関数呼び出し式を書きます。
<button @click="countUp()">button</button>
こうすることによって同じように関数を呼び出すこともでき、引数を入れることもできます。
<script setup>
import { ref } from 'vue'
const count = ref(0)
function countUp(event, price) {
console.log(event)
count.value = event.clientX * price
}
</script>
<template>
<p>{{ count }}</p>
<button @click="count = $event.clientX">button</button>
<button @click="countUp($event, 5)">button</button>
</template>
この場合はeventのように引数として渡すようにしてください。
適当に第２引数にpriceを入れてclientXに５倍かけるというのをしてみました。
ボタンを押したらX座標に５倍をかけた値が表示されます。
引数を指定したい場合はこんな感じで関数呼び出し式で指定します。
次回はイベント修飾子を解説していきます。
Discussion