vueのイベント修飾子とは何ですか

Vue のイベント修飾子を使用すると、イベント処理関数の機能を拡張できます。 .stop: イベントのバブリングを防ぎます。 .prevent: デフォルトのイベント動作を防止します。 .capture: キャプチャフェーズ中にイベントをリッスンします。 .self: イベントは、ターゲット要素が現在の要素である場合にのみトリガーされます。 .once: イベントを 1 回だけ起動し、リスナーを削除します。 .passive: レンダリングのパフォーマンスを最適化します。つまり、DOM は変更されません。 .native: ネイティブ DOM イベントをトリガーします。

Vue のイベント修飾子

Vue のイベント修飾子を使用すると、イベント ハンドラー関数を追加してその動作を変更できます。 。最も一般的に使用されるイベント修飾子の一部を次に示します。

• .stop: 親コンポーネントへのイベントのバブルアップを停止します。
• .prevent: フォームの送信やリンク ナビゲーションなどのデフォルトのイベント動作がトリガーされないようにします。
• .capture: バブリングフェーズではなくキャプチャフェーズでイベントをリッスンします。
• .self: ターゲット要素は、イベントがトリガーされた場合にのみ現在の要素になります。
• .once: イベントを 1 回だけ起動し、ソース要素からイベント リスナーを削除します。
• .passive: イベント ハンドラーが DOM を変更したり、ブラウザーのデフォルトの動作を妨げたりしないことを示します。これにより、レンダリング パフォーマンスが向上します。
• .native: Vue の合成イベントではなく、要素上でネイティブ DOM イベントをトリガーします。

使用例:

<button @click.stop="myMethod">按钮</button>

この例では、ボタン クリック イベントの発生を防ぐために .stop 修飾子が使用されています。親コンポーネントに。

<form @submit.prevent="myMethod">表单</form>

.prevent 修飾子は、フォーム送信のデフォルト動作を防止するために使用されます。

<div @click.capture="myMethod">容器</div>

.capture 修飾子は、キャプチャ フェーズ中にコンテナ内のクリック イベントをリッスンするために使用されます。

複数の修飾子を使用するには、それらを連結するだけです:

<a @click.stop.prevent="myMethod">链接</a>

これにより、リンク ナビゲーションが妨げられ、イベントが親コンポーネントにバブリングされなくなります。

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