Vue.jsのリアクティブディレクティブを幾つか試す


[こちらの記事](http://qiita.com/icoxfog417/items/49f7301be502bc2ad897)の1st stepをベースに、spanタグの中にある[リアクティブディレクティブ](http://jp.vuejs.org/api/directives.html)を試しました。
公式サイトのAPIリファレンスを一度見てもよくわからないことが多いので、実際に動かしてみてどのような命令なのか確認してみます。


## まず1st Stepの動作確認
クリックすると、Hello Vue.jsのフォントサイズと色が変わりました!

## コードの確認
詳しい説明は元記事に書いてありますが、自分なりに解釈してみます。

```HTML
<div id="simple">
    <span v-text="message" v-on="click: magnify" v-attr="style: font"></span>
</div>
```
```JavaScript
var app = new Vue({
    el: '#simple',
    data: {
        message: "Hello Vue.js",
        font: ""
    },
    methods:{
        magnify: function(){
            this.font = "font-size:20px;color:red"
        }
    }
})
```
Vueインスタンスの生成で代入されたappは __ViewModel__インスタンス になります。
Vueインスタンスの引数にある、 __el__ ([コンポーネントオプション](http://jp.vuejs.org/api/options.html#el)) は、HTML要素のidを指定しており、これによって`<div id="simple">`以下のDOM要素はVue管理下となります。

data、methodsの[データ](http://jp.vuejs.org/api/options.html#データ)は、HTMLのspanタグにあるv-から始まる属性([リアクディブディレクティブ](http://jp.vuejs.org/api/directives.html#リアクティブディレクティブ))によって、様々な命令でバインドすることができます。バインドされた要素は同期されるため、Vueインスタンス内にある値の更新によって変更することができます。


## v-text
spanタグのテキストは何も入っていませんが、`message`プロパティの値、"Hello Vue.js"が、[v-text](http://jp.vuejs.org/api/directives.html#v-text)でバインドされているため、DOMのtextContentが更新されています。

```HTML:出力されるHTML
<span>Hello Vue.js</span>
```

### v-textをMustacheバインディングに置き換え
`{{ Mustache }}`という書き方でバインドすることもできるようなので([Mustacheバインディング](http://jp.vuejs.org/guide/#Mustache_バインディング))、上記のv-textでの指定方法を変えてみました。

```HTML
<div id="simple">
    <span v-on="click: magnify" v-attr="style: font">{{message}}</span>
</div>
```
同じようにtextContentが更新されました!

## v-attr
[v-attr](http://jp.vuejs.org/api/directives.html#v-attr)は、v-textと違い、`style:`という引数が指定されています。
このディレクティブは、引数に指定した属性で要素を更新する役割ですが、`font`プロパティが空の文字列になっているので、バインドされていても最初はspanに属性が追加されません。
わかりやすいようにスタイルを指定してみます。

```JavaScript
var app = new Vue({
    el: '#simple',
    data: {
        message: "Hello Vue.js",
        font: "color:green"
    },
    methods:{
        magnify: function(){
            this.font = "font-size:20px;color:red"
        }
    }
})
```
style属性が追加されて「Hello Vue.js」の文字が緑色になりました。

```HTML:出力されるHTML
<span style="color: green">Hello Vue.js</span>
```

## v-style
v-attrでスタイルを変更しましたが、CSSスタイル専用のディレクティブ、[v-style](http://jp.vuejs.org/api/directives.html#v-style)があるので、こちらで上記と同じスタイルの更新をしてみます。
この場合は命令がスタイルの更新と決まっているので、引数が必要なくなります。

```HTML
<div id="simple">
    <span v-on="click: magnify" v-style="font">{{message}}</span>
</div>
```
これでも同じように「Hello Vue.js」の文字を緑にすることができました。

```HTML:出力されるHTML
<span style="color: green">Hello Vue.js</span>
```

## v-on
引数に指定されている`click:`は、イベントタイプです。
その名の通りクリックイベントを監視して、クリックされたら`methods`メソッドを呼び出します。
今回はクリックされたらfontスタイルを変えるだけではなく、テキストも変えてみることにします。

```JavaScript
var app = new Vue({
    el: '#simple',
    data: {
        message: "Hello Vue.js",
        font: "color:green"
    },
    methods:{
        magnify: function(){
            this.message = "Magnified"
            this.font = "font-size:20px;color:red"
        }
    }
})
```
これでクリックするとtextContentが"Hello Vue.js"から"Magnified"に変わり、fontスタイルも変更されました。

```HTML:クリック後に出力されるHTML
<span style="font-size: 20px; color: red;">Magnified</span>
```