その3HTMLJavaScriptVue.jsこんばんは、フリューのジョンです。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プロパティの結果を当てはめる(バインドする)事ができます。--></section></body></html>classやstyleの属性については、少し特殊な書き方で値をバインドすることができます。''">無理やり青い文字</p></section></body></html>v-modelディレクティブv-bindでは属性値に値を入れることができましたが、v-bindでは入れるだけではなく、監視して更新することができます。更新が走る属性値、つまり、inputやtextareaタグのvalue属性につけることでその値を監視することができます。<!--inputの中身を変更するとnameの値が変化する--><span>{{name}}</span></section></body></html>selectに対しても記述することができます。この際、初期値のvalueがselectedになることを覚えておきましょう。<!--v-on:は@にすることができます--></section></body></html>記述した関数に引数を渡すことも可能です。--></section></body></html>click以外にもkeyupなども使うことができます。v-modelとの競合に気をつけてください。補足ここまでのディレクティブを使用することで、画像を一定時間ごとに切り替えるスライドショーを作ることができます。v-modelとv-onを使い、画像を動的に追加するなどと行った処理を追加するなどができます。@click="addUrl">追加</button></section></body></html>まとめv-bind、v-on、v-modelで、データバインディングについて、大まかな説明が終わりました。これにより、簡単なアプリケーションは作れるようになりました。次回は、より複雑なアプリケーションを作成するためにv-ifなどのディレクティブについてお話したいと思います。ありがとうございました。