Open ryu-sugi opened 2 years ago
・CSSのプロパティ名はキャメルケース(2つ目以降の単語だけ先頭を大文字)で記述する。 → 例 background-color は backgroundColorと記述 ・複数のスタイルをHTMLまとめて指定する際、Vue.jsでは{fontSize: pSize color: pColor}のように半角カンマで区切る。
・クラス(class)属性にバインドする時もオブジェクト表記を使う。 →書式 <要素名 v-vind:class="{class名(キャメルケース) : class名を出力する条件式}"> →実行した条件式をdataオプションのプロパティに持たせて、プロパティ名を代替として記述するとシンプルになる。
・リストとは複数データを1つにまとめて扱いやすくしたもので、Javascriptでは配列を使って表す。 →使い方：「v-for」を用いて要素に配列データをバインドする。 →書式：<要素名 v-for="配列要素を代入する変数名 in 配列の変数名">・・・</要素名> ・配列を構成する1件分のデータを配列要素と呼ぶ →書式 [オブジェクト, オブジェクト, オブジェクト] ・1つ1つのオブジェクトはオブジェクト表記に従い{}で囲む →[{プロパティ名 : 値}, {プロパティ名 : 値}, {プロパティ名 : 値} ] ・v-forの1つ目の変数は繰り返しごとに自動的に配列要素が代入される為、1つめの変数名は何でも良い →但し、慣習的に「item, element, ele」のように配列要素と分かる変数名が使われる。
・DOMノードのズレを防ぐ為にVue.js公式ガイドで「key」という名前の属性を用いてバインドする事を強く推奨されている。
・v-if および v-showを使うことで、条件付きで要素の出力や表示が行える。 →「v-fi」: 条件式が成立する場合だけ要素を出力する。→書式 <要素名 v-if="条件式">条件成立時の出力</要素名>
・条件2つ以上 = v-else-if, v-else を使う。 →書式 <要素名 v-if="条件式">条件成立時の出力</要素名> →書式 <要素名 v-else>条件式不成立時の出力</要素名>
・「v-show」: 指定条件成立時のみ表示、不成立時は表示なし → 書式 <要素名 v-show="条件式">条件成立時のみ表示する内容</要素名>
スタイル(style)属性にバインドする (3/10の続き)
・CSSのプロパティ名はキャメルケース(2つ目以降の単語だけ先頭を大文字)で記述する。 → 例 background-color は backgroundColorと記述 ・複数のスタイルをHTMLまとめて指定する際、Vue.jsでは{fontSize: pSize color: pColor}のように半角カンマで区切る。
クラス(class)属性にバインド(結びつける)する
・クラス(class)属性にバインドする時もオブジェクト表記を使う。 →書式 <要素名 v-vind:class="{class名(キャメルケース) : class名を出力する条件式}"> →実行した条件式をdataオプションのプロパティに持たせて、プロパティ名を代替として記述するとシンプルになる。
リストデータをバインドする
・リストとは複数データを1つにまとめて扱いやすくしたもので、Javascriptでは配列を使って表す。 →使い方：「v-for」を用いて要素に配列データをバインドする。 →書式：<要素名 v-for="配列要素を代入する変数名 in 配列の変数名">・・・</要素名> ・配列を構成する1件分のデータを配列要素と呼ぶ →書式 [オブジェクト, オブジェクト, オブジェクト] ・1つ1つのオブジェクトはオブジェクト表記に従い{}で囲む →[{プロパティ名 : 値}, {プロパティ名 : 値}, {プロパティ名 : 値} ] ・v-forの1つ目の変数は繰り返しごとに自動的に配列要素が代入される為、1つめの変数名は何でも良い →但し、慣習的に「item, element, ele」のように配列要素と分かる変数名が使われる。
keyの指定 (リストデータバインドにおいて)
・DOMノードのズレを防ぐ為にVue.js公式ガイドで「key」という名前の属性を用いてバインドする事を強く推奨されている。
条件付きでの描画
・v-if および v-showを使うことで、条件付きで要素の出力や表示が行える。 →「v-fi」: 条件式が成立する場合だけ要素を出力する。→書式 <要素名 v-if="条件式">条件成立時の出力</要素名>
複数の条件式を指定する(v-if, v-else-if, v-else)
・条件2つ以上 = v-else-if, v-else を使う。 →書式 <要素名 v-if="条件式">条件成立時の出力</要素名> →書式 <要素名 v-else>条件式不成立時の出力</要素名>
条件式が成立する場合だけ要素を表示「v-show」
・「v-show」: 指定条件成立時のみ表示、不成立時は表示なし → 書式 <要素名 v-show="条件式">条件成立時のみ表示する内容</要素名>