#"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>
<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を用いて実現することができるはず、です。)
<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">
//表示したいデータの取得
$($.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: {
//何かしらの処理
},
});
//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を使用すると他にも嬉しいことが幾つもありましたので、後日記述いたします。
間違いがありましたら、ご指摘いただきたくお願いします。