v-on を使用して Vue でイベントをリッスンする方法-Vue.js-php.cn

v-on を使用して Vue でイベントをリッスンする方法

WBOY

リリース： 2023-06-11 14:00:12

オリジナル

1806 人が閲覧しました

Vue は、多くの開発者にとって非常に人気のある JavaScript フレームワークであり、応答性の高いシステムとコンポーネント化を使用して、開発者が対話型のフロントエンドアプリケーションを迅速に作成できるようにします。中でも v-on 命令は、開発者が Vue アプリケーション内のさまざまなイベントを簡単に監視できるようにする非常に便利なツールです。この記事では、v-on を使用して Vue でイベントをリッスンする方法を紹介します。

1. v-on の基本的な使い方

v-on コマンドは、実際にはイベントバインディングの略語で、クリック、マウスホバー、キーボードなどの DOM イベントを監視できます。等々。以下は、クリックイベントの監視を例として、v-on の基本的な使用法です:

<button v-on:click="handler">Click me</button>

ログイン後にコピー

上記のコードでは、v-on 命令を使用してクリックイベントをリッスンし、イベントをハンドラーにバインドします。方法。ユーザーがボタンをクリックすると、ハンドラーメソッドがトリガーされます。

次の省略形も使用できます:

<button @click="handler">Click me</button>

ログイン後にコピー

これは v-on 命令の省略形であり、効果は上記のコードとまったく同じです。

2. リスニングイベントの処理メソッド

一般に、イベントを処理するメソッドを Vue インスタンスに手動で定義する必要があります。メソッド名はカスタマイズ可能で、メソッド内に処理関数を記述することもできます。

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick: function (event) {
      // 处理点击事件
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、クリックイベントを処理するために Vue コンポーネントに handleClick メソッドを定義しました。ユーザーがボタンをクリックすると、このメソッドがトリガーされ、イベントオブジェクトのイベントが唯一のパラメーターとしてメソッドに渡されます。このメソッドでは、イベントオブジェクトを通じてイベントに関する情報を取得できます。

3. パラメータを渡す

追加のパラメータを処理関数に渡す必要がある場合は、v-on 命令の特別な構文を使用できます。

<template>
  <button v-on:click="handleClick('参数1', '参数2')">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick: function (arg1, arg2) {
      // 处理点击事件，并使用arg1和arg2
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、命令で 2 つのパラメーターを渡しました。これらの 2 つのパラメーターは、handleClick 関数の arg1 パラメーターと arg2 パラメーターに渡されます。動的パラメータを使用する必要がある場合は、角かっこ構文を使用する必要があることに注意してください。

4. 修飾子

v-on ディレクティブは、基本的な使用法とパラメーターの受け渡しに加えて、イベント処理機能を強化するためのいくつかの修飾子も提供します。

4.1 イベントのバブリングの防止

Vue では、イベントはルートコンポーネントに到達するまでコンポーネントツリーに沿ってバブリングする可能性があります。イベントのバブリングを防ぐ必要がある場合は、イベント処理メソッドで Event オブジェクトの stopPropagation() メソッドを呼び出すことができます。

<template>
  <div v-on:click="outer">
    <div v-on:click="inner">
      Click me
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    inner: function (event) {
      event.stopPropagation()
    },
    outer: function () {
      console.log('outer')
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、サブコンポーネントのクリックイベントで stopPropagation() メソッドを呼び出し、イベントのバブリングを防ぎました。このメソッドを呼び出さない場合、クリックイベントによって子コンポーネントと親コンポーネントのハンドラー関数が順番にトリガーされます。

4.2 デフォルト動作の防止

Vue では、イベント処理関数が Event オブジェクトのPreventDefault() メソッドを呼び出して、ブラウザのデフォルト動作を防止することもできます。たとえば、フォームの送信やリンクのリダイレクトを防ぐことができます。

<template>
  <form v-on:submit.prevent="submit">
    ...
  </form>
  <a href="https://www.google.com" v-on:click.prevent>Google</a>
</template>

<script>
export default {
  methods: {
    submit: function () {
      // 阻止表单的提交行为
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、フォームの送信イベントでPrevent 修飾子を使用しているため、フォームのデフォルトの送信動作が防止されます。リンクのクリックイベントでは、リンクがジャンプしないようにするために、Prevent 修飾子も使用します。

4.3 キー修飾子

Vue では、イベントをキーストロークと組み合わせて使用できます。特定のキーが押されたときにのみイベントをトリガーしたい場合は、キー修飾子を使用できます。

<template>
  <input v-on:keyup.enter="submit">
</template>

<script>
export default {
  methods: {
    submit: function () {
      // 处理键盘的回车事件
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、keyup イベントで .enter 修飾子を使用して、Enter キーが押されたときにのみイベントハンドラーがトリガーされるようにすることができます。

要約すると、v-on 命令は非常に便利な命令であり、Vue アプリケーションでさまざまなイベントを非常に便利に監視するのに役立ちます。 v-on 命令を使用するときは、この命令をより適切に使用できるように、基本的な使用法、パラメータ、修飾子の受け渡しなどに注意する必要があります。

以上がv-on を使用して Vue でイベントをリッスンする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。