vue ディレクティブの修飾子とは何ですか

vue では、命令の修飾子は英語のピリオド「.」で示される特別な接尾辞であり、命令を特別な方法でバインドする必要があることを示すために使用されます。その中に「.passive」があります。 「.prevent」と「.prevent」は併用できません。併用すると「.prevent」が無視され、ブラウザに警告が表示されるため使用します。

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue ディレクティブの修飾子とは何ですか

Modifier (修飾子) は英語のピリオド . で示される特別な接尾辞で、ディレクティブがバインドされる必要があることを示すために使用されます。特別な方法。

1. v-bind コマンド修飾子

1) Camel

バインディング機能により、大文字は

## のように小文字に変換されます。

#つまり、Vue は v-bind 修飾子 Camel を提供します。これにより、SVG などの DOM テンプレートを使用するときに v-bind 属性名をキャメル化できます。 viewBox 属性。

2) prop

は、DOM 属性 (プロパティ) をバインドするために使用されます。

v-bind はデフォルトで DOM ノードの属性にバインドされていますが、.prop 修飾子を使用すると、プロパティにバインドされます。

3) 同期

2. v-on コマンドの修飾子

1) イベント修飾子

- .stop イベントのバブリングを防止します

#- .prevent デフォルトのイベントを防止します

#- .capture イベント キャプチャ モードをオンにする

#- .self

コールバックは、リスナーがバインドされている要素自体からイベントがトリガーされた場合にのみトリガーされます (バブルではなく要素自体をクリックすることによってのみトリガーされます)。

#

なぜこの修飾子を使用するのでしょうか?

タッチイベントがトリガーされたときに空の関数が実行されても、ページはフリーズします。ブラウザはリスナーがデフォルト イベントをブロックするかどうかを知らないため、関数全体が実行されるまでページをスクロールするかどうかを決定できません。パッシブ イベント リスナーを使用すると、開発者はリスナーがデフォルトの動作を妨げないことをブラウザーに伝えることができるため、ブラウザーはページを安全かつ大胆にスクロールできます。統計によれば、モバイル ページのパフォーマンスは大幅に向上します。タッチ イベントの % デフォルトのイベントはブロックされます。

2) キー修飾子

キーボード イベントをリッスンするとき、詳細なキーストロークを確認する必要があることがよくあります。 Vue では、キーボード イベントをリッスンするときにキー修飾子を v-on に追加できます。

Web サイト: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key/Key_Values。

3) システム修飾キー

修飾キーは通常のキーとは異なります。keyup イベントと一緒に使用する場合、イベントがトリガーされたときに修飾キーを押す必要があります。イベントがトリガーされるときは修飾キーを押す必要があります。ctrl の下にある他のキーを離すことによってのみ keyup.ctrl をトリガーできます。 Ctrl キーを放しただけではイベントはトリガーされません。この動作が必要な場合は、代わりに Ctrl に keyCode を使用してください: keyup.17。

- .ctrl

- .alt

- .shift

- .meta

- 正確 (次の方法で制御できます)システム修飾子の組み合わせによってトリガーされる正確なイベント)

4) マウス ボタン修飾子

実行関数は、特定のマウス ボタンがクリックされた場合にのみ処理されます。 (2.2.0)

- .left

- .right

- .middle

3. v-model

# の修飾子 # #1) Lazy

変更イベントがトリガーされない場合、データは更新されません。

デフォルトでは、v-model は各入力イベントがトリガーされた後、入力ボックスの値をデータと同期します。変更イベントの同期を使用する場合は、lazy 修飾子を追加できます。

2)number

は、ユーザーの入力値を数値型に自動的に変換します。

3) トリム

ユーザーが入力した最初と最後の空白文字を自動的にフィルタリングします。

-----注:

1. 修飾子を使用する場合、順序が重要です。対応するコードが同じ順序で生成されます。したがって、

v-on:click.prevent.self は、すべてのクリックのデフォルト イベントを防止します。

v-on:click.self.prevent は、要素自体のクリックのデフォルト イベントのみを防止します。

2. .prevent は無視され、ブラウザに警告が表示される可能性があるため、.passive と .prevent を一緒に使用しないでください。

[関連する推奨事項:「

vue.js チュートリアル 」]

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