Vueフォームバインディングとコンポーネントの詳細な説明

1. 双方向データバインディングとは

Vue.js は MV VM フレームワークであり、双方向データバインディングを意味します。データが変更されるとビューも変更され、ビューが変更されるとデータも同期的に変更されます。これが Vue.js の真髄です。
いわゆる双方向データバインディングは UI コントロール用である必要があることに注意してください。非 UI コントロールでは双方向データバインディングは使用されません。一方向データバインディングは、状態管理ツールを使用するための前提条件です。 vue x を使用すると、データフローも単方向になり、双方向データバインディングと競合します。

1. 双方向データバインディングを実装する必要があるのはなぜですか?

Vue.js では、vuex を使用すると、データは実際には一方通行になります。双方向データバインディングと呼ばれるのは、UI コントロールを使用するためです。フォームを処理する私たちにとって、Vue.js の双方向データバインディングは特に使いやすいです。つまり、この 2 つは相互に排他的ではありません。グローバルデータフローで単方向を使用すると追跡に便利ですが、ローカルデータフローで双方向を使用すると操作が簡単で簡単です。

2. フォームで双方向データバインディングを使用する

v-model ディレクティブを使用して、フォームと要素に双方向のデータバインディングを作成できます。コントロールの種類に基づいて、要素を更新するための正しい方法が自動的に選択されます。その魔法にもかかわらず、v-model は本質的には単なる構文糖です。ユーザー入力イベントをリッスンしてデータを更新し、極端なシナリオに対して特別な処理を実行する役割を担います。
注意: v-model は、すべてのフォーム要素の value、checked、selected 属性の初期値を無視し、常に Vue インスタンスのデータをデータソースとして使用します。 JavaScript 経由でコンポーネントのデータオプションに初期値を宣言する必要があります。

1. 1行テキスト

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>
<div id="アプリ">
  入力テキスト: <input type="text" v-model="message" value="hello">{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
      メッセージ：""
    }
  });
</スクリプト>
</本文>
</html>

2. 複数行テキスト

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>
<div id="アプリ">
  複数行テキスト: <textarea v-model="pan"></textarea>&nbsp;&nbsp;複数行テキストは: {{pan}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
      パン:「こんにちは、こんにちは！」
    }
  });
</スクリプト>
</本文>
</html>

3. 単一のチェックボックス

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>

<div id="アプリ">
  単一のチェックボックス:
  <input type="チェックボックス" id="チェックボックス" v-model="チェック済み">
  &nbsp;&nbsp;
  <label for="チェックボックス">{{チェック済み}}</label>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
      チェック済み:false
    }
  });
</スクリプト>
</本文>
</html>

4. 複数のチェックボックス

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>

<div id="アプリ">
  複数のチェックボックス:
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="jack">ジャック</label>
  <input type="checkbox" id="join" value="参加" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="join">ジャック</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  &nbsp;&nbsp;
  <label for="mike">マイク</label>
  <span>チェックされた値: {{checkedNames}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
      チェックされた名前:[]
    }
  });
</スクリプト>
</本文>
</html>

5. ラジオボタン

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>

<div id="アプリ">
  ラジオボタン <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">1つ</label>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">2</label>
  <span>選択された値: {{picked}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
      選んだもの:「2」
    }
  });
</スクリプト>
</本文>
</html>

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

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>
<div id="アプリ">

  ドロップダウンボックス:
  <v-model="pan">を選択します。
    <option value="" disabled>---選択してください---</option>
    <option>あ</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </選択>
  <span>値:{{pan}}</span>



</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
      パン:"A"
    }
  });
</スクリプト>
</本文>
</html>

注: v-model 式の初期値はどのオプションとも一致せず、要素は「未選択」としてレンダリングされます。 iOS では、この場合 iOS が変更イベントをトリガーしないため、ユーザーは最初のオプションを選択できなくなります。したがって、上記のように、無効なオプションには空の値を指定することをお勧めします。

3. コンポーネントとは何ですか?

コンポーネントは再利用可能な Vue インスタンスであり、基本的には再利用可能なテンプレートのセットです。JSTL のカスタムタグ、Thymeleal の th:fragment、その他のフレームワークに似ています。通常、アプリケーションはネストされたコンポーネントツリーとして構成されます。

たとえば、ヘッダー、サイドバー、コンテンツ領域などのコンポーネントがあり、それぞれにナビゲーションリンク、ブログ投稿などの他のコンポーネントが含まれている場合があります。

1. 最初のVueコンポーネント

注意：実際の開発では、以下の方法でコンポーネントを開発するのではなく、vue-cli を使用して vue テンプレートファイルを使用して作成および開発します。以下の方法は、コンポーネントが何であるかを理解するのに役立つだけです。
Vue.component() メソッドを使用して、次の形式でコンポーネントを登録します。

<div id="アプリ">
 <パン></パン>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
  //まずコンポーネントを登録する Vue.component("pan",{
    
    テンプレート:'<li>こんにちは</li>'

  });
  //Vue を再インスタンス化する
  var vm = 新しい Vue({
    el:"#アプリ",
  });
</スクリプト>

例:

Vue.component(): コンポーネントを登録する
pan: カスタムコンポーネント名
テンプレート: コンポーネントテンプレート

2. props属性を使用してパラメータを渡す

上記のようなコンポーネントを使用するのは意味がないので、コンポーネントにパラメータを渡す必要があります。ここで、 props 属性を使用する必要があります。
注: デフォルトのルールでは、props 属性の値は大文字にできません。

<!DOCTYPE html>
<html lang="ja" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>

</head>
<本文>

<div id="アプリ">
  <!-- コンポーネント、コンポーネントに渡される値: props -->
  <cpn v-for="item in items" v-bind:itemChild="item"/>
</div>


<!--1. vue.js をインポートします-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<スクリプト>
  // Vueコンポーネントを定義するコンポーネントVue.component("cpn",{
    プロパティ: ['itemChild'],
    テンプレート: `<li>{{itemChild}}</li>`
  })
  var vm = 新しい Vue({
    el: '#app',
    データ： {
      アイテム: [『ワンピース』、『ナルト』、『ソードアート・オンライン』]
    }
  });
</スクリプト>
</本文>
</html>

例:

v-for="item in items": Vueインスタンスで定義されたitemsという名前の配列を走査し、同数のコンポーネントを作成します。
v-bind:itemChild="item": トラバースされた項目をコンポーネントの props で定義された item という名前のプロパティにバインドします。= 記号の左側の itemChild は props で定義されたプロパティ名で、右側の itemChild は items 内のトラバースされた項目の値です。

以上がVueフォームバインディングとコンポーネントの詳細な説明です。Vueフォームバインディングとコンポーネントの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません: