そうだ！Vue.jsを使ってみよう！ - 2

はじめに — Vue.js

条件分岐とループ

条件分岐からです。

まず、HTMLのタグです。

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

これに対するスクリプト

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

これはどうなるかというと、

v-if="seen"

を注目します。真偽の判定となり、この場合"seen"がtrueの場合、falseの場合という風に判定ができます。インスペクタを表示してコンソールに

app3.seen = false

と打ち込んで実行すると。最初表示されていた

Now you see me

が消えます。v-if="seen"で定義したものの真偽で表示、非表示が切り替わります。

テキストをデータに束縛できるだけではなく、 DOM の構造にデータを束縛できることを示しています。さらに Vue は、要素が Vue によって挿入/更新/削除されたとき、自動的にトランジションエフェクト(遷移効果)を適用できる強力なトランジション効果システムも提供します。

次にループです。いわゆるfor in ループです。

まず、HTML部分。v-for="todo in todos"ということで配列"todos"から値として、"todo"として値を取り出します。

<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' }
   ]
 }
})

ここで定義してある以下の配列

todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]

の一つ一つの値を取り出して表示させます。

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

ユーザー入力の制御

v-on ディレクティブを使ってイベントリスナを加え、Vue インスタンスのメソッドを呼び出すことができます

これはボタンを押すと表示されている部分が逆に並び替えされます。

HTML部分です。"v-on:click"でイベントリスナとして機能します。Reverse Messageボタンを押したときに動くようになります。

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

この場合は data:部分と、methods:部分に別れています。

<p>{{ message }}</p>

で表示されるメッセージはdata:部分、

data: {
message: 'Hello Vue.js!'
}

このスクリプトで{{ message }}部分に表示されるようになります。

次に、

<button v-on:click="reverseMessage">Reverse Message</button>

は、methods:部分、

methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}

function () {
     this.message = this.message.split('').reverse().join('')
   }

この関数を実行します。

メソッドの中では DOM 操作を行っていません。アプリケーションの状態のみを更新していることに注意してください。すべての DOM 操作を Vue に任せられるので、背後のロジックを書くことに集中することができます。

次は「双方向バインディング」の実装になります。 v-modelを使います。

Vue は入力とアプリケーションの状態の「双方向バインディング」が簡単に行える v-model ディレクティブも提供します:

HTML部分

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

スクリプト部分

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

と書くだけで双方向バインディング、入力したことがそのまま表示できるようになります。