Vueイベント処理方法

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

多くの場合、Webのユーザーインターフェイスを開発するときは、 DOMイベントの動作をカスタマイズして、より豊かなユーザーエクスペリエンスを提供したいと考えています。フォームの送信、ボタンのクリック、さらにはスクロールもすべて、コードでリッスンして処理できるDOMイベントに関連付けられています。これらのイベントのデフォルトの動作を防止または変更するかどうかにかかわらず、目的の動作を実現するには、これらのイベントをリッスンして消費する必要があります。

Vueは v-on イベントの名前を指定することにより、HTML要素のDOMイベントをリッスンしてカスタマイズできるようにするディレクティブ。例えば、 v-on:click 消費することができます click DOMイベント。その他の可能性については、MozillaのDOMイベントの完全なリストを確認してください。

インラインイベント処理

を使用して v-on リッスンできるディレクティブ click のイベント button クリック数を追跡する単純なカウンターをインクリメントします。 JavaScriptコードをに提供することによって v-on ディレクティブでは、コンポーネントのコンテキストでを実行することができます。 click イベントがトリガーされます。

InlineMethodComponent.vue

<template>
  <div>
    <h2>InlineMethodComponent</h2>
    <button v-on:click="clicked += 1">
      Clicked {{ clicked }} times
    </button>
  </div>
</template>

<script>
export default {
  name: 'InlineMethodComponent',
  data: function () {
    return {
      clicked: 0
    }
  }
}
</script>

コンポーネントメソッド

DOMイベントを処理できるようになったので、より複雑になるロジックの実装を開始したいと思います。複雑なロジックを内部に追加するのは非常に面倒で悪い習慣です。 v-on 指令。幸い、 Vue を使用すると、コンポーネントでイベント処理メソッドを定義できます。コンポーネントのメソッドの名前をに渡すだけです。 v-on 指令：

SimpleMethodComponent.vue

<template>
  <div>
    <h2>SimpleMethodComponent</h2>
    <button v-on:click="log">
      Click Me
    </button>
  </div>
</template>

<script>
export default {
  name: 'SimpleMethodComponent',
  methods: {
    log() {
      console.log('Button clicked!');
    }
  }
}
</script>

インラインメソッド呼び出し

メソッド呼び出しに情報を渡したり、DOMイベント自体を消費したりしたい場合があります。メソッドの名前をに渡す代わりに v-on ディレクティブでは、代わりに method 自体に呼び出しを渡して、必要な情報を渡すことができます。特殊変数も使用できます $event これには、DOMイベント自体が含まれています。

InlineMethodCallComponent.vue

<template>
  <div>
    <h2>InlineMethodCallComponent</h2>
    <button v-on:click="log('clicked!', $event)">
      Click Me
    </button>
  </div>
</template>

<script>
export default {
  name: 'InlineMethodCallComponent',
  methods: {
    log(msg, event) {
      console.log(event.target.tagName, msg);
    }
  }
}
</script>

イベントメソッド修飾子

DOMイベントのデフォルトの動作を変更または防止したい場合があります。 Vue は、提供するイベントの名前にチェーンできるいくつかの修飾子を提供します。 v-on 指令。

たとえば、 form を含む button タイプ付き Submit、ユーザーのクリックでページが更新されます。シングルページアプリケーション（SPA）では、ページ全体のリロードを回避したいと考えています。これを行うには、チェーンすることができます .prevent を呼び出すことによってイベントがページをリロードするのを防ぐ修飾子 event.preventDefault(). The .stop 修飾子はまた、呼び出すことによってDOMイベントのデフォルトの動作を完全に停止します event.stopPropagation() 多くの場合、カスタムイベントハンドラーで呼び出す必要があります。

MethodCallModifiersComponent.vue

<template>
  <div>
    <h2>MethodCallModifiersComponent</h2>
    <form
      v-on:submit.stop.prevent="log('clicked!', $event)">
      <button type="Submit">
        Click Me
      </button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'MethodCallModifiersComponent',
  methods: {
    log(msg, event) {
      console.log(event.target.tagName, msg);
    }
  }
}
</script>

イベントメソッドのキー修飾子

キーボードの押下によってトリガーされるDOMイベントがある場合があります。 Vue は、キーベースのイベント用に調整されたイベント修飾子を提供します。

たとえば、 input 要素、私たちは両方のキーの押下を聞くことができました Enter と Esc. この動作をカスタマイズすることで、 Enter 私たちを呼び出す log() メソッドと許可 Escape ユーザーが入力をリセットするための迅速な方法を提供します。

MethodCallKeyModifiersComponent.vue

<template>
  <div>
    <h2>MethodCallKeyModifiersComponent</h2>
    <input
      placeholder="Press Enter"
      v-on:keyup.esc.stop="clear"
      v-on:keyup.enter.stop="log"
    />
  </div>
</template>

<script>
export default {
  name: 'MethodCallKeyModifiersComponent',
  methods: {
    log(event) {
      console.log(
        event.target.tagName,
        event.type,
        event.key,
        event.target.value
      );
    },
    clear(event) {
      event.target.value = '';
    }
  }
}
</script>

まとめ

おかげ v-on ディレクティブDOMイベントの動作を簡単に傍受してカスタマイズできます。これらのイベントは個々のコンポーネントに関連付けられているため、イベントハンドラーにリッスンを停止するように指示する必要はありません。コンポーネントが破棄されると、イベントは破棄されます。クリーンアップはありません！

イベント修飾子とキー修飾子の両方の完全なリファレンスを確認して、それらが可能にする可能性を見つけてください。

getdocs

13036