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 とワークベンチのインストールと設定のグラフィックチュートリアル
1. どの 3 つの形式ですか?それぞれ、gif、jpg、png です。画像ファイルを最適化すること...
目次序文: 1. インデックスメソッドを作成する2. インデックスを作成するために必要な権限序文: ...
目次結果を一目で見るハート効果デジタルスクロールアニメーションアニメーションのように結果を一目で見る...
レンダリング下の画像のような効果を実現したい場合は、読み続けてアニメーション画像に直接進んでください...
公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...
Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...
MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...
目次1. appIDの申請と設定1. appidの取得方法2. AppIDの設定2. 基本的なユーザ...
必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...
undefined JavaScript では、値が undefined かどうかを判断したい場合は...
1. pom.xmlに次の依存関係を追加します。 <依存関係> <groupId&...
目次序文1. エンドポイント2. 接続ハンドラ3. コヨーテ4. コンテナ責任チェーンパターン序文T...
MySql 自動切り捨て例の詳細な説明友人が質問しました。プロジェクト内で挿入または更新ステートメン...
ログイン dockerログインdocker login コマンドを実行し、ユーザー名、パスワード、メ...
Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...