#ウデマエアーカイブ をVue.js@1.0.0にアップデート！
しました。
個人のサービスだと思い切ってやっちゃえるので良いですね。
そんなに複雑な使い方してないので参考になるかは謎ですが、手順やら何やらメモっときます。
まず読む
- まずはNotable Changesを把握
- できればドキュメント再読
- `1.0.0-migration`ってバージョンなら、v0.12.16と互換しつつv1.0.0の機能も使えるのでまずコレで試すのおすすめ
- warningsを1つずつ解消する
って書いてますがまぁいけるやろーってことで、
- Notable Changes読む
- いきなりv1.0.0つっこむ
- 変更点なおす + warnings消す
って手順でやりました。
変わったところ
きっとそのうちどこかの誰かさんが詳細な記事を書いてくださると期待して、ここでは実際になおしたとこだけ書きます。
こまめにコミット分けてたので、なんとなく察する感じでよければ作業ブランチの様子など。
Feature/update vue by leader22 · Pull Request #35 · leader22/ika-rchive · GitHub
v-repeat -> v-for
<!-- いままで --> <li v-repeat="items">{{this.id}}</li> <li v-repeat="item in items">{{item.id}}</li> <li v-repeat="obj">{{$key}} - {{$value}}</li> <!-- これから --> <li v-for="item in items">{{item.id}}</li> <li v-for="value in obj">{{$key}} - {{value}}</li>
ようは、
- foo in barって書き方に統一された
- オブジェクトを回すと、$keyってのがとれる
v-on="click"
<!-- いままで --> <button v-on="click: onClickOk">わかった！</button> <!-- これから --> <button v-on:click="onClickOk">わかった！</button> <button @click="onClickOk">わかった！</button>
@で済むとかもはや楽ちん過ぎですねー。
v-bind
<!-- いままで --> <li v-class="{ 'is-active': activePane === 'record' }"></li> <!-- これから --> <li v-bind:class="{ 'is-active': activePane === 'record' }"></li>
v-classだけじゃなくて、v-attrも変わってます。
<!-- いままで --> <canvas v-attr="width: canvasW, height: canvasH"></canvas> <!-- これから --> <canvas v-bind:width="canvasW" v-bind:height="canvasH"></canvas> <canvas :width="canvasW" :height="canvasH"></canvas> <!-- いままで --> <input type="checkbox" v-attr="disabled: isDisconnected"> <!-- これから --> <input type="checkbox" v-bind:disabled="isDisconnected"> <input type="checkbox" :disabled="isDisconnected"> <!-- いままで --> <a v-attr="href: tweetUrl">リンク</a> <!-- これから --> <a v-bind:href="tweetUrl">リンク</a> <a :href="tweetUrl">リンク</a>
属性値に対しては、ここまで略せます。
なんか略せすぎてタイポとかで事故りそう・・。
v-styleも廃止だそうですよ。
select要素のoptionsが廃止
<!-- いままで --> <select v-model="stage" options="stages"></select> <!-- これから --> <select v-model="stage"> <option v-for="option in stages" :value="option.value"> {{option.text}} </option> </select>
ちょっとめんどくさいけど順当なかんじ。
- 地道にoption要素をv-forで回すように
- { value: 'VAL', text: 'TEXT' } ってデータ構造はそのまま
v-el
<!-- いままで --> <canvas v-el="graph"></canvas> <!-- これから --> <canvas v-el:graph></canvas>
そしてjsでのアクセス方法も変わって、
// いままで var $canvas = this.$$.graph.getContext('2d'); // これから var $canvas = this.$els.graph.getContext('2d');
`v-ref`も変わってます。
