Vue ドキュメントの v-model ディレクティブの使用方法の詳細な説明

Vue は人気のあるフロントエンド フレームワークであり、その中心的な機能の 1 つはデータの応答性の高い更新であり、開発者がユーザー インターフェイスの管理と保守を容易にします。 Vue の重要な機能として、v-model ディレクティブはデータの双方向バインディングをより便利に実現できるため、ユーザー インターフェイスがより柔軟で使いやすくなります。 Vue ドキュメントで v-model ディレクティブの使用方法を詳しく見てみましょう。

1. v-model の概念

v-model 命令は、データの双方向バインディング、つまりユーザーが入力したデータをモデルに同期することを実現できます。モデル内のデータをビュー内に同期します。これは、Vue フレームワークの重要な機能の 1 つです。実装は次のとおりです:

1. 入力ボックス要素にバインドします

v-model ディレクティブは、入力ボックス (テキスト、パスワード、数値、など）、ラジオボタン（ラジオ）、チェックボックス（チェックボックス）、ドロップダウンボックス（選択）など。使用法は次のとおりです。

<input type="text" v-model="message">

上記のコードは、v-model 命令をバインドして双方向バインドを実現することにより、メッセージ変数をユーザー入力ボックスにバインドします。

2. カスタム コンポーネントへのバインド

ネイティブ フォーム入力要素に加えて、Vue は v-model ディレクティブをサポートするカスタム コンポーネントも提供します。これらのコンポーネントは、モデル オプションを使用して内部値をプロパティにマップし、入力イベントが発生したときにのみこの内部値を変更します。サンプル コードは次のとおりです。

Vue.component('my-component', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

コンポーネントを定義するときは、v-model ディレクティブが value 変数をコンポーネントにバインドできるように、props オプションを宣言する必要があります。コンポーネントの $emit 関数で入力イベントをトリガーし、ユーザーが入力した値をコンポーネント インスタンスに渡して、双方向バインディングを実現します。

2. v-model の使用法

1. テキスト入力

v-model コマンドをテキスト入力ボックス要素にバインドして、同期更新を実現できます。一般的な単一行のテキスト ボックスに加えて、Vue は以下に示すように、複数行のテキスト入力ボックス textarea のバインドもサポートしています。

<input type="text" v-model="message"> 
 

ラジオ ボタンとチェック ボックスの場合、v-model は選択された状態をバインドします。 ( true または false)、以下に示すように:

<input type="checkbox" v-model="checked">

2. ラジオ ボタン

v-model ディレクティブを使用してラジオ ボタン ボックスをバインドするには、次に示すように、オプションに対応する値が必要です。以下:

<input type="radio" v-model="picked" value="a">
<input type="radio" v-model="picked" value="b">

上記のコードの v-model は、選択された変数にバインドされています。各ラジオ ボタンの値は、オプションの値に対応します。選択された変数の値は、異なる場合にも更新されますオプションが選択されています。

3. チェック ボックス

v-model 命令を使用してチェック ボックスをバインドするには、以下に示すように、ブール型変数にバインドする必要があります。チェックボックスの選択状態はブール型変数にバインドされ、{{ selected }} は変数の値にバインドされます。

4. ドロップダウン ボックス

ドロップダウン ボックスは、以下に示すように、v-model 命令によるバインディングもサポートしています。上記のコードは選択された変数です。ドロップダウン ボックスの各オプションは値に対応します。

3. v-model の修飾子

修飾子は、v-model ディレクティブの後に v-model のデフォルトの動作を変更するために使用される拡張シンボルです。 Vue には複数の修飾子が用意されており、以下で 1 つずつ説明します。

1.lazy

デフォルトでは、v-model ディレクティブは入力イベントによってトリガーされる双方向のバインディングです。 、各各入力はモデルへのデータを更新し、遅延修飾子はこの動作を変更イベントに変更します。これにより、v-model はブラー イベントでのみデータをモデルに同期できるようになります。サンプル コードは次のとおりです。 :

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

2.number

「number」修飾子を含む v-model ディレクティブの場合、Vue は入力を Number 型に自動的に変換します。サンプル コードは次のとおりです:

<select v-model="selected">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

3.trim

「trim」修飾子を指定した v-model コマンドは、ユーザーが入力した最初と最後の空白文字を自動的にフィルターします。サンプル コードは次のとおりです:

<input type="text" v-model.lazy="message">

4. v-model の原理

v-model 命令の実装原理は、データ ハイジャック技術を使用することであり、ユーザー入力ボックスの value 属性が変更されると、v-model はその値を監視します。変更し、その変更をモデルに同期します。同時に、変更はビューにも同期されます。

1. データのハイジャック

Vue フレームワークは、Object.defineProperty メソッドを通じてデータをハイジャックし、モデル変数が読み取られると、get メソッドがトリガーされます。モデル変数に値が割り当てられると、set メソッドがトリガーされ、set メソッド内でモデルの値が更新され、データ更新の通知がトリガーされます。

2. ユーザー入力ボックスの DOM を監視する

ユーザー入力ボックスの値が変更されると、入力イベントがトリガーされ、入力イベントを受信した後、v-model 命令がトリガーされます。ユーザーが入力した値はモデルに同期されます。

3. モデルへの通知

モデルの値が変更されると、v-model ディレクティブは、ディレクティブにバインドされているフォーム要素に新しい値を渡し、ユーザー インターフェイスを更新します。

5. 概要

v-model ディレクティブは、Vue フレームワークの重要な機能の 1 つであり、フォーム データの双方向バインディングにおいて中心的な役割を果たします。 v-model を利用することで、Vue 開発における開発効率とコードの保守性を向上させることができます。同時に、v-model の修飾子と原則を習得することは、Vue フレームワークの動作メカニズムをより深く理解し、フロントエンド開発スキルを向上させるのに役立ちます。

以上がVue ドキュメントの v-model ディレクティブの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。