初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。
VMのdataを返すようなfunctionに分けてみました。
<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> $(document).ready(function(){ //Model ホントはAjaxとか //jsonのプロパティごとdataにつっこむようなパターン //jsonみないとわからない //たぶんコード補完も利かない //でも融通は効く感じ function getPropertyWithData(){ return { data1:10, data2:2, answer:null } } //ViewModel var vm = new Vue({ el: "#demo", //VMとM(値)がまざってるからメソッドに切り出し data: getPropertyWithData() }); //イベント $("#calc").on('click' , function(e){ vm.answer = vm.data1 + vm.data2; }); } ); </script> <body> <!-- View --> <div id="demo"> <input v-model="data1" number type="number"> <p>+</p> <input v-model="data2" number type="number"> <button id="calc">=</button> <p>{{answer}}</p> </div> </body> </html>
次も書き換えていきます。