Vue 2.0 Getting Started をやってみる

はい。Vue 2.0 の Getting Started やります。
後記：別に2.0に特化した内容ではありませんでした。2.0の勉強にはならないです。

今回はjsFiddleを使います。JSFiddle Hello World exampleが用意されているので、サインインしてから左上のforkを押して、ひな形として使いましょう。

Declarative Rendering

まず最初のサンプルです。

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

出力.

Hello Vue.js!

まずは基本。

• el属性でバインドするDOMエレメントを指定
• {{ message }}でVueオブジェクトのデータを表示（テキストノードにデータをバインド）
• messageの値を変更すると表示も変わる

setInterval(function(){
  app.message = new Date();
}, 1000);

Text Interpolation

つぎにDOMエレメントの属性にデータをバインドする例です。ここではツールチップを表示するtitle属性をmessageとバインドしています。

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date()
  }
})

マウスオーバすると以下のようにツールチップが表示されます。

• v-bind:属性名="データ名" でバインドする
• v-で始まる属性はVueの属性

Conditionals

続いて条件文

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

出力.

Now you see me

• v-ifの値がtrueならDOMエレメントが出力される
• seenがfalseになればDOMエレメントが取り除かれる
• これによりDOM構造にもデータをバインドできる

setInterval(function(){
  app3.seen = !app3.seen;
}, 1000);

• 新機能のTransitionタグで囲むと追加・削除時に自動的にCSSアニメーション用のCSSクラスが適応されます。(詳細)
  https://jsfiddle.net/kzqooq/625m413h/3/

Loop

つづいてループ。2.0から$indexが廃止になっているなど仕様が変わっているらしいですが、このサンプルではわかりませんね。

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

出力.

1. Learn JavaScript
2. Learn Vue
3. Build something awesome

• v-for でそのDOMエレメントをリストのアイテム分だけ出力します。
• リストにアイテムを追加すると表示も増えます。

setInterval(function(){
  i += 1;
  app4.todos.push({ text: "New " + i });
}, 1000);

Handling User Input

InputのイベントとVueオブジェクトのメソッドのバインディングです。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">
    Reverse Message
  </button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

クリック前

クリック後（reverseMessageが実行）

• v-on:イベント名="メソッド名"でバインド

Two-way binding

VueオブジェクトのデータとInputの値を２方向バインドします。Inputの値を変えるとデータも変更されます。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

入力値に合わせてデータが変更

• v-modelでバインドしたいデータを指定

Component

コンポーネントです。端的にいうと新しいHTMLタグを自作できます。

todo-itemタグの定義

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});

• タグの属性としてpropsに定義したtodoを持ちます。
• 属性には呼び出し側で値が設定され、コンポーネントに渡されます。
• テンプレート内では定義した属性を使用できます。
• 自作タグはテンプレートの内容で置き換わります。

コンポーネントの利用

<div id="app-7">
  <ol>
    <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
  </ol>
</div>

var app7 = new Vue({
  el: '#app-7',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

• v-bind:属性名でコンポーネントに値を渡します。
• 大きなコンポーネントは小さなコンポーネントを組みわあして作りましょう

以上です。2.0に特化した内容というわけでもなかったですね。