5/24 Vue.js

自分なりの解釈

仮想DOMを使用

どのHTMLタグにJavaScriptの処理が付与されているか判別しやすい

idやclassを使用して要素を取り込む必要がないので変更が容易

v-bindで複数の属性を付与したい場合は、dataで属性名をキーに持つオブジェクトを作成してv-bind="オブジェクト名"でkeyの属性とvalueの属性値を設定できる。

v-show=falseの場合にdisplay:noneを付与することで非表示にできる。

判定式が必要ない場合はv-ifよりv-showの方が良い？

v-for="item in items"　itemsは配列またはオブジェクト名

itemsの中身がitemに一つずつ展開されて繰り返し処理の中で使用できる。

v-for="(value, key, index) in items"とするとキーとインデックス番号も使用できる。

配列やオブジェクトを変更する可能性がある場合はvue側でデータの追跡ができるように:keyで一意の値を渡す必要がある。

v-text=textContainer 渡したdataをテキストとして挿入

v-html=innerHTML HTMLのタグをタグとして処理してくれる。

v-cloak cssで[v-cloak]{}を設定することでVueの読み込み中の処理を記述できる。

[v-cloak]{display: none}とすることで読み込みが終わるまでは非表示となる。

これを使用することで読み込み前に一瞬マスタッシュ構文が表示されるのを防ぐことができる。