Vue 2.0 Getting Started をやってみる

http://vuejs.org/guide/#Getting-Started

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

今回はjsFiddleを使います。[JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/4tpzm3e1/)が用意されているので、サインインしてから左上のforkを押して、ひな形として使いましょう。

#Declarative Rendering
https://jsfiddle.net/kzqooq/625m413h/

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

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

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

``` 出力.
Hello Vue.js!
```

まずは基本。

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

``` js
setInterval(function(){
  app.message = new Date();
}, 1000);
```
https://jsfiddle.net/kzqooq/625m413h/7/

#Text Interpolation
https://jsfiddle.net/kzqooq/625m413h/1/

つぎに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()
  }
})
```

マウスオーバすると以下のようにツールチップが表示されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/92aeba65-e435-bac6-247e-3ce45f048f37.png)

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

#Conditionals
https://jsfiddle.net/kzqooq/625m413h/2/

続いて条件文

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

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

``` 出力.
Now you see me
```

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

``` js
setInterval(function(){
  app3.seen = !app3.seen;
}, 1000);
```
https://jsfiddle.net/kzqooq/625m413h/8/

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

#Loop
https://jsfiddle.net/kzqooq/625m413h/4/

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

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

``` js
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エレメントをリストのアイテム分だけ出力します。
* リストにアイテムを追加すると表示も増えます。

``` js
setInterval(function(){
  i += 1;
  app4.todos.push({ text: "New " + i });
}, 1000);
```
https://jsfiddle.net/kzqooq/625m413h/6/

#Handling User Input
https://jsfiddle.net/kzqooq/625m413h/9/

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

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

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

クリック前
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/3176f060-4260-11db-5bee-cda46068aebb.png)

クリック後（reverseMessageが実行）
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/6353655c-0d39-282d-a1a8-63e4d570952f.png)

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

#Two-way binding
https://jsfiddle.net/kzqooq/625m413h/10/

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

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

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

入力値に合わせてデータが変更
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/6f1aa7ec-adbd-571e-2060-e711be1fd0b3.png)

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

#Component
https://jsfiddle.net/kzqooq/625m413h/11/

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

todo-itemタグの定義

``` js
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});
```
* タグの属性としてpropsに定義したtodoを持ちます。
* 属性には呼び出し側で値が設定され、コンポーネントに渡されます。
* テンプレート内では定義した属性を使用できます。
* 自作タグはテンプレートの内容で置き換わります。

コンポーネントの利用

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/71988/70aa5ffd-dcc9-4ae3-59c9-df8685b8afed.png)


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


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