template で設定する HTML 中で使える Vue.js 独自の記法に関してまとめ。

テンプレートの内容は必ず root となる DOM が必要になる

このようなものは許されない

<div>aaa</div>
<div>bbb</div>

このように全体をまとめた1個の DOM になっている必要がある。

<div>
    <div>aaa</div>
    <div>bbb</div>
</div>

二重の括弧の中に data で指定したオブジェクトのキーを書くとその値とテンプレートの内容がバインディングされる。 テキストノードをバインドしたい時はこの記法を使う。

<div>{{ hoge }}</div>

これにより data に変化が合った場合に template 側の表示も勝手に再描画される。

hoge が今「helloworld」だったとすると、画面には

<div>helloworld</div>

と貼り付けられることになる。

この指定は普通に JavasScript 的な挙動をして、その値は文字列等単純なモノでなくともこのようにアクセスできる。

<div>{{ hoge[23].piyo }}</div>

このようにちょっとしたロジックも書くことができるが、ロジックと表示は別物とし分離したいのでほどほどにしておいたほうがよいだろう。

<div>{{ hoge * 2 }}</div>

属性値をデータバインディングしたい場合はこのようには記述できない

<div id="{{ hoge }}">unko</div>

このようにする

<div v-bind:id="hoge">unko</div>

そうするとこのように展開される

<div id="aaa">unko</div>

input 要素等に用いられるその入力フォームが有効無効になるというモノは基本的な属性値のモノと挙動が少し違う。

書き方はなのだが、この hoge が boolean な必要がある。

<input v-bind:disabled="hoge" />

そして true の場合はこのようになり

<input disabled />

false の場合は

<input />

こうなる

書き方はいくつかある

データの hoge の中身がそのまま class として出る

<input v-bind:class="hoge" />

複数あるならこのようになる。配列っぽく書く

<input v-bind:class="[hoge, piyo, fuga]" />

こうなる

<input v-bind:class="aaa bbb ccc" />

データが true なモノのキーが class 値として採用される。

<input v-bind:class="{hoge: ishoge, piyo: ispiyo}" />

こうなる

ishoge が false, ispiyo が true だとすると、こうなる

<input class="bbb" />

直書きとオンオフが混在する場合

<input v-bind:class="[{hoge: ishoge, piyo: ispiyo}, fuga]" />

所謂 if

ishoge が boolean が取得できるプロパティだとして、このように記述する

<p v-if="ishoge">aaa</p>

true の場合はこの v-if を付与したタグが描画されて、false の場合はタグそのものが丸ごと中身も含めて描画されない。

所謂 if

ishoge が boolean が取得できるプロパティだとして、このように記述する

<p v-show="ishoge">aaa</p>

false の場合はこの v-show を付与した要素に直接的に stye=“display: none;” が設定されて表示が消える。

このような for in 構文のような形で書けばよい

<ul><li v-for="(hoge, i) in hogeList">{{i + 1}} {{hoge}}</li></ul>

v-for 属性をつけたタグ自体が繰り返される、タグの中身ではない。

配列のデータに対して増減が頻繁におこるような場合

<ul><li v-for="(hoge, i) in hogeList" v-bind:key="hoge" >{{i + 1}} {{hoge}}</li></ul>

このように key にその一覧の中で一意になるような値を指定するとパフォーマンスが向上するようだ。

このような構造になる。

<ul>
    <li v-for="(hoge, i) in hogeList">
        {{i + 1}} {{hoge.name}}
        <ul>
            <li v-for="(hoge, j) in hoge.hogeList">
                {{ i + 1 }} {{ j + 1}} {{ hoge.name }}
            </li>
        </ul>
    </li>
</ul>

内側のループのループ変数はスコープが内側で閉じている。 なので、外側と内側が名前がかぶった場合は内側優先になる。

独立した1個のテンプレートでは再帰構造を表現できない。この場合 コンポーネント を絡める必要がある。

このように仕込む

<div>
{{ hoge }}
<input type="text" v-on:input="hoge = $event.target.value" v-bind:value="hoge" />
</div>

v-on:イベント名 で仕込む。その内容にデータの更新を入れて、 そのデータ自体を value にバインドする。

そうすると入力する度に外部のテキストが変化するモノが簡単に作れる。

つまり、こいつが双方向データバインディングというやつである。

この双方向バインディングするための記述を一発でやる書き方があって、 このように書けばよい。

<div>
{{ hoge }}
<input type="text" v-model="hoge" />
</div>

もしある要素にタグを付けるか外すかという制御をしたい場合

このように書いてもだめである。

<div v-if="hoge">aaaa</div>
<div v-else>aaaa</div>

あたり前なのだが真なら div で挟まれて、偽でも div で挟まれるからである。 しかし v-else は単独で使えず、必ずタグが必要になる。

このような場合純粋に制御だけの用途で使えるダミーのタグがあってそれを使うとよい

こうなる。

<template v-if="hoge">
    <div>aaaa</div>
</template>
<template v-else>
    aaaa
</template>