初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。
前回はプロパティの変更に応じて、プロパティを変更してみました。
今回はプロパティの変更を監視して、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> //jQueryはここでしかつかってない $(document).ready(function(){ //Model function getData(){ vm.$set('data1', 10); vm.$set('data2', 2); } //ViewModel var vm = new Vue({ el: "#demo", //getもsetもできるプロパティ data: { data1:0, data2:0, }, //getだけできるリアクティブプロパティ computed: { answer: function () { return this.data1 + this.data2 } } }); //プロパティの変更を監視して処理がしたい時 //プロパティに応じてプロパティを変更したいときはリアクティブなので、使い分けるとすっきり //thisはvm vm.$watch('data1', function (val) { if(val % 3 == 0){ alert("☆（ゝω・）vｷｬﾋﾟ"); } }) //initialize getData(); //これだけ覚えてればだいたいOK //ViewがIDだらけになることがない（CSSはまた別の話） //9割型の処理はプロパティが変わった時とコマンドだけでOK //あとはリファレンスみながら、、、 } ); </script> <!-- View --> <body> <div id="demo"> <input v-model="data1" number type="number"> <p>+</p> <input v-model="data2" number type="number"> <p>{{answer}}</p> </div> </body> </html> <!-- 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>
vue.jsには、他にもv-repeatとかv-ifとか、htmlを拡張する記法ができるけど、ここまで押さえておけばMVVMっぽくかけるんじゃないかなー。
おしまい。
