Vue3 v-on ディレクティブ

Vue3 内置指令Vue3 組み込みディレクティブ

v-onディレクティブはイベントリスナーをバインドするために使用され、DOMイベントやカスタムイベントを監視できます。

基本説明

v-onディレクティブは、要素にイベントハンドラ関数をバインドするために使用されます。これを使用して、ネイティブDOMイベントを監視したり、カスタムコンポーネントが発行するイベントを監視したりできます。

  • 省略記法: @
  • 期待される型: Function | Inline Statement | Object
  • 機能: イベントリスナーをバインドし、ネイティブDOMイベントとカスタムイベントをサポートします。

基本用法

実例

<!-- 完全な書き方 -->
<button v-on:click="handleClick">クリック</button>

<!-- 省略記法 -->
<button @click="handleClick">クリック</button>

実例

<template>
  <div>
    <button @click="count++">増加</button>
    <p>カウント: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>

イベント修飾子

実例

<!-- イベントのバブリングを防ぐ -->
<button @click.stop="handleClick">バブリングを停止</button>

<!-- デフォルトの動作を防ぐ -->
<form @submit.prevent="handleSubmit">
  <button type="submit">送信</button>
</form>

<!-- Enterキーを押すとトリガー -->
<input @keyup.enter="handleEnter" placeholder="Enterキーで送信" />

Vue3 内置指令Vue3 組み込みディレクティブ

その他の拡張