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 つのことを行う必要があります。
では、まずスクリプト内でこれをプロパティとして宣言しましょう。 エクスポートデフォルト{ 小道具: { モデル値: 文字列、 } } 次に、テンプレートを作成し、値を 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内の他の関連記事もぜひご注目ください! 以下もご興味があるかもしれません:
|
>>: Nginx をインストールして複数のドメイン名を設定する方法
質問通常の開発では、プロジェクトを Tomcat にデプロイする場合、プロジェクトを war パッケ...
Docker コンテナのネットワーク障害に対する 6 つの解決策注: 以下の方法は、コンテナ内のパブ...
データベースを構築してプログラムを書くとき、日付と時刻の使用は避けられません。データベースには、ti...
この記事では、ブラインド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体...
1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...
この記事では、例を使用して、MySQL サーバーのスレッド数を表示する方法について説明します。ご参考...
トレーニングのための一連のプロジェクト反応+ts内容は少ないですが、フックのカプセル化、ts ジェネ...
1. データベースとデータベースインスタンスMySQL の研究では、データベースとデータベース イン...
HTML 入力属性値属性value 属性は、入力フィールドの初期値を指定します。 <フォーム...
この記事では、星空アニメーションを実現するための高度な CSS3 LESS のサンプルコードを次のよ...
コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...
マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...
以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...
Dockerのインストール依存パッケージをインストールする sudo yum install -y ...
MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...