Posted at

Vue 2.0 Getting Started をやってみる

More than 1 year has passed since last update.

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

はい。Vue 2.0 の Getting Started やります。

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

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


Declarative Rendering

https://jsfiddle.net/kzqooq/625m413h/

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

<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);

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()
}
})

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


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

  • v-で始まる属性はVueの属性


Conditionals

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

続いて条件文

<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);

https://jsfiddle.net/kzqooq/625m413h/8/


Loop

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

つづいてループ。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);

https://jsfiddle.net/kzqooq/625m413h/6/


Handling User Input

https://jsfiddle.net/kzqooq/625m413h/9/

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

https://jsfiddle.net/kzqooq/625m413h/10/

VueオブジェクトのデータとInputの値を2方向バインドします。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

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

コンポーネントです。端的にいうと新しい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に特化した内容というわけでもなかったですね。