面接でよく聞かれる 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 タイムアウト設定の詳細な説明

推薦する

Nginx サーバーで URL リンクを設定する方法

LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...

JavaScriptは検証コードと検証のランダム生成を実装します

この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...

ハイパーリンクに関するいくつかの質問

<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...

JavaScriptはボタンをクリックして4桁のランダムな検証コードを生成します

この記事の例では、ボタンをクリックすることで4桁のランダムな検証コードを生成するjsの具体的なコード...

MySQLワームレプリケーションの基本知識

ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

HTML テーブル マークアップ チュートリアル (43): テーブル ヘッダーの VALIGN 属性

垂直方向では、ヘッダーの配置を上、中央、下に設定できます。基本的な構文構文Top は上、Middle...

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

Centos 7.4 でリモート アクセス制御を実装する方法

1. SSHリモート管理SSH はセキュア チャネル プロトコルであり、主にリモート ログイン、リモ...

MySQL PXC クラスターの構築方法

目次1. PXCの紹介1.1 PXC の紹介1.2 PXC の特徴と利点1.3 PXCの限界と欠点1...

カスタム Docker イメージを作成するための Dockerfile の詳細な説明と CMD と ENTRYPOINT 命令の比較

1. 概要Docker イメージを作成するには、次の 3 つの方法があります。 Docker コミッ...

JavaScript プロトタイプオブジェクトの this ポイント問題の詳細な説明

目次1. これは2. この点を修正する1. call() メソッド2. apply() メソッド要約...

MySQL SELECT実行順序の簡単な理解

SELECT ステートメントの完全な構文は次のとおりです。 (7)選択 (8) DISTINCT ...

React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...