お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編）

LINEフロントエンドレンジャーのWeb開発術第1回

2015/01/14 14:00

ポスト

ディレクティブ

　ディレクティブはVMインスタンスのModelもしくは式評価をHTMLに記述し、Modelと連動したViewを生成する仕組みです。本項ではいくつかの代表的なディレクティブを簡単に紹介します。

表2. 代表的なビルトインのディレクティブ
ディレクティブ	説明
v-text	HTMLエレメントのtextContentを更新する（Mustache記法{{}}の処理の内部で呼ばれる）
v-show	条件に応じてエレメントのdisplay属性を更新する
v-if	条件に応じてDOMへの挿入と削除をする
v-class	エレメントのクラスを更新する
v-attr	エレメントの属性を更新する
v-style	エレメントのスタイルを更新する
v-repeat	配列やオブジェクトのループ処理を行う

リスト10-1. ディレクティブの利用例（HTML）

<div id="app">
    <!-- v-show 条件がfalseになるとdisplay: none;がセットされる -->
    <div v-show="selected">selected=trueの時に表示</div>
    <div v-show="!selected">selected=falseの時に表示</div>
    <!-- v-class 条件がtrueとなると、それぞれred, boldのclassが適用される -->
    <span v-class="red: hasError,  bold: isImportant">重要メッセージ</span>
    <ul>
        <!-- v-repeat 配列をループする -->
        <li v-repeat="users">
           <!-- v-repeat配下ではループ対象のオブジェクトのコンテキストになる -->
           {{$index + 1}}: {{name}} {{email}}
        </li>
    </ul>
</div>

リスト10-2. ディレクティブの利用例（JavaScript）

var vm = new Vue({
    el: "#app",
    data: {
        selected: true,
        hasError: false,
        isImportant: true,
        users: [{
            name: "hoge",
            email: "hoge@mail.com"
        }, {
            name: "huga",
            email: "huga@mail.com"
        }]
    }
});

HTML属性内でのMustacheによるバインディングの注意点

　Vue.jsのコンパイルによる初期化処理終わるまでの間、Mustacheによる表記がHTML属性に記述された状態になるため注意が必要です。例えば、imgタグのsrcに「http://hoge.com/images/img_{{id}}.png」と指定していると、コンパイル前の不必要なリクエストが発行されてしまいます。コンパイル後のみ正しくsrcをセットするためにはv-attrディレクティブを使ってsrcをセットしましょう。

　IEでは、style属性内でMustache記法を用いていると（例: 「background-color: {{color}};」）HTMLのパース時に不正として扱われてしまいます。v-styleディレクティブを使うことで回避できます。

イベント

　対象のエレメントにDOMイベントリスナーを付与する際にはv-onディレクティブを使用します。イベントのタイプに対応したVMインスタンスのmethodsを引数と共に呼び出せます。

リスト11-1. v-onを使用してonclick時にmehodsを呼ぶ例（HTML）

<button v-on="click: submit('hello!', $event)">Submit</button>

リスト11-2. v-onを使用してonclick時にmehodsを呼ぶ例（JavaScript）

var vm = new Vue({
    el: "#app",
    methods: {
        submit: function (msg, e) {
            alert(msg);
            e.stopPropagation();
        }
    }
});

　イベントハンドラでeventオブジェクトを扱いたい際は、上記の例のように$eventで参照可能です。

フォーム

　MVVMの仕組みはformと相性が良く、それぞれのHTMLのForm部品とModelがv-modelディレクティブを使用することで容易にインタラクティブな実装が可能です。

リスト12-1. v-modelの利用例（HTML）

<div id="app">
    <!-- text -->
    <p>
        <input type="text" v-model="msg">
        {{msg}}
    </p>
    <!-- checkbox -->
    <p>
        <input type="checkbox" v-model="checked">
        {{checked ? "yes" : "no"}}
    </p>
    <!-- radio buttons -->
    <p>
        <input type="radio" name="picked" value="one" v-model="picked">
        <input type="radio" name="picked" value="two" v-model="picked">
        {{picked}}
    </p>
    <!-- select -->
    <p>
        <select v-model="selected">
            <option>one</option>
            <option>two</option>
        </select>
        {{selected}}
    </p>
</div>

リスト12-1. v-modelの利用例（JavaScript）

var vm = new Vue({
    el: "#app",
    data: {
        msg: "hi!",
        checked: true,
        picked: "one",
        selected: "two"
    }
});

selectタグのoptionをkey-valueで生成する

　v0.11からselectのoptionsという属性にkey-valueペアを渡すことができるようになりました。以下のように、myOptionsを指定するとラベルとvalueにそれぞれセットされた<option>タグが自動生成されます。

HTML

<select v-model="selected" options="myOptions"></select>

var vm = new Vue({
    data: {
        selected: "a",
        myOptions: [
            { text: "A", value: "a" },
            { text: "B", value: "b" }
        ]
    }
});

次のページ
フィルター