Codemobiles React - iOS, Android, Angular, React, Vue.JS ...
Vue.js 0.12 to 2.0.0 gotanda.js #5
-
Upload
hayato-koriyama -
Category
Engineering
-
view
398 -
download
0
Transcript of Vue.js 0.12 to 2.0.0 gotanda.js #5
![Page 1: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/1.jpg)
Vue.js 0.12 to 2.0.0に、変えようとしてそっとbranchを消した話
![Page 2: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/2.jpg)
about me
@nekobatoフロントエンドエンジニア
最近はデザイン監修とプロトタイプ
Polidium
半透明動画プレイヤー
Davneko
webdavライクなオーディオプレイヤー
![Page 3: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/3.jpg)
Vue.js at 実務の話をします
![Page 4: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/4.jpg)
恐縮です
![Page 5: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/5.jpg)
アジェンダ
1. なぜこんなことに
2. 0.12 to 1.0.26
3. 1.0.26 to 2.0.0
![Page 6: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/6.jpg)
状況
on 昔懐かしポチポチゲーWebviewゲーム
コードはPerlのテンプレートエンジンとVue.jsが入り乱れる乱世
将来の夢は完全SPA
みなさんはVue.js 0.12ですか?
![Page 7: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/7.jpg)
なぜ今0.12なのか
困ってなかったから
![Page 8: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/8.jpg)
なぜ今0.12なのか
全然0.12で困らない
- スピードも問題無い
- スケールも問題無い
- Vue.jsの中でflux flowが作れる- (新しめのアプリ構造に乗り遅れるわけでもない)
![Page 9: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/9.jpg)
Announcing Vue.js 2.0
We are also not forgetting about 1.x!
早く0.12から脱出しないと(焦燥感)
![Page 10: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/10.jpg)
歴史
Vue.js 0.12 ← 今ココ!
Vue.js 1.x Vue-Router
Vuex
Vue.js 2.0.0
![Page 11: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/11.jpg)
Vue.js 0.12 to 1.0.26
![Page 12: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/12.jpg)
根気のGrep
v-on=’click:function’
v-el=’name’
v-repeat=’’
<content>
etc…
@click=’function’
:el=’name’
v-for=’’
<slot>
![Page 13: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/13.jpg)
formをformというcomponentで上書きしてたら怒られた
[Vue warn]: Do not use built-in or reserved HTML elements as component id: form
すいませんでした
→ directiveに全書き換え
![Page 14: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/14.jpg)
感想
ほとんどそのまま動く
「これ本当はやっちゃダメだろうな」と思ってた所は動かない
![Page 15: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/15.jpg)
Vue.js 0.12 to 1.0.26〜おわり〜
![Page 16: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/16.jpg)
vue@next
![Page 17: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/17.jpg)
まだalphaだけど試したい気持ち
動機
- サービスと心中するAngular 1.xのようになりたくない- 食らいついていきたい気持ちの表明
- 将来本当に移行できるのか興味ある
- SSRとかちょっと興味ある
- 自分のプロダクトが@nextに移行しつつある知見- デバッグが楽
![Page 18: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/18.jpg)
おまけ:vue-loader@nextが便利
templateのVueに関するエラーをトランスパイルの時点で報告してくれる
![Page 19: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/19.jpg)
Vue.js 1.0.26 to 2.0.0-rc
![Page 20: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/20.jpg)
Vue.js2.0.0を試してみた系の人は言う
「ほとんどそのまま動く」
![Page 21: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/21.jpg)
Vue.js2.0.0を試してみた系の人は言う
「ほとんどそのまま動く」
事前にVuex導入してたらな
![Page 22: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/22.jpg)
Vuexで構築していなかった俺たちは
vm.$eventsと共に死ぬ
![Page 23: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/23.jpg)
資料に従って準備する
2.0 Changeshttps://github.com/vuejs/vue/issues/2873
日本語訳
http://qiita.com/prismrism/items/66a9dfc31139326911d8
Vue 2.0 RC Starter Resourceshttps://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources
![Page 24: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/24.jpg)
根気のGrep
v-el:name, v-ref:name
this.$els.name
$vm.ready
v-for構文
etc...
ref=”name”
this.$refs.name
$vm.mounted
![Page 25: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/25.jpg)
DOM構成が厳しくなってる
Component template should contain exactly one root element
1コンポーネント = 1ノードツリー
コンポーネントの概念を正しく実装していたら
特にやることはない
![Page 26: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/26.jpg)
Filtersを$watchや$computedに変換する作業
- Filters can now only be used inside text interpolations ({{}} tags)
- Vue 2.0 will not ship with any built-in filters.
directive内で複雑なことするのやめる
@timeupdate='updateTime | debounce(300)'
![Page 27: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/27.jpg)
一番の問題
![Page 28: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/28.jpg)
とりあえずVue 2.0.0にはなるよver.
これを events: { EVENT_NAME_1: function() {}, EVENT_NAME_2: function() {}, EVENT_NAME_3: function() {}, EVENT_NAME_4: function() {}}
this.$dispatch('EVENT_NAME', function() {})
![Page 29: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/29.jpg)
とりあえずVue 2.0.0にはなるよver.
まずこうして vue-event-emitter.js
import Vue from 'vue'export default new Vue()
![Page 30: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/30.jpg)
とりあえずVue 2.0.0にはなるよver.
こうする import ee from ‘../vue-event-emitter’
created() { ee.$on('EVENT_NAME_1', this.function1) ee.$on('EVENT_NAME_2', this.function2) ee.$on('EVENT_NAME_3', this.function3) ee.$on('EVENT_NAME_4', this.function4)}
ee.$emit('EVENT_NAME', function() {})
![Page 31: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/31.jpg)
だいたいGrepだけで動いた
![Page 32: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/32.jpg)
正気に戻る
![Page 33: Vue.js 0.12 to 2.0.0 gotanda.js #5](https://reader033.fdocuments.net/reader033/viewer/2022052214/58f26a771a28abb03b8b45c1/html5/thumbnails/33.jpg)
結論
- シンプルな部分はGrepで置換可能
- カスタム要素は仕様に合わせるために少し頭を使う
- Vuex入れてない人はまずVuex入れよう- Vuexが無くても動く