v1.0への移行とグリッドの作成方法について

"v0.12.14"から"v1.0" へ移行してみた

私は元々vue.jsの"v0.12.14"を使用しておりました。
ですが、vue.jsを使い始めてすぐにvue.js独自の書き方が理解できないことに苦しみ、"v1.0"に移行しました。

-v0.12.14
v-on="click:sortBy(key)"
(なぜclickがそこにあるのかな？)

"v0.12.14"では、clickがまるでcssのstyle属性のようですが、"v1.0"ではJavascriptのonclickのように扱われています。

-v1.0
v-on:click="send"　←new Vue()のsendメソッドを呼び出す。
v-on:submit.prevent="report"　←new Vue()のreportメソッドを呼び出す。

また、"v0.12.14"ではv-repeat=""を用いて繰り返しの処理を行いますが、"v1.0"ではv-for=""に変更されています。

このように、"v0.12.14"ではvue.js独自の書き方や名称が散見されますが、"v1.0"ではその点が変更されています。

安定したバージョンを扱いたい場合は"v0.12.14"を使用する方が多そうですね。
私的には学習のコストやコードの読みやすさという観点から"v1.0"の方が使い易いように感じました。

Q.vue.jsを使われている方は、"v0.12.14"もしくは"v1.0"のどちらを使用していらっしゃるのでしょうか？

vue.jsを使ってテーブルを作成してみた

テーブルの作成方法は、１列目に表示する列名と、その列名をkeyに持つ情報を順番に表示するという方法をとりました。(サーバー側から取得するデータはJSON形式)

例えば、以下のような表を作成したいとします。

お名前	身長(cm)	体重(kg)	握力(kg)
Aさん	120	30	20
Bさん	130	35	22

この時、以下のように書くと、表示するデータを変更したい場合、毎回htmlを直接直す必要があります。

table.html

<table>
    <thead>
        <tr>
            <th>お名前</th>
            <th>身長(cm)</th>
            <th>体重(kg)</th>
            <th>握力(kg)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Aさん</td>
            <td>120</td>
            <td>30</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Bさん</td>
            <td>135</td>
            <td>35</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

そこで以下のようにvue.jsのv-forを用いて書き換えてみると、表示したいデータが変わっても柔軟に対応できます。
(ちなみに"v0.12.14"ではv-repeatを用いて実現することができるはず、です。)

vue-table.html

<script type="text/x-template" id="grid-template">
<table>
    <thead>
        <tr>
            <th v-for="key in columns">{{ key | capitalize }}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="entry in datas">
            <td v-for="c in columns">{{ entry[c] }}</td>
        </tr>
    </tbody>
</table>
</script>
<grid :datas="gridDatas" :columns="gridColumns">

table-datas.js

//表示したいデータの取得
$($.ajax({
    type: 'GET',
    url:   , //情報取得先のURL
    success: function(res){
    form.$set('gridDatas',res.datas);
    form.$set('gridColumns',res.columns);
    }
});

Component = Vue.extend({
    template: '#grid-template',
    replace: 'true',
    props: ['datas','columns'],
});

Vue.component('grid',Component);

form = new Vue({
    el: '#grid',
    data: {
            gridDatas: [],
            gridColumns: [],
          },
    method: {
            //何かしらの処理
            },
});

data.json

//ajaxで取得する情報
{
    "columns": [
        "お名前"
        "身長(cm)"
        "体重(kg)"
        "握力(kg)"
    ],
    "datas": [
        {
            "お名前": "Aさん",
            "身長(cm)": "120",
            "体重(kg)": "30",
            "握力(kg)": "20",
        },
        {
            "お名前": "Bさん",
            "身長(cm)": "130",
            "体重(kg)": "35",
            "握力(kg)": "22",
        },
    ],
}

先輩にお話をうかがったところ、サーバー側で取得した情報は上のjsonファイルのように加工せず、columnsとdatasを紐付けるkeyを持たせる方が良いそうです。
(勉強不足です。すみません…)

終わりに

vue.jsを使用すると他にも嬉しいことが幾つもありましたので、後日記述いたします。
間違いがありましたら、ご指摘いただきたくお願いします。