こんばんは、フリューのジョンです。Vue.jsを社内に広める活動を頑張ってます。

前回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をしました。
今回はVue.jsのHTML側(v-bind、v-model、v-on)の話をしていきたいと思います。

今回もVue.jsはバージョン2.3.0を使用します。

v-bindやv-onなどの属性を、Vue.jsでは、それぞれを「ディレクティブ」と呼んでいます。

v-bindディレクティブ

タグ要素のattributeにdataプロパティやmethodsプロパティの結果を当てはめる(バインドする)事ができます。

classやstyleの属性については、少し特殊な書き方で値をバインドすることができます。

v-modelディレクティブ

v-bindでは属性値に値を入れることができましたが、v-bindでは入れるだけではなく、監視して更新することができます。
更新が走る属性値、つまり、inputやtextareaタグのvalue属性につけることでその値を監視することができます。

selectに対しても記述することができます。この際、初期値のvalueがselectedになることを覚えておきましょう。

v-onディレクティブ

属性に、eventに対する振る舞いを指定することができます

記述した関数に引数を渡すことも可能です。

click以外にもkeyupなども使うことができます。ただし、v-modelとの競合に気をつけてください。

補足

ここまでのディレクティブを使用することで、画像を一定時間ごとに切り替えるスライドショーを作ることができます。
また、v-modelとv-onを使い、画像を動的に追加するなどと行った処理を追加するなどができます。

まとめ

v-bind、v-on、v-modelで、データバインディングについて、大まかな説明が終わりました。

これにより、簡単なアプリケーションは作れるようになりました。

次回は、より複雑なアプリケーションを作成するためにv-ifなどのディレクティブについてお話したいと思います。

ありがとうございました。