atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

vue.jsでMVVMパターン その8:プロパティの変更監視をして、functionを実行したい

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。
f:id:c-mitsuba:20160221220059p:plain
f:id:c-mitsuba:20160221220103p:plain

前回はプロパティの変更に応じて、プロパティを変更してみました。
今回はプロパティの変更を監視して、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っぽくかけるんじゃないかなー。

おしまい。