3/15 Vue.js 学習議事録

フォーム入力バインディング (データと入力を同期する)

・コンポーネントが持つデータとユーザーがフォームコントロール(テキストボックスやラジオボタンなど)から入力する内容を双方にバインド(結びつける)機能。 → 書式 <要素名 v-model="プロパティ名">

v-modelを使ったフォームコントロールの初期値

・HTMLフォームコントロール初期設定に必要なvalue属性、check属性、selected属性は無視される。 → v-modelを指定したフォームコントロールはVueの監視下に置かれ→バインドしているコンポーネントデータが優先される。 →そのため、初期値はコンポーネント側で設定しておく必要がある。

テキストボックスへのフォーム入力バインディング(改行できない入力欄)

→ 書式 →日本語入力をリアルタイムに反映するには、「inputイベントハンドラを利用する」。

テキストエリアへのバインド(改行できる入力欄)

→ 書式 ### → テキストエリアへ初期値を描画する場合はv-modelは使用しなくて良いが、入力内容をコンポーネント側に伝えたい場合は「v-model」を使う。

チェックボックス

・単体と複数を扱うかで、データ扱いが少し変わる。

単体チェックボックス

→書式・「v-model」でバインドしたプロパティ真偽値(true or false)が設定される。・チェックをつけるとtrue、つけなければfalseが代入される。　→プロパティをそのまま描画すると文字列でtrueかfalseが表示される　→ その為、真偽値ではなく文字列をバインドする方法が用意されている。　　→チェックボックスに特殊属性「true-value」と「false-value」を用いると真偽値の代わりに任意の文字列をバインドでき　　　る。

複数チェックボックス

・複数のチェックボックスをグループ化する際は、「グループに対して1つのプロパティをバインドする」 → バインドしたプロパティは、チェックをつけたチェックボックスのvalue値を配列要素とする配列になる。(チェックをつけたモノだけが配列として数えられる) → ・単体チェックボックスは真偽値(true or false)。・複数チェックボックスは文字列型の配列。 → 書式 <input type="checkbox" v-model="プロパティ名" value="値1"> → 書式 <input type="checkbox" v-model="プロパティ名" value="値2"> → 書式 <input type="checkbox" v-model="プロパティ名" value="値3">

ryu-sugi / lesson_vue