Vue.js基礎まとめ１(自分用)

Mustache構文(マスタッシュ構文)

new Vue({
  el: '#app',
  data: {
    message: 'my note'
  }
});

el：Vue.jsを適用する要素の指定
　「id="app"」を指定した要素内をVue.jsが有効となる
data：データオブジェクト
　HTML側から参照しバインディングする。下記のような形「{{…}}(Mustache構文)」で変数名を囲むことでバインディングされる。

<p>{{ message }}</p>

ディレクティブ

属性の操作、分岐、繰り返しなどの機能を組み込む際に使用する。基本的に「v-～」から始まります。下記の「v-text」は指定された式「message」の値で置き換えます。

<p v-text="message"></p>

・v-bindディレクティブ

Mustache構文はHTML 属性の内部で使用することはできません。下記はNGです。

<a href="{{ url }}"></a> // NG

v-bindディレクティブはHTML 属性にも使用可能です。

<a v-bind:href="url"></a> // OK

算出プロパティ

既存のプロパティに対して演算した結果を取得するためのgetterです。

<div id="app">
  <p>{{ fullName }}</p> // 「sato-hiroto」と表示される
</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'hiroto',
    lastName: 'sato'
  },
  computed: {
    fullName : function() {
      return this.lastName + '-' + this.firstName;
    }
  }
});

メソッド

メソッドを使っても算出プロパティと同じような事が可能。下記はcomputedをmethodsへ変更、呼び出し部分に「()」を加えただけです。

<div id="app">
  <p>{{ fullName() }}</p> 　　// 「()」を追加
</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'hiroto',
    lastName: 'sato'
  },
  methods: { 　　　　　　　　　　// computed → methodsへ変更
    fullName : function() {
      return this.lastName + '-' + this.firstName;
    }
  }
});

・算出プロパティとメソッドの違い
　１．算出プロパティは引数を取ることが出来ません。
　　　メソッドではなくあくまでプロパティなので、計算式付きの変数のようなものです。

　２．算出プロパティはキャッシュされる
　　　算出プロパティの結果はキャッシュされて一時保存されます。算出プロパティは依存しているプロパティ(上のコードでは「this.lastName」もしくは「this.firstName」)が変更された場合、再度評価されます。

　３．使い分け
　　　基本的にメソッドでも大抵のことは実現可能ですが、メソッドは再描画のたびに実行されてしまうので無駄な処理が増えてしまう場合があります。算出プロパティはキャッシュ機能と依存プロパティ変更時に再評価されるので無駄な実行がされません。なのでまず算出プロパティでの実装を基本とし、ボタン押下時の処理などはメソッドにするのがよいかもしれません。