【Vue.js】v-onでDOMイベントを購読する方法

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

const count = ref(0)

function handleClick() {
  count.value++
}
</script>

<template>
  <!-- @click は v-on:click の省略形 -->
  <button @click="handleClick">クリック</button>
  <p>{{ count }}</p>
</template>

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

const count = ref(0)
</script>

<template>
  <!-- count++ はインラインハンドラ（そのまま式を書ける） -->
  <button @click="count++">カウントアップ</button>
  <p>{{ count }}</p>
</template>

<script setup>
function warn(message, event) {
  if (event) event.preventDefault()
  alert(message)
}
</script>

<template>
  <!-- $event でネイティブのイベントオブジェクトを渡す -->
  <button @click="warn('まだ送信できません', $event)">送信</button>

  <!-- アロー関数でも同じ -->
  <button @click="(event) => warn('まだ送信できません', event)">送信</button>
</template>

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

const message = ref('')

function handleSubmit() {
  alert('送信: ' + message.value)
}
</script>

<template>
  <!-- ページ遷移（デフォルトのsubmit）を止めて handleSubmit だけ実行 -->
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="message">
    <button type="submit">送信</button>
  </form>
</template>

<!-- 伝播を止める -->
<a @click.stop="doThis"></a>

<!-- 要素自身がイベントの発生元のときだけ実行 -->
<div @click.self="doThat">...</div>

<!-- キャプチャーモードで受ける -->
<div @click.capture="doThis">...</div>

<!-- 最大1回だけ実行 -->
<a @click.once="doThis"></a>

<!-- スクロール性能の改善（preventDefaultしないことを宣言） -->
<div @scroll.passive="onScroll">...</div>

<!-- 修飾子は連結できる（順序に意味がある） -->
<form @submit.prevent.stop="onSubmit"></form>

<!-- Enterキーを押したときだけ実行 -->
<input @keyup.enter="submit">

<!-- Escで閉じる -->
<input @keyup.esc="close">

<!-- Ctrl + クリック -->
<button @click.ctrl="onCtrlClick">A</button>

<!-- Ctrlだけを押しているときのみ（他のキーとの組み合わせは除外） -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 右クリック -->
<div @click.right="onRightClick">...</div>

<!-- 子コンポーネント（TodoForm.vue） -->
<script setup>
const emit = defineEmits(['submit'])

function onSubmit() {
  emit('submit', { title: '買い物' })
}
</script>

<template>
  <button @click="onSubmit">追加</button>
</template>

<!-- 親コンポーネント -->
<script setup>
import TodoForm from './TodoForm.vue'

function addTodo(todo) {
  console.log(todo.title)
}
</script>

<template>
  <TodoForm @submit="addTodo" />
</template>