こんにちわ、みけです。

vue.jsをいじりはじめてから5日目(途中呆けていた日があるので、都合3日目)ですが、やっとvue.jsの概要がだいたいわかってきた気がしたので、チケット管理アプリっぽいものを作ってみました。

とりあえず、今日まででよく使っているvue.jsの要素のメモをまとめておきたいと思います。

`v-repeat`

要素を反復させるときに使います。

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav" id="navigation">
        <li v-repeat="navigation" class="{{now? 'active': ''}}">
            <a v-attr="href: href" v-text="title"></a>
        </li>
    </ul>
</div>

new Vue({
    el: "#navigation",
    data: {
        navigation: [{
            now: true,
            href: "bootstrap.html",
            title: "Home"
        }, {
            now: false,
            href: "bootstrap.html",
            title: "About"
        }, {
            now: false,
            href: "bootstrap.html",
            title: "Contact"
        }]
    }
});

ポイントは次のとおり

Vueオブジェクトを作成するときに、elに反復させる要素の親要素のid名を指定します。
反復させる配列(上の例ではnavigation)のキー名をv-repeatの属性値として設定します。
反復させる要素では、表示させたい値の場所に、オブジェクトのキー値(上の例ではtitleやhrefなど)を設定します。
また条件によって値を表示したりする場合は、mustachっぽい記号({{}})の中に三項演算子のように記述できます(上の例ではnow)。

`v-model`

フォームの値はv-modelを用いると簡単にバインディングできます。

<div class="form-group" id="input">
    <!-- titleとバインディング -->
    <input type="text" id="title"
        v-model="title" class="form-control"
        placeholder="チケットの名前"/><br/>
    <!-- detailとバインディング -->
    <textarea id="detail" rows="4"
        v-model="detail" class="form-control"
        placeholder="詳細を記入"></textarea><br/>
    <!-- typeとバインディング -->
    <select id="type" v-model="type" class="form-control">
        <option value="--" selected="selected">--</option>
        <option v-repeat="items" value="{{value}}">{{name}}</option>
    </select><br/>
    <!-- ボタンを押してメソッドを呼び出し -->
    <button type="button" class="btn btn-primary"
        v-on="click: addItem">追加</button>
</div>

// フォームとバインディング
new Vue({
    el: "#input",
    data: {
        title: "", detail: "", type: "--"
    },
    methods: {
        addItem: function() {
            if (title.value === "" || type.value === "--") {
                return;
            }
            var issue = Issue(this.title, this.detail, type.value);
            issues.items.push(issue);
            this.title = "";
            this.detail = "";
            type.selectecIndex = 0;
        }
    }
});
// select用のオブジェクト
new Vue({
    el: "#type",
    data: {
        items: [
            {
                value: "bug",
                name: "バグ"
            }, {
                value: "issue",
                name: "やること"
            }, {
                value: "require",
                name: "要望"
            }
        ]
    }
});

ポイントは次のとおり

Vueオブジェクトを作成するときに、フォームが含まれる要素の親要素のid名を指定します(大抵はform要素ですが、ここではdivにしています)。
オブジェクトのキー値を、バインディングさせるフォームのv-model属性に設定します。
クリックなどのイベントはVueオブジェクトのmethodsにあるメソッドにハンドリングさせることができます。
メソッドの中ではキー値の名前を持つvariableにhtmlオブジェクトが割り当てられています(実はここ、valueが入っていると思ってハマった)。