Vue基本⑧（イベント修飾子）

では今回からイベント修飾子です。
VueにはpreventDefault()やstopPropagation()といったメソッドがあります。
preventDefault()はデフォルトの挙動を防ぐメソッドです。
使い方は例えば<a>タグでクリックイベントに入れるとクリックしても画面遷移しないというデフォルトの挙動が発生しなくなります。

 <a href="https://zenn.dev/articles"  @click="$event.preventDefault()">Zenn</a>

クリックしても遷移しません。

stopPropagation()はPropagationは電波という意味があり、例えば
ボタンの外側に<div>タグがあってそこにクリックイベントがあったとします。

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
   <p>{{ count }}</p>
  <div @click="count++">
    <button>ボタン</button>
  </div>
</template>

この時はボタンを押すと<div>に伝番してカウントされますが、

<template>
   <p>{{ count }}</p>
  <div @click="count++">
    <button @click="$event.stopPropagation()">ボタン</button>
  </div>
</template>

このようにstopPropagation()を使うと親要素にclickイベントを伝えないということになります。
この２つはよく使うのでもっと簡単な書き方があります。

  <a href="https://zenn.dev/articles" @click.prevent="">Zenn</a>

 <p>{{ count }}</p>
  <div @click="count++">
    <button @click.stop="">ボタン</button>
  </div>

このように@clickの後にメソッドを付けると簡単に使用できます。
もちろん、この後に処理を書くこともできます。

 <p>{{ count }}</p>
  <div @click="count++">
    <button @click.stop="count = 50">ボタン</button>
  </div>

これでボタンを押すと０が５０になるけどボタンを連打してもカウントアップされません。

処理を書かない場合は@click.preventや@click.stopだけでも大丈夫です。
そして複数付けることも可能です。

  <p>{{ count }}</p>
  <div @click="count++">
    <button @click.stop="count = 50">ボタン</button>
    <a href="https://zenn.dev/articles" @click.prevent.stop>Zenn</a>
  </div>

こうすることで伝番もされないし、デフォルトも効きません。

次はキーボード操作でイベントが発生するキー修飾子です。
@keyupはキーボードを押して離した時に発生する挙動で、下記はインプットに入力するとその文字分カウントされます。
この@keyupの後ろに特定のキー（今回はspace）を付けるとそのキーを押した時のみ反応します。

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <input type="text" @keyup.space="count++" />
</template>

ちなみにこのキー修飾子も複数書くことができ、

<input type="text" @keyup.space.delete="count++" />

これはスペースとデリートが押された時だけ反応するということになります。

次回はディレクティブについて記載していきます。