自分用めも

初心者ちっくなプログラムネタを中心に、自分用の覚え書きをメモっていくための場所です。

Vue.jsの覚え書き

Vue.js勉強中。
まずはwebpackとかnodeとかそういうのは無視して、コンポーネント無しの素のVue.jsを勉強してます。
その過程の、ほんとに個人的な覚え書き。
ver. 2.6.10。

公式ガイド
https://jp.vuejs.org/v2/guide/
リファレンス
https://jp.vuejs.org/v2/api/

インスタンスプロパティ・メソッド

el

指定DOMとVueインスタンスを紐付ける。
CSSセレクタが利用可能。#idとか.classとか。

data

プロパティ。
オブジェクト(変数)及び関数が設定可能。
内部的には設定値に対するアクセサ。
this.[key]でアクセスできる。

created

インスタンス生成後、elマウント前に呼ばれる。
dataを参照した初期処理などに使う。

mounted

インスタンス生成後、elマウント後に呼ばれる。
ここでdataを更新するとイベントハンドラが着火されることに注意。

watch

メソッド。
keyと同名のdataを監視して、
valueに設定した関数(またはオブジェクト内のコールバック)を実行する。

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">

v-bind

省略形::
DOMの属性とVueインスタンスのdataを紐付ける。
computedに紐付ける事も可能。

<img :src="imageSrc">

クラスバインディング
isRedがTureなら、redがバインドしたDOMのclass属性に設定される。

<div :class="{ red: isRed }"></div>

まとめてバインド

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

v-on

省略形:@
イベントハンドラを設定する。
着火対象にはmethodsの他、直接JavaScriptを書くことも可能。

<button @click="doThis"></button>

おわり

テストでサイト作ってる時に、computedをずっと値だと思ってて混乱したのがこれ書いたきっかけです。
単画面(SPAではなく)のごくごく簡単なページならこれでできると思われます。
templateとかはファイル単一コンポーネント使い始めてからかな。。