Vue (発音は /vjuː/、view に似ています) は、ユーザー インターフェイスを構築するためのプログレッシブ フレームワークです。他の大規模なフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てているため、使い始めるのが簡単なだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツールチェーンとさまざまなサポートライブラリと組み合わせると、Vue は複雑なシングルページ アプリケーションを完全に実行できるようになります。 1. v-on指令1. 基本的な使い方v-on はイベント監視命令です。その簡単な使い方を見てみましょう。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <h2>{{カウンター}}</h2> <button v-on:click="add"> + </button> <button v-on:click="sub"> - </button> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { カウンター: 0 }, メソッド: { 追加() { this.counter++ }, サブ() { this.counter -- } } }); </スクリプト> </本文> </html> クリックイベントをボタンにバインドします。v-on:click = "add"
ランニング効果を見てみましょう 2. 糖衣構文v-bind ディレクティブは : と省略でき、v-on も @ と省略できることがわかっています。上記は次のように省略できます。 <button @click="追加"> + </button> <button @click="sub"> - </button> 3. イベントパラメータ
上記のケースはすべてパラメータなしです。メソッドにパラメータがない場合は、呼び出し時に括弧を省略できます。 add メソッドはパラメータを取らず、次の 2 つの方法で呼び出すことができます。
どちらの書き方も許容されます。
メソッドにパラメータがある場合、次のケース <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { 数値1: 10, 数値2: 100 }, メソッド: { 印刷(メッセージ) { console.log("print" + メッセージ) } } }); </スクリプト> 呼び出し方法 1: 呼び出し時に括弧内にパラメータはありません。 <div id="アプリ"> <button @click="print()"> 印刷</button> </div> これは、メソッドに渡されたパラメータが未定義であるためです。 呼び出し方法2: 括弧なし <div id="アプリ"> <button @click="print"> 印刷</button> </div> この方法と方法 1 の違いは、メソッドを呼び出すための括弧が省略されていることです。 するとどんな効果が得られるのでしょうか? ご覧のとおり、現時点では未定義ではなく、MouseEvent マウス イベントです。 なぜでしょうか? 実際、マウスがボタンをクリックすると、ページは自動的にイベントを生成します。パラメータが渡されない場合、イベントはパラメータとして自動的に渡されます。このイベントを呼び出す必要がある場合は、メソッドパラメータを入力して、イベントパラメータを明示的に受け取ることができます。 呼び出し方法3: パラメータに通常のパラメータとイベントパラメータの両方が含まれる これは$eventを呼び出すときに使用します <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <button @click="print"> ボタン1 </button> <button @click="print1('aaa')"> ボタン2 </button> <button @click="print1('aaa', $event)"> ボタン3 </button> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { 数値1: 10, 数値2: 100 }, メソッド: { 印刷(メッセージ) { console.log("print" + メッセージ) }, print1(メッセージ、イベント){ console.log("print" + イベント + ", メッセージ:" + メッセージ) }, print2(メッセージ、イベント) { console.log("イベント:" + イベント + "、メッセージ:" + メッセージ) } } }); </スクリプト> </本文> </html> 効果を見てみましょう メッセージとイベントの両方が渡されます。 4. イベント修飾子
次のコードを見てください <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="app" @click="divClick"> <button @click="btnClick">ボタン</button> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: 「こんにちは」 }, 方法:{ divクリック(){ console.log("divClick") }, btnClick(){ console.log("btnClick") } } }); </スクリプト> </本文> </html> divにはbtnがあり、divにはクリックイベントがあり、btnにもクリックイベントがあります。btnをクリックすると、2つのメソッドがコールバックされますか?効果を見てみましょう。 確かに、btn の click() メソッドが呼び出され、div の click() メソッドも呼び出されます。これはイベント バブリング メカニズムであり、通常はページ上でこのような状況は避けたいものです。そこで、イベント バブリングを防ぐメソッドを記述します。 しかし、Vueではstop修飾子を使用することでこの問題を解決できます。btnボタンのクリックイベントにstop修飾子を追加します。 <div id="app" @click="divClick"> <button @click.stop="btnClick">ボタン</button> </div> これにより、イベントがバブルするのを防ぎます。
メソッド内でメソッドを定義します stopDefaultEventBtn(){ console.log("stopDefaultEventBtn") } 呼び出すときに、送信フォーム ボタンを定義します。フォームには独自の価格上昇時間があることがわかっています。ボタンをクリックすると、フォームで指定されたアクション アドレスにジャンプします。 <div id="app" @click="divClick"> <button @click.stop="btnClick">バブリングイベントを停止</button><br/><br/> <フォームアクション="http://www.baidu.com"> <input type = "submit" value="デフォルトイベントを禁止する"></input> </フォーム> </div> ここで、submit の自動送信イベントは使用せず、それを停止してカスタムの stopDefaultEventBtn イベントを使用します。 <div id="app" @click="divClick"> <button @click.stop="btnClick">バブリングイベントを停止</button><br/><br/> <フォームアクション="http://www.baidu.com"> <input type = "submit" @click.prevent="stopDefaultEventBtn" value="デフォルトイベントを禁止する"></input> </フォーム> <!-- 送信には独自のモード送信イベントがありますが、通常はデフォルトの送信時間ではなく、カスタム イベントを使用します。 --> </div> このとき、メソッドを呼び出すと、action で指定したイベントに自動的にジャンプするのではなく、クリック イベントに入ることがわかります。 しかし、問題があります。click で指定したイベントが呼び出されますが、イベントのバブリングがまだあります。同時に、div のクリック イベントも呼び出されます。これは簡単です。バブリングを防ぐイベントを追加するだけです。 <div id="app" @click="divClick"> <button @click.stop="btnClick">バブリングイベントを停止</button><br/><br/> <フォームアクション="http://www.baidu.com"> <input type = "submit" @click.prevent.stop="stopDefaultEventBtn" value="デフォルトイベントを禁止する"></input> </フォーム> <!-- 送信には独自のモード送信イベントがありますが、通常はデフォルトの送信時間ではなく、カスタム イベントを使用します。 --> </div>
キーボードのキーイベントを聞いてみましょう --- キーボードのEnterボタンのキーイベントを聞いてみましょう <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <input type="text" @keyup.enter="keyup" /><br/><br/> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: 「こんにちは」 }, 方法:{ キーアップ(){ console.log("キーアップ") } } }); </スクリプト> </本文> </html> @keyup.enter="keyup" keyupイベントの後に.enterを追加するだけです
.once イベントを追加しました。最初のクリックのみが応答し、後続のクリックは応答しません。 2. v-if ディレクティブ条件付き判断、3つの指示があります
事例を見る <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <!-- 開発中にステータスに遭遇することがよくあります。1: は有効、2: は無効、3: は削除済みを意味します --> <div id="アプリ"> <h2 v-if = "status == 1"> 有効</h2> <h2 v-else-if = "status == 2"> 無効にする</h2> <h2 v-else> 削除</h2> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { ステータス: 1 } }); </スクリプト> </本文> </html> このケースは非常に単純なので、これについては説明しません。1つ言えることは、通常は2つのケース、つまり非常に単純な2つのケースだけがあり、v-ifとv-elseを使用するということです。状況が非常に複雑な場合は、コードにv-else-ifをたくさん書くことはお勧めできません。読みにくくなるからです。条件判断をメソッドに入れるか、計算用に計算し、最終的に結果を返す必要があります。 例: ログインインターフェースでアカウントログインとメールログインを切り替える <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <!-- 開発中にステータスに遭遇することがよくあります。1: は有効、2: は無効、3: は削除済みを意味します --> <div id="アプリ"> <label v-if="userLogin">アカウントログイン<input type="text" placeholder="アカウントを入力してください"> </ラベル> <label v-else>メールログイン<input type="text" placeholder="メールアドレスを入力してください"> </ラベル> <button @click="userLogin = !userLogin" >切り替え</button> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { ユーザーログイン: true } }); </スクリプト> </本文> </html> ここでは、変数userLoginを定義します。ユーザーがログインしているかどうか、デフォルトはtrueです。2つのラベルとボタンを定義し、スイッチボタンをクリックして2つのラベルを切り替えます。効果は次のとおりです。 しかし、ここで問題があります。コンテンツを入力した後、テキストボックスを切り替えても、コンテンツは消えません。以下に示すように
アカウントログインで 1234 を入力した場合、メールログインに切り替えてもクリアされないことがわかりました。これらは 2 つのテキスト ボックスですが、値はどのようにして引き継がれたのでしょうか?
これは、Vue が DOM をレンダリングするときに、パフォーマンスの問題を考慮して、毎回新しい要素を作成するのではなく、既存の要素を可能な限り再利用するためです。これが Vue の仮想 DOM です。 上記のように、以前は DOM 要素がブラウザ ページに直接レンダリングされていました。しかし、Vue を追加すると、Vue は最初に DOM 要素をキャッシュし、それらを仮想 DOM としてキャッシュするのに役立ちます。 v-if ディレクティブを使用する場合、2 つの div 要素を同時に実行することはできません。最初の div 要素がレンダリングされた後、2 番目の div をレンダリングするときに、類似の要素が見つかるため、vue はコピーをキャッシュします。else を実行すると、vue は要素は同じであるが、コンテンツの一部のみが異なると判断し、異なる部分をレンダリングし、同じ部分は変更されません。入力したコンテンツは比較範囲内にないため、持ち越されます。
<div id="アプリ"> <label v-if="userLogin">アカウントログイン<input type="text" placeholder="アカウントを入力してください" key="user"> </ラベル> <label v-else>メールログイン<input type="text" placeholder="メールアドレスを入力してください" key="email"> </ラベル> <button @click="userLogin = !userLogin" >切り替え</button> </div> 2 つのキーが同じ場合、仮想 DOM は 1 つのコピーをキャッシュします。2 つのキーが異なる場合、仮想 DOM は 2 つのコピーをキャッシュします。今度はその効果を見てみましょう。 3. v-showコマンドv-showは非常にシンプルで、要素を非表示/表示するだけです <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <!-- 開発中にステータスに遭遇することがよくあります。1: は有効、2: は無効、3: は削除済みを意味します --> <div id="アプリ"> <h2 v-if = "isShow"> 有効にする</h2> <h2 v-show = "isShow"> 有効にする</h2> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { isShow: 真 } }); </スクリプト> </本文> </html> どちらも表示できます。isShow=falseに設定すると、どちらも非表示になりますが、非表示の結果は異なります。HTMLコードを見てみましょう。 コード内にはuseShowオブジェクトのみがあり、display:noneスタイルが追加されていましたが、useIfオブジェクトはありませんでした。つまり、直接削除されていました。 要約: v-if と v-show の違い
それで、どうやって選びますか?
4. v-for ディレクティブトラバーサルには、トラバーサル配列とトラバーサルオブジェクトの2つの形式があります。 1. 配列の走査<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 「http://www.w3.org/TR/html4/loose.dtd」より <html> <ヘッド> <title>タイトル</title> </head> <本文> <div id="アプリ"> <ul> <li v-for="item in languages">{{item}}</li> <li v-for="(item, index) 言語内"> {{index}}--{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { 言語: ["java", "php", "python"] } }); </スクリプト> </本文> </html> 添字なしで配列を走査する場合は、次のように記述できます。 <li v-for="item in languages">{{item}}</li> 下付き文字がある場合は、このように書くことができます <li v-for="(item, index) 言語内"> {{index}}--{{item}}</li> 2. オブジェクトのトラバースオブジェクトをトラバースする方法は3つあります
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 「http://www.w3.org/TR/html4/loose.dtd」より <html> <ヘッド> <title>タイトル</title> </head> <本文> <div id="アプリ"> <p> オブジェクトの値のみを表示します </p> <ul> <li v-for="item in students">{{item}}</li> </ul> <p> オブジェクトのキーと値を表示します </p> <ul> <li v-for="(value, key) in students">{{key}} -- {{value}}</li> </ul> <p> オブジェクトのIDを表示します </p> <ul> <li v-for="(value, key, index) in students">{{index}} -- {{key}} -- {{value}} </li> </ul> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { 学生: 名前:「zhangsan」、 年齢: 20, 性別:「男性」 } } }); </スクリプト> </本文> </html> 具体的な書き方は上記の通りですが、キーと値を表示する場合は値が前、キーが後ろになるので注意が必要です。 3. コンポーネントの主な属性v-forを使用する場合は、対応する要素に:key属性を追加することが公式に推奨されています。 キー属性を追加する理由は何ですか? 詳細については、こちらの記事をご覧ください:www.jianshu.com/p/4bd5e745ce95 :key を追加すると、内部の計算パフォーマンスが向上します。では、どのように追加すればよいでしょうか? <ul> <li v-for="item in students" :key="item">{{item}}</li> </ul> 上記の例のように使用する場合: :key="item",
4. 配列内のどのメソッドが応答しますか?実際、配列を走査して配列の値を変更するときは、通常、添字の変更を使用します。 のように: this.languages[0] = "aaaa"; しかし、Vue で添え字の変更が行われると何が起こるか見てみましょう。 言語は変更されているのに、ページは変更されていないことがわかりました。実際、変更されていました。 したがって、下付き文字を介して要素を直接変更することは応答性がないという結論に達しました。 配列の他の方法についてはどうでしょうか?次の例を参照してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 「http://www.w3.org/TR/html4/loose.dtd」より <html> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <ul> <li v-for="(item, index) 言語内"> {{index}}--{{item}}</li> </ul> <br><br/><br/><br/><br/> <button @click="pushMethod">プッシュ</button> <button @click="popMethod">ポップ</button> <button @click="shiftMethod">シフト</button> <button @click="unShiftMethod">シフト解除</button> <button @click="要素を更新"></button> <button @click="spliceMethod">スプライス</button> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { 言語: ["java", "php", "python", "go", "c言語"] }, メソッド: { プッシュメソッド(){ this.languages.push("その他の言語") }, ポップメソッド() { this.languages.pop() }, シフトメソッド() { this.languages.shift() }, アンシフトメソッド() { this.languages.unshift("その他の言語") }, 要素を更新します(){ this.languages[0] = "aaaa"; }, スプライスメソッド() { /** * スプライスを実行できます* 1. 要素スプライスを追加します(n番目の要素から開始、0、「将来の言語1」、「将来の言語2」) * 2. 要素の連結を削除(n番目の要素から始めて、複数の要素を削除) * 3. 要素を変更する: 実際には、要素を削除してからスプライスを追加することを意味します (要素から始めて、要素を変更し、要素の内容を変更します) */ // 要素を削除 //this.languages.splice(1, 1) // 要素を変更する //this.languages.splice(1, 2, "pthoon language", "go language") // 要素を追加 this.languages.splice(1, 0, "Future Language 1", "Future Language 2") } } }); </スクリプト> </本文> </html>
テストを通じて、これらの方法はすべて応答性があることがわかりました。 したがって、要素を変更/削除したい場合は、効果がすぐにわかるように splice を使用することをお勧めします。 5. v-model ディレクティブ1. v-modelの基本的な使い方v-model ディレクティブは、フォーム要素と配列要素間の双方向バインディングを実装するために使用されます。
事例: テキストボックス入力の双方向同期 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <フォーム> <input type="text" placeholder="入力してください" v-model="メッセージ"> </フォーム> メッセージの内容は次のとおりです: {{message}} </div> <script src="../js/vue.js"></script> <スクリプト> アプリを新しいVue({ el: "#app", データ: { メッセージ: 「こんにちは」 } }); </スクリプト> </本文> </html> 変数 message を定義し、入力ボックスで v-model="message" を使用して、この変数との双方向バインディングを実行します。 2. Vモデルの原則実際、v-modelには2つの操作が含まれています
事例: vモデルの2段階操作のシミュレーション まず、テキスト ボックスにデータ内のメッセージの値を表示するには、v-bind:value を直接使用できることがわかります。このようにして、メッセージの値を変更すると、テキスト ボックスが自動的に応答します。 <input type="text" placeholder="入力してください" :value="メッセージ"> これはテキストボックス内のデータに応答するためのものです。では、テキストボックスの変更された内容をデータと同期するにはどうすればよいでしょうか? テキストボックスの入力イベントを使用します: v-on:input <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <input type="text" placeholder="入力してください" :value="メッセージ" @input="change"> <p>メッセージの内容は次のとおりです:{{message}}</p> </div> <script src="../js/vue.js"></script> <スクリプト> アプリを新しいVue({ el: "#app", データ: { メッセージ: 「こんにちは」 }, メソッド: { 変更(イベント) { this.message = イベントターゲットの値; } } }); </スクリプト> </本文> </html> ここで、@input は入力イベントをテキスト ボックスにバインドするために使用されます。change() メソッドには括弧がないため、デフォルトのパラメーター event が自動的に渡されます。イベント パラメーターを明示的に設定する場合は、@input="change($event)" を試してください。 次に、change メソッドで、this.message = event.target.value; を設定します。 結論は:
同等
2. ラジオでのVモデルの使用事例: 性別の選択 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <フォーム> <input type="radio" name="sex" id="male" value="男" v-model="sex">男<input type="radio" name="sex" id="female" value="女" v-model="sex">女</form> 現在選択されているのは: {{sex}} </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: "こんにちは", 性別:「男性」 } }); </スクリプト> </本文> </html> v-model を使用した後は、name 属性を使用する必要はありません。デフォルトでは、同じ v-model 値を持つラジオはグループ化されます。 3. チェックボックスでのv-modelの使用1) チェックボックス 事例: 契約に同意しますか? <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <label for="同意コンテンツ"> <input type="checkbox" name="agreeContent" id="agreeContent" value="契約に同意する" v-model="agreeContent">統一契約<br/>現在選択されている: {{agreeContent}} </ラベル> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: "こんにちは", 同意内容: false } }); </スクリプト> </本文> </html> 契約に同意しますか: データ内の agreeContent: 値は true または false です。true はテキスト ボックスが選択されていることを意味し、false はチェックされていないことを意味します。 注: ラベル付けの利点 入力はラベルで囲まれています。テキストをクリックしても選択やキャンセルができるのが利点です。ラベルに配置しない場合はチェックボックスを選択する必要があります。 2) チェックボックス チェックボックスの値は配列です <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <h2>ラジオボックス</h2> <label for="同意コンテンツ"> <input type="checkbox" name="agreeContent" id="agreeContent" value="契約に同意する" v-model="agreeContent">契約に同意する<br/>現在選択されている: {{agreeContent}} </ラベル> <br/><br/><br/><br/><br/> <h2>チェックボックス</h2> <フォーム> <input type="checkbox" name = "hobby" value="Table Tennis" v-model="hobbies">卓球<input type="checkbox" name = "hobby" value="Basketball" v-model="hobbies">バスケットボール<input type="checkbox" name = "hobby" value="Football" v-model="hobbies">フットボール<input type="checkbox" name = "hobby" value="Volleyball" v-model="hobbies">バレーボール<br/>現在選択されている趣味は: {{hobbies}} </フォーム> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: "こんにちは", 同意内容: false、 趣味:[] } }); </スクリプト> </本文> </html> 趣味の配列はデータで定義されています。そしてこの配列はチェックボックスの支払いボックスの各項目にバインドされています。これにより、次の効果が得られます。 違い:
4. selectでのv-modelの使用1) 1つのオプションを選択する <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <v-model を選択="selectOne"> <option id="apple" value="Apple" >アップル</option> <option id="banana" value="バナナ" >バナナ</option> <option id="strawberry" value="Strawberry" >イチゴ</option> <option id="grape" value="グレープ" >グレープ</option> </選択> <br/> <p>現在選択されているもの: {{selectOne}}</p> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: "こんにちは", 性別:「男性」、 selectOne:"Apple" } }); </スクリプト> </本文> </html> 注: ラジオボタンのドロップダウンボックスで、選択要素にv-modelと記述する必要があります。 2) 複数のオプションを選択する <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <br/> <br/> <br/> <v-model="favoriteFrite" を複数選択> <option id="apple" value="Apple" >アップル</option> <option id="banana" value="バナナ" >バナナ</option> <option id="strawberry" value="Strawberry" >イチゴ</option> <option id="grape" value="グレープ" >グレープ</option> </選択> <br/> <p>現在選択されているもの: {{favoriteFrite}}</p> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: "こんにちは", お気に入りフリット:[] } }); </スクリプト> </本文> </html> 複数選択を使用する場合は、選択に multiple を追加して複数選択として設定します。 データでは、それを配列として設定する必要があります。たとえば、favoriteFrite:[] 効果を見てみましょう 要約:
6. v-model 修飾子1. 遅延修飾子 デフォルトでは、v-model は双方向でリアルタイムに同期されます。しかし、変更のたびにリアルタイムで応答したくない場合もあります。その場合は、lazy 修飾子を使用できます。 v-model.lazy、lazyを使用した後、Enterキーを押すか、テキストボックスのフォーカスが外れ、つまり、コンテンツを同期します <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <input type="text" v-model.lazy="メッセージ"/> <p>メッセージの内容は次のとおりです:{{message}}</p> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: "こんにちは", カウント: 0, 名前:"zhangsan" } }); </スクリプト> </本文> </html> 効果を見る 2. 数値修飾子 通常、数字のみを入力できるテキストボックスを書くときは、<input type="number" v-model = "count">と書きます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <input type="number" v-model = "count"> <p>カウントの種類: {{count}} --- {{typeof count}}</p> </div> <script src="../js/vue.js"></script> <スクリプト> var アプリ = 新しい Vue({ el: "#app", データ: { メッセージ: "こんにちは", カウント: 0, 名前:"zhangsan" } }); </スクリプト> </本文> </html> しかし、これを記述するとどのようなタイプのカウント値が得られるのでしょうか?カウントのタイプを確認するには{{typeof count}}を使用します。以下に示すように count の型は number ではなく String であることがわかります。count を数値にするにはどうすればよいでしょうか? 以下のように、v-model.number="count" を使用します。 <input type="number" v-model.number = "count"> 3. トリム修飾子 通常、テキスト ボックスにテキストを入力するときに、誤ってスペースを入力してしまうことがあります。トリム修飾子を使用すると、テキスト ボックスの左右のスペースを削除できます。 <input type="text" v-model.trim="名前"> これで、画像と例を交えた Vue の基本的な手順に関するこの記事は終了です。Vue の基本的な手順に関するより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: docker-swarm をベースにした継続的インテグレーション クラスタ サービスの構築の詳細な説明
>>: InnoDBのインデックスページ構造、挿入バッファ、適応ハッシュインデックスについての簡単な説明
Nginxは正規表現を使用して、ワイルドカードドメイン名をディレクトリに自動的に一致させます。 Ng...
この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...
MySQL クエリ結果をcsvにエクスポートするには、通常、php を使用して mysql に接続し...
1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...
目次animate() アニメーションメソッドアニメーションキューイングdelay() メソッドアニ...
目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...
目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...
1. はじめに要件は、特定の時間範囲内で、1 時間ごとのデータと前の 1 時間ごとのデータの差と比率...
コンストラクタの借用この手法の基本的な考え方は単純です。サブタイプ コンストラクター内からスーパータ...
この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。...
要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...
1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...
1. this.$router.push() 1. ビュー <テンプレート> <d...
背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...
この記事では、省、市、地区の3段階選択を実現するためのjsの具体的なコードを紹介します。具体的な内容...