Vue.js プロパティまとめ

これはなに

Vue.jsのプロパティとコンストラクタのオプションをまとめたメモ。

dataプロパティ

データのオブジェクトを指定。テンプレートから参照できる。
dataプロパティはリアクティブで、値が変わるたびにVue.jsが検知して表示などを切り替えることができる。

オブジェクトもしくは関数を設定できるが、あくまでもデータそのものをおくべきで、値を処理する関数や、計算する関数はmethodsやcomputedに設定したほうが良い。

data: {
  name: 'hoge',
  price: 1000
}

<p>{{ name }}</p> <!-- hoge -->
<p>{{ price }}</p> <!-- 1000 -->

フィルター(filters)

テキストフォーマット処理を適用する仕組み。日付のフォーマットや数値のフォーマットなど。

filters: {
  yen_filter(value) {
    return value + '円'
  } 
}

<p>{{ 1000 | yen_filter }}</p> <!-- 1000円 -->

算出プロパティ(computed)

データに何らかの処理を加えたものをプロパティにしたい場合に使用する。
例えば、複雑な計算式の記述や、同じ計算式をテンプレートの複数箇所などに記述することを避けたい場合など。
データが変更されない限り、一度計算した結果をキャッシュする特徴をもつため、計算した結果を再利用したい場合に使用すると良い。
基本的に引数を渡すことはできない。this(Vueのインスタンス自身)経由で参照するのが良い？

data: {
    value1: 100,
    value2: 200,
  },
computed: {
  some_computed () {
     return (this.value1 + this.value2) * 100
  }
}

<p>{{ some_computed }}</p> <!-- 30000 -->

メソッド(methods)

データの変更やサーバーにhttpリクエストを送る際に用いる。
computedと異なり、キャッシュされない。