4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.jsAdvent Calendar 2015

Day 23

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

Last updated at Posted at 2015-12-22

#"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を使ってテーブルを作成してみた
テーブルの作成方法は、1列目に表示する列名と、その列名を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を使用すると他にも嬉しいことが幾つもありましたので、後日記述いたします。
間違いがありましたら、ご指摘いただきたくお願いします。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?