Vue v-model 関連の知識のまとめ

Vue v-model 関連の知識のまとめ

​v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バインディングを提供する Vue ディレクティブです。

これは Vue 開発における単純な概念ですが、v-model の真の力を理解するには時間がかかります。

このチュートリアルを終えると、v-model のさまざまな使用例を理解し、独自のプロジェクトでそれを使用する方法を学ぶことができます。

準備はできたか?

私も。コードを書いてみましょう。

v-modelとは何ですか?

先ほど説明したように、v-model はテンプレート コードで使用できるディレクティブです。ディレクティブは、DOM をどのように処理するかを Vue に指示するテンプレート トークンです。

v-model は、テンプレートの値とデータ プロパティの値の間に双方向のデータ バインディングを作成することを Vue に伝えます。

v-model を使用する一般的なユースケースは、フォームと入力を設計する場合です。これを使用すると、DOM 入力要素が Vue インスタンス内のデータを変更できるようになります。

テキスト入力で v-model を使用する簡単な例を見てみましょう。

<テンプレート>
 <div>
  <入力 
   タイプ='テキスト'
   v-model='値'
  />
  <p> 値: {{ value }} </p>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 データ() {
  戻る {
   値: 'Hello World' 
  }
 }
}
</スクリプト>

テキスト入力に入力すると、データ属性が変化するのを確認できます。

v-model と v-bind の違いは何ですか?

v-bind ディレクティブは、v-model と頻繁に切り替えられます。

両者の違いは、v-model が双方向のデータバインディングを提供することです。

私たちの場合、これは、データが変更されると入力が変更され、入力が変更されるとデータが変更されることを意味します。

ただし、v-bind はデータを一方向にのみバインドします。

これは、アプリケーション内で明確な一方向のデータ フローを作成する場合に便利です。ただし、v-model と v-bind のどちらを選択するかは注意が必要です。

v-model 修飾子

Vue は、v-model の機能を変更できる 2 つの修飾子を提供します。

それぞれをこのように合計したり、つなげたりすることもできます。

<入力 
 タイプ='テキスト'
 v-model.trim.lazy='値'
/>

。怠け者

デフォルトでは、v-model は入力イベントごとに Vue インスタンスの状態 (データ プロパティ) と同期されます。これには、集中力の獲得、喪失などが含まれます。

lazy 修飾子は v-model を変更し、変更イベントの後にのみ同期するようにします。

これにより、v-model が Vue インスタンスとの同期を試みる回数が減り、場合によってはパフォーマンスが向上する可能性があります。

。番号

通常、入力は数値を入力した場合でも自動的に文字列に変換されます。

値が数値として扱われるようにする 1 つの方法は、.number 修飾子を使用することです。

Vue のドキュメントによると、入力が変更され、parseFloat() が新しい値を解析できない場合、入力の最後の有効な値が返されます。

<入力 
 タイプ='数値'
 v-model.number='値'
/>

。トリム

ほとんどのプログラミング言語の trim メソッドと同様に、.trim 修飾子は値を返す前に先頭または末尾の空白を削除します。

カスタムコンポーネントでの v-model の使用

さて、フォーム/入力内での v-model の基本がわかったので、v-model の興味深い使用法、つまりコンポーネント間の双方向データ バインディングの作成について見てみましょう。

Vue では、データ バインディングには主に 2 つのステップがあります。

親ノードからデータを渡す

子コンポーネントからイベントを発行して親コンポーネントを更新する

カスタム コンポーネントで v-model を使用すると、プロパティを渡してディレクティブでイベントを処理できます。

<カスタムテキスト入力 v-model="値" />
同じです
<カスタムテキスト入力 
  :modelValue="値"
  @update:modelValue="値 = $event"
/>

さて、これはどういう意味でしょうか?

v-model フォームの例を続けて、CustomTextInput.vue というカスタム テキスト入力を使用しましょう。

v-model を使用して渡される値のデフォルト名は modelValue です。例ではこれを使用します。

