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

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 サイトの他の関連記事を参照してください。