vue でイベント修飾子ができること

Vue のイベント修飾子は、イベント ハンドラー名の後に修飾子を追加することでその動作を変更します。 一般的な修飾子は次のとおりです。 .stop: イベントのバブリングを防止します。 .self: イベント ターゲットが要素自体である場合にのみトリガーされます。once: イベントが初めてトリガーされた場合にのみトリガーされます。passive: スクロール イベントとタッチ イベントのパフォーマンスを向上させます

#Vue におけるイベント修飾子の役割

イベント修飾子は、イベント ハンドラーの動作を変更するために使用される Vue の特別な構文です。これらは、イベント ハンドラー関数名に 1 つ以上の修飾子を追加することによって使用されます。

一般的なイベント修飾子は次のとおりです:

• .stop: イベントが親要素にバブルアップするのを防ぎます。
• .prevent: イベントを防止するデフォルトの動作 (たとえば、 タグをクリックしたときのページジャンプを防止します)。
• .capture: バブリングフェーズではなくキャプチャフェーズでイベントを処理します。
• .self: イベント ハンドラは、イベント ターゲットが要素自体 (その子ではない) である場合にのみ起動されます。
• .once: イベント ハンドラーは、イベントが初めて発生したときにのみ起動されます。
• .passive: パフォーマンスを向上させるには、スクロール イベントとタッチ イベントにノンブロッキング コールバックを使用します。

例:

<code class="html"><button @click.prevent="handleClick">点击按钮</button></code>

上の例では、ボタンが押されたときにページが更新されないように、

.prevent 修飾子が使用されています。をクリックされます。

その他の例:

イベントの沸騰を停止するには:
• @click.stop
To beキャプチャフェーズでイベントを処理します:
• @click.capture#ユーザーが要素を直接クリックした場合にのみハンドラーをトリガーするには:
@click.self
• イベントが初めて発生したときにのみハンドラーを起動するには:
@click.once
• スクロール イベントとタッチ イベントのパフォーマンスを向上するには:
@scroll.passive

以上がvue でイベント修飾子ができることの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。