ただし、次のようにカスタムモデル名を渡すことはできます。

<カスタムテキスト入力 v-model:name="値" />

注: カスタムモデル名を使用すると、発行されたメソッドの名前が更新されます: name

以下は、それを要約した Vue ドキュメントの図です。

カスタムコンポーネントでの v-model の使用

親コンポーネントはすでに設定されているので、子コンポーネントからアクセスしてみましょう。

CustomTextInput.vue では、次の 2 つのことを行う必要があります。

  • v-modelの値をpropとして受け入れる
  • 入力が変更されたら更新イベントをトリガーする

では、まずスクリプト内でこれをプロパティとして宣言しましょう。

エクスポートデフォルト{
 小道具: {
  モデル値: 文字列、
 }
}

次に、テンプレートを作成し、値を modelValue プロパティに設定し、入力イベントが発生するたびに update:modelValue を介して新しい値を発行します。

<テンプレート>
 <div>
  <label> 名 </label>
  <入力 
   タイプ='テキスト'
   プレースホルダー='入力'
   :value='モデル値'
   @input='$emit("update:modelValue", $event.target.value)'
  />
 </div>
</テンプレート>

v-modelの使用

よし!

v-model を使用して 2 つのコンポーネント間でデータをバインドする基本的な例について説明しました。

v-model ディレクティブのより高度な使用方法を見てみましょう。

コンポーネントで v-model を複数回使用する

v-model は、コンポーネントごとに 1 回だけ使用されることに制限されません。

v-model を複数回使用するには、各プロパティに一意の名前を付け、子コンポーネントで正しくアクセスするだけです。

lastName に 2 番目の v-model を追加しましょう。

親コンポーネントでは次のようになります。

<テンプレート>
 <div>
  <カスタムテキスト入力 
   v-model='値' 
   v-model:lastName='姓'
  />
  <p> 値: {{ value }} </p>
  <p> 姓: {{ lastName }} </p>
 </div>
</テンプレート>

<スクリプト>
'./CustomTextInput.vue' から CustomTextInput をインポートします。

エクスポートデフォルト{
 コンポーネント:
  カスタムテキスト入力、
 },
 データ() {
  戻る {
   値: 'Matt'、
   姓: 'マリボジョック'
  }
 }
}
</スクリプト>

次に、子コンポーネント内で次の操作を行います。

<テンプレート>
 <div>
  <label> 名 </label>
  <入力 
   タイプ='テキスト'
   :value='モデル値'
   プレースホルダー='入力'
   @input='$emit("update:modelValue", $event.target.value)'
  />
  <label> 姓 </label>
  <入力 
   タイプ='テキスト'
   :value='姓'
   プレースホルダー='入力'
   @input='$emit("update:lastName", $event.target.value)'
  />
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 小道具: {
  lastName: 文字列、
  モデル値: 文字列、
 }
}
</スクリプト>

Vモデルのカスタム修飾子

前述したように、Vue にはいくつかの修飾子が組み込まれています。しかし、いつかは、私たち自身のものを追加したいと思うでしょう。

入力からすべての空白を削除する修飾子を作成するとします。これを「ノースペース」と呼びます。

<カスタムテキスト入力 
 v-model.no-whitespace='値' 
 v-model:lastName='姓'
/>

入力コンポーネントでは、prop を使用して修飾子をキャプチャできます。カスタム修飾子の名前は nameModifiers です。

小道具: {
 lastName: 文字列、
 モデル値: 文字列、
 モデル修飾子: {
  デフォルト: () => ({})
 }
}

さて、最初に行う必要があるのは、カスタム メソッドを使用するように @input ハンドラーを変更することです。これを emittingValue と呼ぶことができ、編集中のプロパティの名前とイベント オブジェクトを受け入れます。

<label> 名 </label>
<入力 
   タイプ='テキスト'
   :value='モデル値'
   プレースホルダー='入力'
   @input='emitValue("modelValue", $event)'
/>

