Vue.jsのリアクティブディレクティブを幾つか試すその2

前回は1st stepにあるリアクティブディレクトリを試したので、今回も続いて2nd Stepにあるリアクティブディレクトリについて確認してみたいと思います。

まず2nd Stepの動作確認

最初から5つのtodoが用意された状態で、チェックをするとチェックされたtodoが一番下に移動します。
ただし、todoの名前の一文字目の数値は、移動したらその場所の数値に変化しています。(これは0から始まっているため、「0:task-a」をチェックした場合「4:task-a」になります)
「add todo」ボタンを押すと、一番下に新しいtodoが追加されますが、最初に用意されていたtodoとは違い、最後の文字はアルファベットではなく番号が振られるようになります。
「left 5 tasks.」の部分は、チェックしていないtodoの数が表示されています。

コードの確認

<div id="todo">
    <h1>My Todos</h1>
    <div v-repeat="t : todos | orderBy 'isDone'">
        <input type="checkbox" v-model="t.isDone" />
        {{$index}}:{{t.title}}
    </div>
    <input type="button" v-on="click: addTodo" value="add todo" />
    <div>
        left {{lefts}} tasks.
    </div>
</div>

1st stepには無かったリアクティブディレクティブ、

v-repeat
v-model

が書かれています。今回はこの2つを見ていきます。

v-repeat

<div v-repeat="t : todos | orderBy 'isDone'">

v-repeatは、配列やオブジェクトに複数の要素を入れていくためのディレクティブです。 v-repeatに指定されている値はtodosですが、こちらはJS側のコードを見ると空の配列データになっています。

  data: {
      todos: []
  },

さらに、todosにはtの引数が指定されています。公式サイトのガイドを見ると・・・

引数が与えられたときは、エイリアスキーを引数の文字列としてラッパーのデータオブジェクトが常に作られます。これにより、テンプレート内でのより明示的なプロパティへのアクセスが可能になります

この引数によって、todosのプロパティisDoneなどは、t.isDoneといった形でアクセスが可能になっているようです。

フィルタ

上記のv-repeatには、| orderBy 'isDone'">が書かれています。これはVue.jsのフィルタ機能で、orderBy構文によって、repeat-vの結果を'isDone'をキーにしてソートしています。

v-model

<input type="checkbox" v-model="t.isDone" />

v-modelはinput要素にだけ使用できるディレクティブです。ガイドでは「双方向バインディングを作成」すると書かれていますが、
これはつまり、
input要素(例えばtextbox)へユーザーが値を入力 -> その値がVue.js側のオブジェクトに反映 -> 別のDOMにバインド
といったことが可能になります。今回の"t.isDone"は、チェックボックスのON/OFFにバインドされており、Vue側ではtrue/falseが反映されるようです。

$index

{{$index}}:{{t.title}}

このMustacheを見ると、後者はtodosの要素、titleをtextContentにバインドしています。
$indexですが、ガイドでは

レンダリングされたインスタンスの配列インデックスに対応する $index プロパティにもアクセスすることができます。

とのことなので、配列インデックスの数字をバインドしているだけということがわかりました。

コンポーネントオプション

続いてJS側のコードを見ていきたいと思いますが、コンポーネントオプションが中心になりますので、記事を分けます。