びくんびくんしながらコードを書く。

いしきひくい系エンジニアのらくがき帳

Vue.js 入門進捗

やり始めたら結構ハマってしまって楽しくやれているので進捗残すようにした。
フロント側は今まであまり触ってきていなかったからか新鮮な気持ちで進められるのが気持ち良い。
記事にどんな事やったよというのを書いていくけど後で体系的にまとめてみようと思う。

今日からディレクティブに入ってきた。 Vue.jsではhtmlにv-から始まる独自の属性を追加することでDOM操作を行ったりする。
これをディレクティブと呼ぶ。

今回はv-show, v-ifとv-bind

条件付きレンダリング: v-show, v-if

どちらも要素の表示非表示に利用する。

決定的な違いはv-showはdisplayプロパティの値を変更することで表示非表示を制御しているのに対し、v-ifはDOM要素を追加、削除することで表示非表示を制御するところ。

DOMの操作のほうがレンダリングコストが高くなるので、頻繁に変わるようなものはv-showを使ったほうが良いとされる。

ログインしているかどうかを判断し表示非表示を切り替えるような場合はv-ifのほうが好ましい。

クラスとスタイルのバインディング: v-bind

特定条件で見た目を変えたい場合に利用するディレクティブ

classやstyleの指定を行うことができる。
記法は下記通り
v-bind:属性名="データを展開した属性値"

v-bind:class

値が真のプロパティ名をclass属性値として反映する。
<p v-bind:class="{ hoge: true, huga: false}"></p>
上記場合はclass="hoge"となる。

例のようなテンプレート内で直接記述すると、アプリの規模が大きくなるにつれ、メンテナンス性が悪くなる。
そのため、算出プロパティ(computed)側に移すと見やすくなる。

v-bind:style

属性値のオブジェクトのプロパティがスタイルのプロパティに対応していて、インラインスタイルとして反映される。

式と組み合わせて使うことも可能。
classと同様算出プロパティ側で表現できる。

v-bindの省略記法

v-baind:属性名:属性名と省略することができる。

進捗は以上。

このままブログで進捗アウトプットするのもいいかなと思ったけどある程度まとめてアウトプットしたほうが良さそうだなと考え直したので今後はもうちょっとまとめてからアウトプットしようと思う。