条件分岐
条件分岐ということで、if文的なv-ifディレクティブの登場です！
プログラムなんかな、if文さえ覚えれば書けんねん
20代前半でプログラムを教わったとき、先輩にそう教わりました。
これは金言です。
HTML
<div id="app-3">
<span v-if="seen">Now you see me</span>
</div>
JS
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
前回の例では、pタグのテキストにデータをバインドしましたが、DOMの構造にデータをバインドすることも可能です。
こちらではdataオブジェクトのプロパティーseenにtrue（Boolean型）を指定し、
マウント先で、v-ifディレクティブを使い、処理を分岐しています。
ディレクティブとは
このディレクティブは、それ自身を Vue インスタンスのプロパティやインスタンスの文脈の中で評価される表現にバインドすることができます。
配下のプロパティや表現の値が変更されたら、それらのディレクティブの update() 関数が同期的に呼ばれます。
要はリアクティブってことですね。
前回やったマスタッシュ構文{{}}も、textNode上（前回だとｐタグの中）のv-textディレクティブとしてコンパイルされます。
その他のディレクティブについてはここを参照。
上記の場合、v-ifに設定されているプロパティーseenがtrueの場合に、spanタグを表示します。
分岐する場合にはv-else-ifとv-elseディレクティブを使用できます。
v-else要素は、v-ifまたはv-else-if要素の直後になければならず、それ以外の場合は認識されません。
ふつうのif文と同じですねー
<div id="app-3">
<span v-if="seen">Now you see me</span>
<span v-else="seen">hogehogehoge</span>
</div>
さりげなく飛ばしたv-bindディレクティブも同様です。
HTML
<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>
JS
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
spanタグのtitle属性に、Vueインスタンスのapp2.messageをバインドしています。
ユーザー入力の制御
v-onディレクティブの登場です。
v-onを使うと、イベントリスナの登録ができ、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('')
}
}
})
急なmethodsの登場に筆者も困惑。
こうすればメソッド呼べるのねくらいにしか思っておらず、見て見ぬフリをしてスルーしていたのでちょっと調べました。
methodsはVueインスタンス生成時に与えるオプションオブジェクトの一つです。
Vueインスタンスに組み込まれた（methods）メソッドに直接アクセスでき、ディレクティブ表現で使用することもできますブラブラ。
上記の例でも、v-onディレクティブで使用してますな。
<button v-on:click="reverseMessage">Reverse Message</button>
thisコンテキストを持ちます？なんのこっちゃ。
要はメソッド内でVueインスタンスに設定されているdataオブジェクトのプロパティー(message)にthisでアクセスできるよってことかな。
コンポーネントオプションと呼ばれるもので、ここにリスト化されています。
双方向バインディングが簡単に行えるv-modelディレクティブの説明もありますが、
とりあえず、こんなもんもあるんだなー程度に見ておけばいいかと。