vue.jsで簡単な計算機を作る

vue.jsを触ってみつつ簡単な計算機を作ったので、その時の流れを追ってハマりどころなどメモを書いておきます。
HTMLファイル単体で動いて、サーバ不要のごくごく簡単なアプリケーションを作ります。

ホスティングされているvue.jsを持ってくる

非公式ですが、次のサイトでホスティングされています。
vue - cdnjs.com - the missing cdn for javascript and css

これをscriptタグで読めば使用できます。依存ライブラリがない…！
fileスキーマで開いて作業する場合は、頭にhttp:を付けるのを忘れずに。

以降、公式のtutorialを読んだりしつつ進める形です。
Getting Started - vue.js

英語に強くない性質上、次のドキュメントにかなり助けられました。
Vue.js note(v0.10.3). not translate. This is draft of https://github.com/koba04/vuejs-book .
自分は今気付いたんですが、こちらのほうが良いかも
Introduction | vue.js book

DOM構築後にViewModelが作られるようにする

tutorialで早速詰まったんですが、ViewModelを作るときにelで指定した要素がないとエラーになります。
なので、headタグ内のscriptの中に直書きとかしてると、new Vueしたら落ちます。

ということで、DOM構築後に動くようにする必要があります。window.onloadとかで。

v-modelでデータバインディングできる

ViewModel(以下vm)で指定した要素の下で
<input type=text v-model="nyuryoku">
とすれば、vm.data.nyuryokuと結びついて、フォームの値を変えたらこの値も変更されるようになります。
さらに、vm.computedで定義している値も都度変更されます。
これがなかなか楽しい。

tutorialではv-withとかと一緒に出てくるんですが、別に単体で使えます。
Getting Started見たら適当にこのへんで動きを見るのも楽しさがあってよいのではないかと思います。

componentはパラメータを登録する

似た内容のViewModelは、Vue.componentで保存しておいてv-componentで呼び出せるわけですが、この時登録するのは生成時に渡すパラメータになります。new Vue(...)で作ったインスタンスを登録するとうまく動きません。

呼び出されて展開される時にViewModelが生成されるので、そらそうよという感じもしますが……まぁちょっとやらかしたので。

複数のViewModelを連動させる場合、共通の親になるViewModelが必要

例えば、ページにフォームが3つあって、それぞれにViewModelがある場合で、
これらの値を連動させて何かやりたい場合、共通の親になる大きなViewModelが必要になります。

<div id="#dekkaiViewModel">
  <div v-component="vm1" v-ref="vm1" />
  <div v-component="vm1" v-ref="vm2" />
  <div v-component="vm1" v-ref="vm3" />
<div>

というイメージ。
この場合、dekkaiViewModel内でthis.$.vm1といった形で参照できます。子からも$parentでアクセスでき、兄弟要素も見ることができます。

Excelシートを移植した

という感じで、Excelシートで関数でいろいろやってた集計表を移植してみました。

2-5式索敵値計算機(HTML本体)
2-5式索敵値計算(bl.ocks.org)

昨日のタイミングで既に同じような事やってる人が少なくとも2人居て、みんな考える事は同じだなと思いました……。
なまじ良いUIだったので、表形式に縛られず自由な発想が必要だなと思ったのでした。

そう、我々はVue.jsというインタラクティブ性を高められそうな強力な武器を手に入れたのだッ！！！