Vue の基本的な手順の例のグラフィック説明

Vue の基本的な手順の例のグラフィック説明

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"

  • v-on: 最後に時間名を追加します
  • バインディングイベントのイベント名を指定する必要があります

ランニング効果を見てみましょう

2. 糖衣構文

v-bind ディレクティブは : と省略でき、v-on も @ と省略できることがわかっています。上記は次のように省略できます。

<button @click="追加"> + </button>
<button @click="sub"> - </button>

3. イベントパラメータ

  • パラメータなしメソッド

上記のケースはすべてパラメータなしです。メソッドにパラメータがない場合は、呼び出し時に括弧を省略できます。

add メソッドはパラメータを取らず、次の 2 つの方法で呼び出すことができます。

次のようにコードをコピーします。
 <button @click="add"> + </button> または <button @click="add()"> + </button>

どちらの書き方も許容されます。

  • パラメータ付きメソッド

メソッドにパラメータがある場合、次のケース

<スクリプト>
 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. イベント修飾子

  • stop: バブリングイベントを停止するにはevent.stopPropagation()を呼び出します。

次のコードを見てください

<!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>

これにより、イベントがバブルするのを防ぎます。

  • prevent: デフォルトイベントを防止するためにevent.preventDefault()を呼び出す

メソッド内でメソッドを定義します

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>
  • (keyCode | keyAlias): コールバックは、特定のキーによってイベントがトリガーされた場合にのみトリガーされます。

キーボードのキーイベントを聞いてみましょう --- キーボードの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: コールバックを1回だけトリガーします

.once イベントを追加しました。最初のクリックのみが応答し、後続のクリックは応答しません。

2. v-if ディレクティブ

条件付き判断、3つの指示があります

  • v-if
  • v-else-if
  • v-else

事例を見る

<!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 の違い

  • v-if: true: 要素を追加、false: 要素を削除
  • v-show: true: スタイル display:block を追加; false: スタイル display:none を変更

それで、どうやって選びますか?

  • 表示と非表示の切り替えが頻繁に行われる場合は、v-showを使用します。
  • スイッチが1つしかない場合はv-ifを使用する

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",

  • 記述方法: :key
  • 値とは何でしょうか? ここでの値は、値に 1 つずつ対応している必要があります。したがって、これを直接 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>
  • プッシュ（末尾から要素を追加---レスポンシブ
  • pop: 末尾から要素を削除する --- レスポンシブ
  • shift : 上から要素を削除 --- レスポンシブ
  • unshift : 上から要素を追加 --- レスポンシブ
  • スプライス: 要素の追加、要素の変更、要素の削除 --- レスポンシブ

テストを通じて、これらの方法はすべて応答性があることがわかりました。

したがって、要素を変更/削除したい場合は、効果がすぐにわかるように 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つの操作が含まれています

  • 1つはv-bind: 入力属性にデータをバインドする
  • もう1つはv-onです。入力ボックスの入力イベントを呼び出して、データをリアルタイムで変更します。

事例: 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; を設定します。

結論は：

<input type="text" v-model="メッセージ">

同等

<input type="text" v-bind:value="message" v-on:input="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>

趣味の配列はデータで定義されています。そしてこの配列はチェックボックスの支払いボックスの各項目にバインドされています。これにより、次の効果が得られます。

違い：

  • チェックボックス1つに対応するデータはbool型です
  • 複数のチェックボックスに対応するデータは配列型です

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:[]

効果を見てみましょう

要約:

  • 単一選択: 選択できる値は 1 つだけです。v-model は 1 つの値にバインドされます。
  • 複数選択: 複数の値を選択できます。v-model は配列にバインドされています。

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 3.0 カスタムディレクティブの使い方
  • Vueカスタム命令とその使用方法の詳細な説明
  • Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法
  • Vue.js ソースコード解析のカスタム手順の詳細な説明
  • ボタンの権限判定を実装するためのVueカスタムv-has命令
  • Vue 3 カスタムディレクティブ開発の概要
  • Vue3.0 カスタム命令（命令）知識の要約
  • 8つの非常に実用的なVueカスタム指示
  • Vueのカスタム命令の詳細な説明
  • Vue命令の実装原理の分析

<<:  docker-swarm をベースにした継続的インテグレーション クラスタ サービスの構築の詳細な説明

>>:  InnoDBのインデックスページ構造、挿入バッファ、適応ハッシュインデックスについての簡単な説明

推薦する

Linux で iostat コマンドを使用するチュートリアル

序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...

Docker - コンテナマウントディレクトリを変更する3つの方法のまとめ

方法 1: 設定ファイルを変更する (docker サービスを停止する必要があります) 1. doc...

MySQL の pid とソケットの詳細な説明

目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...

MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)

目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...

Dockerのヘルス検出メカニズム

コンテナの場合、最も単純なヘルスチェックはプロセス レベルのヘルスチェックであり、プロセスが稼働して...

Linux 環境に nginx をインストールするチュートリアル

目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...

一般的な JavaScript メモリ エラーと解決策

目次1. タイマー監視2. イベント監視3.オブザーバー4. ウィンドウオブジェクト5. DOM参照...

Nginx ロケーション ディレクティブ URI マッチング ルールの詳細な概要

1. はじめにロケーション命令は、http モジュールのコア構成です。事前に定義された URL マッ...

vue3で注意すべき2つのポイントを詳しく解説:セットアップ

目次vue2の場合vue3ではセットアップに関する注意事項セットアップライフサイクルは、before...

CSSで制御可能な点線を実装する方法

序文CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実...

MySQL で浮動小数点データを文字データに変換するときに起こりうる問題の詳細な説明

序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...

IIS web.config でクロスドメイン アクセスを設定する方法

要件: ページに画像を表示する必要がありますが、さまざまな理由により、画像はサーバー 2 にあります...

HTML iframe と frameset の違い_PowerNode Java Academy

導入1.<iframe> タグ: iframe は、ページ内に内部フレームを生成するイン...

JavaScript はモーダルボックスのドラッグ効果を実現します

これはモーダル ボックスのドラッグのケースです。ここで実装する関数は次のとおりです。 1. ポップア...

MySQL 5.7.10 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...