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を使わずに、べたべたに書いた時のサンプル。
id振り振りなかんじ。
一番コード量は少ないけど、viewを直接書き換えたりしてて、いやんなかんじですね。

<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
 $(document).ready(function(){		
		$("#calc").on('click' , function(e){
			//一番ベタなパターン
			//JSからUI要素を触りすぎ
			//IDがいっぱい増えていやなかんじ
			//Vとコードが密結合
			$("#answer").html( parseFloat($("#data1").val()) + parseFloat($("#data2").val()));
	    });
	}
);
</script>

<body>
<!-- View -->
<div id="demo">
    <input id="data1" value="10" type="number">
	<p>+</p>
    <input id="data2" value="2" type="number">
	<button id="calc">=</button>
	<p id="answer"></p>
</div>
</body>
</html>

次回からちょっとずつ書き換えていきます。