Vue.jsを学ぶ - No.2

今日は、

リストをバインドする

繰り返し構文v-forを使って、要素に配列データをバインドします。

<要素名 v-for="代入する変数名 in 配列の変数名">・・・</要素名>

3件のデータを繰り返して出力する

HTML

<div id="app">
    <table border="1">
        <tr><th>商品コード</th><th>商品名</th></tr>
        <tr v-for="item in products">
            <td>{{item.code}}</td><td>{{item.name}}</td>
        </tr>
    </table>
</div>

JavaScript

var app = new Vue({
    el: 'app',
    data: {
        products: [
            {code: 'a1', name: '商品A'},
            {code: 'b1', name: '商品B'},
            {code: 'c1', name: '商品C'}
        ]
    }
});

効率的に描画するためには、なるべくノードの移動や削除を抑えて、なるべく使いまわそうとするらしい。その結果、配列の要素番号（インデックス）がDOMノードとずれてしまい、並び替えや追加を行った時に正しく動作しない原因になる。これを回避するために、v-forの配列要素を区別できる値をkeyという属性を使ってバインドすることが推奨されている。らしい↓

リストレンダリング — Vue.js

v-forで繰り返す要素にkeyを設定する時は、v-bindで指定。

<tr v-for="item in products" v-bind:key="item.code">
    <td>{{item.code}}</td><td>{{item.name}}</td>
</tr>

条件付きで描画する

条件付きで描画する時は2つ。
v-if　か　v-show

●DOMに要素出力しない時、v-if
●DOMに出力されてCSSで非表示(display:none)になる。v-show

使い分け：
DOMの更新はブラウザに負担のある動作なので、タブで表示/非表示を切り替えるような時は、v-ifを使う。タブの切り替えでノードの追加/削除が起きる時、v-showを使った方が、高速な描画になる。

描画用にデータを加工する

例えば、プログラム上は数値として扱い、描画時にカンマで区切り、単位を見やすくしたり、小数点以下を切り捨てたりする場合に加工する。

フィルターを登録

名称の確認。

スコープ：データの有効範囲
グローバルスコープ：どこからでも参照できるデータの範囲
ローカルスコープ：関数の中のみ有効なデータの範囲

グローバルスコープにフィルターを登録する

Vue.filter(フィルター名, 関数オブジェクト);

JavaScript 例）

Vue.filter('number_format', function(val){
    return val.toLocaleString();
});

var app = new Vue({
    el: '#app',
    data: {
        price:1000
    }
});

※Vue.filter()は new Vue()より先に記述すること。

フィルターを適用する場合

{{ プロパティ名 ｜ フィルター名}}

要素の属性にバインドしたデータにフィルターを適用する場合

<div id="app">
    {{price ｜ number_format}}
</div>

書式

<要素名 v-bind:属性名　＝"プロパティ名 ｜ フィルター名">

これで、1,000と描画される。

ローカルスコープにフィルターを登録する

ポイント：
他のコンポーネントからは隠蔽されるため、特定のコンポーネントの中だけで使える。

フィルターを登録する

var app = new Vue({
    el: 'app',
    data:{
        price: 1000
    },
    filters: {
        number_format: function(val) {
            return val.toLocaleString();
        }
    }
});

書式

filters: {フィルター名：　関数オブジェクト}

複数のフィルターを繋げる

HTML

<div id="app>
    {{price | unit}} {{price | number_format | unit}}
</div>

JavaScript

var app = new Vue({
    el: '#app',
    data: {
        price:1000
    },
    filters: {
        number_format: function(val) {
            return val.toLocaleString();
        },
        unit: function(val) {
        return val +'円';
        }
    }
}

書式

{{プロパティ名 ｜　フィルター名　｜　フィルター名}}

属性にバインドする場合

<要素名　v-bind:属性名 ="プロパティ名 ｜ フィルター名 ｜ フィルター名">

小さな加工を行うフィルターを別々に作る方がテンプレート側で使い分けがしやすそう。

今回は以上。

次回は、算出プロパティを学びます。