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)
}