Vueのあれこれ

基本的に公式ドキュメントから、自分の忘れやすいところを抜き出しています。

公式ドキュメント

v-if, v-show(cssのdisplay:none;)

一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

computed, method

vueのtemplateの中にmethodやcomputedを書くとそれがvue.jsによって監視されるんだけど、computedの場合は結果をキャッシュするからtemplateの中に何か処理を書く場合はcomputedを使用するのがおすすめやな
template以外で何か処理をする場合はmethodを使う

methods ビューモデルのメソッドを保持するオブジェクト。methodsに限らないがビューモデル内で定義されたメソッド内でのthisはビューモデル自身を指す
computed 動的なプロパティを生成するメソッドを持つオブジェクト。methodsとの違いとして呼び出しに括弧を用いずプロパティであるかのようにアクセス出来る。またgetやsetの定義が出来る

v-for

配列 / オブジェクト / 範囲の反復処理が可能

Vue が各ノードの識別情報を追跡できるヒントを与えるために、また、先ほど説明したような既存の要素の再利用と並び替えができるように、一意な key 属性を全てのアイテムに与える必要があります。この特別な属性は 1.x の track-by に相当するものですが、しかしこれは属性のように動作します。従って、これを動的な値に束縛するためには v-bind を使う必要があります (以下は省略構文を使ったものです):

Item.vue

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

可能なときはいつでも v-for に key を与えることが推奨されます。これは、繰り返される DOM の内容が単純でない、または性能向上を標準の動作に意図的に頼っていない場合に限ります。

filterに関して

Vue1.xと2.xで結構変わっている
http://qiita.com/yutaro23/items/095cf66038bb9fabc094

Input.vue

<div id="app">
  <input v-on:input="hoge = $event.target.value" />
  <p :class=hoge>{{ hoge | fuga }}</p>
</div>

main.js

new Vue({
	el: '#app',
  data: {
  	hoge: ''
  },
  filters: {
  	fuga: function(value) {
    	return value.toUpperCase();
    }
  }
});

#コンポーネント
https://jp.vuejs.org/v2/guide/components.html

グローバル登録

// 登録する
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// root インスタンスを作成する
new Vue({
  el: '#example'
})

グローバルに全てのコンポーネントを登録する必要はありません。別のコンポーネントのインスタンスオプションの components に登録することで、そのコンポーネントのスコープ内でのみ利用可能なコンポーネントを作成できます

ローカル登録

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> は親テンプレートでのみ有効になります
    'my-component': Child
  }
})

data は関数でなければいけません。

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})