Vue.js 基礎 [クリックイベント/データバインド] : Vue.jsが気になっていたので、猫本を買ってきました。 しばらく自分のOUTPUTに記事を書いてこうと思います。 クリックイベントとデータバインド hoge.js var app = new Vue({ el: '#app', data: { show :true, message :'HelloWorld!!', }, methods: { handleClick: function(event) { if( app.show == false) { app.show = true; } else { app.show = false; } } } }) hoge.html <div> <p v-if="show">{{message}}</p> <input v-if="show" v-model="message"> <button v-on:click="handleClick">button</button> </div> 理解 divタグのid"app"と、jsの"#app"が紐づく dataはモデル、これがバインドされる methodsはイベント、ここにクリックイベントとか書くらしい ボタンを押すとラベルと入力フォームが消えたり表示されたりします。 入力フォームの値が、ラベルにバインドされているのでリアルタイムで連動します。 バインドがWPFのMVVMよりわかりやすくてとても良い。