面接でよく聞かれる Vue 修飾子 13 個

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 をよろしくお願いいたします。

以下もご興味があるかもしれません: