1. 怠惰なlazy 修飾子は、入力ボックスの値を変更するために使用されます。カーソルが入力ボックスから離れても、v-model バインディングの値は変更されません。 <input type="text" v-model.lazy="値"> <div>{{値}}</div> データ() { 戻る { 値: '111111' } } 2.トリムtrim 修飾子は JavaScript の trim() メソッドに似ており、v-model にバインドされた値の先頭と末尾のスペースをフィルター処理します。 <input type="text" v-model.trim="値"> <div>{{値}}</div> データ() { 戻る { 値: '111111' } } 3.番号数値修飾子の機能は値を数値に変換することですが、文字列を最初に入力する場合と数値を最初に入力する場合の 2 つの異なる状況があります。 <input type="text" v-model.number="値"> <div>{{値}}</div> データ() { 戻る { 値: '111111' } } 最初に数字を入力すると、数字の最初の部分のみが取得されます。最初に文字を入力すると、数字修飾子は無効になります。 4.停止停止修飾子は泡立ちを止めるために使用されます <div @click="clickEvent(2)" スタイル="幅:300px;高さ:100px;背景:赤"> <button @click.stop="clickEvent(1)">クリック</button> </div> メソッド: { クリックイベント(数値) { // ボタンをストップなしでクリックすると 1 2 が出力されます // 停止を追加し、ボタンをクリックして出力 1 を実行しました コンソール.log(数値) } } 5. キャプチャデフォルトでは、イベントは内側から外側にバブルします。キャプチャ修飾子は逆に動作し、外側からイベントをキャプチャします。 <div @click.capture="clickEvent(2)" スタイル="幅:300px;高さ:100px;背景:赤"> <button @click="clickEvent(1)">クリック</button> </div> メソッド: { クリックイベント(数値) { // キャプチャなしでボタンをクリックして1 2を出力します // キャプチャを追加し、ボタンをクリックして 2 1 を出力しました コンソール.log(数値) } } 6.自分self 修飾子は、イベント バインディング自体がクリックされた場合にのみイベントをトリガーするために使用されます。 <div @click.self="clickEvent(2)" スタイル="幅:300px;高さ:100px;背景:赤"> <button @click="clickEvent(1)">クリック</button> </div> メソッド: { クリックイベント(数値) { // selfを追加せずにボタンをクリックして1 2を出力します // self を追加しました。ボタンをクリックすると 1 が出力されます。div をクリックすると 2 が出力されます。 コンソール.log(数値) } } 7.一度once 修飾子は、イベントを 1 回だけ実行するために使用されます。 <div @click.once="clickEvent(2)" スタイル="幅:300px;高さ:100px;背景:赤"> <button @click="clickEvent(1)">クリック</button> </div> メソッド: { クリックイベント(数値) { // 一度もクリックしない場合は、ボタンを複数回クリックして 1 を出力します // 一度追加されます。ボタンを複数回クリックしても、1 が 1 回だけ出力されます。 コンソール.log(数値) } } 8.予防するprevent 修飾子は、デフォルトのイベント(a タグのジャンプなど)を防止するために使用されます。 <a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">クリックしてください</a> メソッド: { クリックイベント(数値) { // 防止しない場合は、ラベル a をクリックして最初にジャンプし、次に 1 を出力します。 // 防止策を追加しました。ラベル a をクリックしてもジャンプせず、1 のみが出力されます。 コンソール.log(数値) } } 9.ネイティブネイティブ修飾子は、イベントが実行可能であることを保証するために、カスタムコンポーネントのイベントに追加されます。 実行できません <My-component @click="shout(3)"></My-component> 実行可能 <My-component @click.native="shout(3)"></My-component> 10.左、右、真ん中これら3つの修飾子は、マウスの左、中、右ボタンによってトリガーされるイベントです。 <button @click.middle="clickEvent(1)" @click.left="clickEvent(2)" @click.right="clickEvent(3)">クリックしてください</button> メソッド: { // 中央のボタンをクリックして1を出力します // 左ボタンをクリックして2を出力します // 右クリックして3を出力 クリックイベント(数値) { コンソール.log(数値) } } 11. 受動態要素のスクロール イベントをリッスンすると、onscroll イベントが継続的にトリガーされます。これは PC 側では問題ありませんが、モバイル側では Web ページが停止してしまいます。したがって、この修飾子を使用すると、onscroll イベントに .lazy 修飾子を付与するのと同じことになります。 <div @scroll.passive="onScroll">...</div> 12. ラクダキャメルviewBoxがなければviewboxとして認識されます <svg :viewBox="viewBox"></svg> キャンメルviewBoxを追加した後にのみviewBoxとして認識されます <svg :viewBox.camel="viewBox"></svg> 12.同期親コンポーネントが子コンポーネントに値を渡し、子コンポーネントがその値を変更したい場合、次のようにすることができます。 親コンポーネント内 <children :foo="bar" @update:foo="val => bar = val"></children> サブコンポーネントでは this.$emit('update:foo', newValue) sync 修飾子の機能は次のものを省略することです: 親コンポーネント内 <children :foo.sync="bar"></children> サブコンポーネントでは this.$emit('update:foo', newValue) 13.キーコードこのようにイベントを書くと、どのボタンが押されてもイベントがトリガーされます。 <input type="text" @keyup="叫ぶ(4)"> では、特定のボタントリガーに制限したい場合はどうすればよいでしょうか?ここでkeyCode修飾子が役に立ちます <input type="text" @keyup.keyCode="shout(4)"> Vue が提供する KeyCode: //通常のキー。 。タブ .delete //(「delete」キーと「backspace」キーをキャプチャします) 。空間 。ESC 。上 。下 。左 。右 //システム修飾キー.ctrl .alt .メタ 。シフト 例えば: Ctrlキーを押して起動します <input type="text" @keyup.ctrl="叫ぶ(4)"> マウスイベント+ボタンを使用することもできます <input type="text" @mousedown.ctrl.="叫ぶ(4)"> Ctrl + 67 などの複数のキーでトリガーできます <入力タイプ="テキスト" @ インタビューで最もよく聞かれる 13 個の Vue 修飾子に関するこの記事はこれで終わりです。関連する Vue 修飾子の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.17 とワークベンチのインストールと設定のグラフィックチュートリアル
LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...
この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...
<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...
この記事の例では、ボタンをクリックすることで4桁のランダムな検証コードを生成するjsの具体的なコード...
ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...
js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...
垂直方向では、ヘッダーの配置を上、中央、下に設定できます。基本的な構文構文Top は上、Middle...
今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...
1. SSHリモート管理SSH はセキュア チャネル プロトコルであり、主にリモート ログイン、リモ...
目次1. PXCの紹介1.1 PXC の紹介1.2 PXC の特徴と利点1.3 PXCの限界と欠点1...
1. 概要Docker イメージを作成するには、次の 3 つの方法があります。 Docker コミッ...
目次1. これは2. この点を修正する1. call() メソッド2. apply() メソッド要約...
SELECT ステートメントの完全な構文は次のとおりです。 (7)選択 (8) DISTINCT ...
React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...
目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...