atelier:mitsuba

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

vue.jsでMVVMパターン その２：とりあえずvue.jsを使ってみた。

Javascript

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

とりあえずvue.jsを使ってみたサンプル

<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(){
	 //Vueを使った場合
	 //#demo以下にdataをBinding
		var vm = new Vue({
		    el: "#demo",
		    data: {
		        data1:10,
				data2:2,
				answer:null
		    }
		});
		
		//#calcがクリックされた時
		//イベントハンドラ的な書き方
		//vm.プロパティ名でアクセスできる
		$("#calc").on('click' , function(e){
			//パースはいやんなかんじ。だるい。
			vm.answer =  parseFloat(vm.data1) +  parseFloat(vm.data2);
	    });
	}
);
</script>

<body>
<!-- View -->
<!-- idの数が2つになったからVとVMがちょっと疎結合になった-->
<div id="demo">
	<!-- マークアップ拡張は覚えないといけないけど。 v-modelが設定側 {{}}が取得側 -->
    <input v-model="data1" type="number">
	<p>+</p>
    <input v-model="data2" type="number">
	<button id="calc">=</button>
	<p>{{answer}}</p>
</div>
</body>
</html>

ひとまずBindingしてみました。

次も書き換えていきます。