emittingValue メソッドでは、$emit を呼び出す前に修飾子をチェックします。空白なし修飾子が true の場合、値を親に送信する前に変更できます。

出力値(propName, evt) {
 val = evt.target.value とします
 if (this.modelModifiers['no-whitespace']) {
  val = val.replace(/\s/g, '')
 }
 this.$emit(`update:${propName}`, val)
}

結論は

v-model について何か新しいことを学べたことを願っています。

フォームやデータの入力などの基本的な使用例では、v-model は非常に単純な概念です。ただし、カスタム コンポーネントを作成し、より複雑なデータを処理し始めると、v-model についてさらに詳しく知ることができます。

以上がVue v-model関連の知識をまとめた詳しい内容です。Vue v-modelについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • Vue の v-model の使用例
  • Vue v-model 使用状況分析
  • Vue v-modelの詳細な説明
  • Vue ループ内の複数の入力バインディングは v-model インスタンスを指定します
  • v-model のバインディング操作を vue で選択する
  • vue.js は、v-model がデフォルトの選択を無効にする問題を解決します。
  • VUE テーブルは動的にデータ列を追加し、新しく追加されたデータは編集できません (v-model にバインドされたデータはリアルタイムで更新できません)
  • Vue v-model コンポーネントのカプセル化 (ポップアップ ウィンドウ コンポーネントに類似)
  • vue.js カスタム コンポーネントを使用して v-model 双方向データ バインディングを実装するためのサンプル コード
  • Vue親コンポーネントはv-modelコードを通じて子コンポーネントの値を受け取ります。
  • Vue 入力 v-model クリア操作

<<:  MySQL 学習ノート: データ エンジン

>>:  Nginx をインストールして複数のドメイン名を設定する方法

推薦する

MySQL 自動インクリメント ID のオーバーサイズ問題のトラブルシューティングと解決策

導入Xiao A がコードを書いていたところ、DBA Xiao B が突然、「急いでユーザー固有情報...

外部ファイル(js/vbs/css)をインポートするときに文字化けを回避する方法

ページ内にはjs、cssなどの外部ファイルが導入されており、外部ファイルのエンコードが現在のページフ...

MACOS で MySQL ルートパスワードを忘れた場合の解決策

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

MySQL 5.7.21 履歴データディレクトリからデータを復元するチュートリアルの解凍バージョン

状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...

MySQLのバッファプールの詳細な説明

MySQL のデータはディスクに書き込む必要があることは誰もが知っています。ディスクの読み取りと書き...

NGINXがウェブサイトのPV、UV、独立IPをカウントする方法の詳細な説明

Nginx: PV、UV、独立IPウェブサイトを作成する人なら誰でも、ウェブサイトのPV、UV、その...

editplus の Zen コーディング例コードの説明

たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...

MySQLの行数カウントに関する簡単な説明

各テーブルの行数をカウントするために使用される MySQL count() 関数は、誰もがよく知って...

mysql での rpm インストールの詳細な説明

インストールとアンインストールの表示 # rpm -qa | grep mysql を表示 # アン...

背景位置パーセンテージ原則の詳細な説明

今日、誰かがコードを調整するのを手伝っていたとき、次のようなスタイルを見つけました。 背景位置: 5...

MySql8.0 のトランザクション分離レベルエラーの問題を解決する

目次MySql8.0 トランザクション分離レベルエラーの表示質問コマンドは次のように変更されますMy...

Linux の一般的なテキスト処理コマンドと vim テキストエディタ

今日は、いくつかの一般的なテキスト処理コマンドとvimテキストエディタを紹介します。 3日目 - 一...

CSS の div の下の同じ行にある複数の要素を右揃えにする

方法1:フロート:右さらに、フローティングにするとレイアウトがよりコンパクトになります(隙間がなくな...

SQL 実践演習: オンライン モール データベースの製品カテゴリ データ操作

オンラインショッピングモールデータベース - 商品カテゴリデータ操作(I)プロジェクトの説明電子商取...