Vue.jsの覚え書き
Vue.js勉強中。
まずはwebpackとかnodeとかそういうのは無視して、コンポーネント無しの素のVue.jsを勉強してます。
その過程の、ほんとに個人的な覚え書き。
ver. 2.6.10。
公式ガイド
https://jp.vuejs.org/v2/guide/
リファレンス
https://jp.vuejs.org/v2/api/
インスタンスプロパティ・メソッド
data
プロパティ。
オブジェクト(変数)及び関数が設定可能。
内部的には設定値に対するアクセサ。
this.[key]でアクセスできる。
created
インスタンス生成後、elマウント前に呼ばれる。
dataを参照した初期処理などに使う。
computed
メソッド(内部的にはオブジェクト)。
メソッドはgetter/setterで、デフォルトでは暗黙でgetterとして起動する。
メソッド内で参照したdataの変更がトリガとなり起動される。
オブジェクトである理由は、算出結果をキャッシュするため。
参照元の値が変わらない限り、何度呼ばれてもキャッシュ値を返却する。
watchよりも後に着火するようだ(検証した結果。公式には記載なし)。
computed: { aPlus: function(){ return thia.a + 1 } }
getter/setterを明示的にを定義することが可能。
computed: { aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } }
methods
メソッド。
汎用的に使うための関数であり、自由に設定可能。
this.[key]で使用できる。
ディレクティブ
v-if、v-show
監視値がtrueなら要素を表示し、falseなら非表示にする。
v-ifはDOMを生成/破棄する。
初期表示のコストは抑えられるが、切り替えるたびに生成コストがかかる。
v-showはDOMを生成した上でCSSで表示/非表示を切り替える。
v-ifに比べると初期表示のコストが重く、以降は軽い。
v-ifは連続した要素であることという条件付きで、v-else、v-else-ifが使える。
v-for
データと紐付けた要素をデータ数分描画する。
<div v-for="item in items"> {{ item.text }} </div>
要素がハッシュの場合、一意であるという条件付きでソートキーを指定できる。
ただしキーが無いデータがあった場合、その行は無視される。
<div v-for="item in items" :key="item.id"> {{ item.text }} </div>
v-cloak
Vueインスタンスがコンパイルされると消える。
CSSと組み合わせて、初期のHTMLにゴミを出さないようにするのに使う。
[v-cloak] { display: none; }
<div v-cloak> {{ message }} </div>
※v-cloakが無い場合、ページを表示した瞬間に内部コードの「{{ message }}」が一瞬写ってしまう。
v-model
フォーム入力バインディング
https://jp.vuejs.org/v2/guide/forms.html
HTML fromの入力値とVueインスタンスのdataを紐付ける。
当然ながらdataにkey必須。
computedに紐付ける事も出来るが、setterを書いていない場合受け先がないのでどこにも反映されなくなる。
trim(前後の空白削除)などの修飾子あり。
<input v-model.trim="msg">
おわり
テストでサイト作ってる時に、computedをずっと値だと思ってて混乱したのがこれ書いたきっかけです。
単画面(SPAではなく)のごくごく簡単なページならこれでできると思われます。
templateとかはファイル単一コンポーネント使い始めてからかな。。