初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。
OnClickでイベントを発火させるんじゃなくて、VMにfunctionを書いておいて、Command的に実行する。
でもC#と違って、イベントでもCommandでもthisとかvmとかで、vmの値をいじれてしまうのは、うーんってかんじ。
<html> <script type="text/javascript" src="http://jp.vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> //jQueryはここでしかつかってない $(document).ready(function(){ //Model function getData(){ vm.$set('data1', 10); vm.$set('data2', 2); } //ViewModel var vm = new Vue({ el: "#demo", data: { data1:0, data2:0, answer:null, }, //イベントださいからMVVM Commandパターンにしよう //さっきまではボタンについてる関数を実行してた。 //今回はVMについてる関数を実行する //するとViewはVMのメソッドを実行してって言ってるだけ //処理は全部VMによせる methods: { calc:function(event){ vm.answer = vm.data1 + vm.data2; }, } }); //initialize getData(); //こんなかんじでも呼び出せる //vm.calc(); } ); </script> <!-- View --> <body> <div id="demo"> <input v-model="data1" number type="number"> <p>+</p> <input v-model="data2" number type="number"> <button v-on:click="calc" >=</button> <p>{{answer}}</p> </div> </body> </html>
次も書き換えていきます。