Vue のイベント バインディング メカニズムを調べる例

Vue.js は、イベント バインディングで多くの便利なメソッドを提供する人気のあるフロントエンド フレームワークです。 Vue では、v-on ディレクティブを通じてイベントをバインドできます。この記事では、Vue のイベント バインディング メカニズムを調査し、その使用方法の例をいくつか示します。

1. v-on ディレクティブ

v-on ディレクティブは、Vue インスタンスでイベントをバインドするために使用されます。基本的な構文は次のとおりです。

v-on: イベント名 = "イベント処理関数"

または省略形:

@イベント名 = "イベント処理関数"

たとえば、クリック イベントをボタンにバインドできます:

<button v-on:click="handleClick">点击我</button>

または省略形を使用します:

<button @click="handleClick">点击我</button>

ここでの handleClick メソッドは、Vue インスタンスで定義されたメソッドです。 , クリック イベントを処理するために使用されます。

2. バインド方法

Vue は、クリック、ダブルクリック、キーボードのキー、マウスの動きなど、複数のタイプのイベントのバインドをサポートしています。イベント名の後に修飾子を追加することで、バインドするイベントのタイプを指定できます。

1. クリック イベント

上記のように、要素上で v-on:click または @click を使用して、クリック イベントをバインドできます。クリック イベントのハンドラー関数は、単純なメソッド (例:

methods: {
  handleClick () {
    console.log('Button clicked!')
  }
}

2) にすることができます。 ダブルクリック イベント

ダブルクリック イベントをバインドするには、.dbl 修飾子を追加します。イベント名の後ろ:

<button v-on:dblclick="handleDoubleClick">双击我</button>

methods: {
  handleDoubleClick () {
    console.log('Button double-clicked!')
  }
}

3. キーボード イベント

v-on:keydown、v-on:keypress、v-on:keyup を使用して、キーボードの押下、キーボードのキー、とキーボードリリースそれぞれのイベント。例:

<input type="text" v-on:keyup.enter="handleEnterKey" placeholder="按 Enter 键触发">

methods: {
  handleEnterKey () {
    console.log('Enter key pressed!')
  }
}

4. マウス移動イベント

v-on:mousemove、v-on:mouseover、v-on:mouseout を使用して、マウスの移動、マウス入力、およびマウスの移動をバインドできます。イベントから退出します。例:

<div v-on:mousemove="handleMousemove">移动鼠标来触发事件</div>

methods: {
  handleMousemove () {
    console.log('Mouse moved!')
  }
}

5. その他のイベント

上記の一般的なイベントに加えて、Vue は、v-on:scroll、v-on など、他の多くの種類のイベント バインディング メソッドも提供します。 :送信など詳細については、公式ドキュメントを参照してください。

3. パラメータを渡す

イベント処理関数でいくつかのパラメータを渡す必要がある場合があります。 $event パラメータを使用してイベント オブジェクトを取得することも、カスタム パラメータを使用して値を渡すこともできます。

1. イベント オブジェクトを渡す

イベント処理関数では、$event は現在イベントをトリガーしているオブジェクトを取得できます。例:

<button @click="handleClick($event)">点击我</button>

methods: {
  handleClick (event) {
    console.log(event.target)
  }
}

2. カスタム パラメータを渡す

ID やインデックス値などのカスタム パラメータをイベント処理関数に渡す必要がある場合があります。 v-bind: を使用して、プロパティをバインドして値を渡すことができます。例:

<button v-for="(item, index) in list" :key="item.id" @click="handleClick(item.id, index)">{{ item.title }}</button>

methods: {
  handleClick (id, index) {
    console.log('Item ID:', id)
    console.log('Item index:', index)
  }
}

4. 1 回限りのイベントのバインド

1 回限りのイベントのみをバインドする必要がある場合は、v-once コマンドを使用できます。例:

<button v-once @click="handleClick">点击我</button>

ここでの @click イベントは 1 回だけトリガーされ、その後ボタンは無効になります。

5. 概要

この記事の導入部を通じて、Vue のイベント バインディング メソッドといくつかの一般的なイベント タイプと修飾子について学びました。この記事が Vue 開発におけるイベント バインディングに役立つことを願っています。ご質問がある場合は、ディスカッションのために下のコメント欄にメッセージを残してください。

以上がVue のイベント バインディング メカニズムを調べる例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。