atelier:mitsuba

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

2016-02-21から1日間の記事一覧

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

初期値に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> //jQuer…</html>

vue.jsでMVVMパターン その7:Reactiveプログラミングしたい

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 ボタン押すのめんどいから。Reactiveプログラミングで、answerプロパティが自動で変わるようにしてみた。 <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はここでしかつかってな…</html>

vue.jsでMVVMパターン その6:Commandパターンを使ってみる

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 OnClickでイベントを発火させるんじゃなくて、VMにfunctionを書いておいて、Command的に実行する。 でもC#と違って、イベントでもCommandでもthisとかvmとかで、vmの値をいじれてしま…

vue.jsでMVVMパターン その5:VMのプロパティに値をセットする。

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 前回と違って、VM初期化時にdataのプロパティを作っておいて、あとから値を設定するかんじに書き換えてみた。 <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(fun…</html>

vue.jsでMVVMパターン その4:VMのdataをメソッドで作るようにしてみる

初期値に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 ホントはAja…</html>

vue.jsでMVVMパターン その3:型指定したい

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 <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(){ var vm = new Vue({ el: "#demo", data: { data1:…</html>

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

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 とりあえず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以下にda…</html>

vue.jsでMVVMパターン その1:vue.jsを使わないとき。

初期値に10と2が設定されていて、=ボタンを押すと計算ができるサンプル。 今回はvue.jsを使わずに、べたべたに書いた時のサンプル。 id振り振りなかんじ。 一番コード量は少ないけど、viewを直接書き換えたりしてて、いやんなかんじですね。 <html> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script> $(document).</html>…