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

面接でよく聞かれる 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue のイベント修飾子: once、prevent、stop、capture、self、passive
  • Vueイベント修飾子キャプチャの使用の詳細な説明
  • Vue における .capture と .self の違いと予備的な理解

<<:  MySQL 5.7.17 とワークベンチのインストールと設定のグラフィックチュートリアル

>>:  Nginx タイムアウト設定の詳細な説明

推薦する

画像ファイルの形式とその選択方法

1. どの 3 つの形式ですか?それぞれ、gif、jpg、png です。画像ファイルを最適化すること...

MySQLインデックスの作成について知っておくべきこと

目次序文: 1. インデックスメソッドを作成する2. インデックスを作成するために必要な権限序文: ...

アニメーション効果のようなVueトランジションの例

目次結果を一目で見るハート効果デジタルスクロールアニメーションアニメーションのように結果を一目で見る...

Echarts は 1 つのグラフ内で異なる X 軸を切り替える機能を実装します (サンプル コード)

レンダリング下の画像のような効果を実現したい場合は、読み続けてアニメーション画像に直接進んでください...

MySQL 5.7.29 + Win64 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...

ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...

MySQLデータストレージプロセスパラメータの詳細な例

MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...

uni-app WeChatアプレット認証ログイン実装手順

目次1. appIDの申請と設定1. appidの取得方法2. AppIDの設定2. 基本的なユーザ...

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...

JavaScriptの信頼性の低い未定義

undefined JavaScript では、値が undefined かどうかを判断したい場合は...

IDEA Maven プロジェクトで Tomcat をデバッグ モードで実行する詳細なチュートリアル

1. pom.xmlに次の依存関係を追加します。 <依存関係> <groupId&...

Webリクエストと処理のTomcatソースコード分析

目次序文1. エンドポイント2. 接続ハンドラ3. コヨーテ4. コンテナ責任チェーンパターン序文T...

MySql 自動切り捨て例の詳細な説明

MySql 自動切り捨て例の詳細な説明友人が質問しました。プロジェクト内で挿入または更新ステートメン...

Dockerリポジトリの一般的なコマンドの詳細な説明

ログイン dockerログインdocker login コマンドを実行し、ユーザー名、パスワード、メ...

Telnet は Alpine イメージの busybox-extras に移動されました

Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...