Vue.jsガイドを読んで理解したことのメモ。

Vue.jsとは

双方向データバインディングフレームワーク
Viewレイヤーだけを焦点に充てている
Angular.js や knockout.js をシンプルにしたもので、取っ掛かりやすい。
それぞの要素はコンポーネントとして扱うことができ、大規模システム向けに抽象化して記載可能。

⃣# Vue インスタンス

Vueインスタンス内のdataプロパティの中身が、外とやりとりされる。

⃣# Vue インスタンスのライフサイクル

created
beforeCompile
compliled
ready
beforeDestroy

データバインディング構文

テキスト

 {{ msg }}
 {{* msg }} //不変のメッセージ展開
 {{{ msg }}} // raw_htmlとしての展開(XSSなどの危険性あり)

フィルタ

 {{ msg | filterA | filterB }}

ディレクティブの引数

コロン(:)でディレクティブに引数を付与できる。
<a v-on:click="doSomething">

クラス(スタイル)バインディング

条件に応じてclassにバインドする対象を切り替える。
<div v-bind:class="[classA, isB ? classB : '']">

同様にスタイルにもバインディング可能

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

条件付きレンダリング

v-ifディレクティブで可能

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

複数タグに適応したい場合

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-showディレクティブも同様に表示を制御できるが、
こちらは常にレンダリングされ、displayCSSプロパティによって切り替えられる。
　=> とても頻繁に表示を切り替える必要があるものであれば、v-showのほうが向いている。

<h1 v-show="ok">Hello!</h1>

new Vue({
    data: { ok : true }
})

リストレンダリング

v-for でリスト要素を複数回レンダリングできる。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }

複数タグを繰り返したいときは同様にtemplateタグを使う。

フォーム入力バインディング

v-model を使用すると、双方向データバインディングが可能。

<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines" ></textarea>

lazy をつけると、通常はinputイベンドごとに動悸するが、changeイベントで動悸するようになる。

コンポーネント

カスタムコンポーネントの定義

<div id="example">
  <my-component></my-component>
</div>

Vue.component('my-component', {template: '<div>A custom component!!!</div>'})
var v = new Vue({
  el: '#example'
})

コンポーネントはpropsを使用して親から引数を受け取る。

<child msg="hello!"></child>

Vue.component('child', {
  props: ['msg'],
  template: '<span>{{ msg }}</span>'
})

親->子へのバインディングは通常one-wayバインディング

算出プロパティの挙動

算出プロパティは、結果の値をキャッシュし、内部で管理している依存関係の値が更新されない限り、キャッシュした値が使用される。

以下の場合だと、exampleの値はキャッシュされるので、Date.now()の値が毎回計算されるわけではない。

var vm = new Vue({
  data: {
    msg: 'hi'
  },
  computed: {
    example: function () {
      return Date.now() + this.msg
    }
  }
})

これをキャッシュしたくない場合は、cache: false をつければよい。

カスタムディレクティブ

自前でディレクティブを定義できる。bind, update, unbind などのフック関数を使用して振る舞いを定義する。

Vue.jsチュートリアルメモ