View
397
Download
0
Category
Preview:
Citation preview
Vue.js 0.12 to 2.0.0に、変えようとしてそっとbranchを消した話
about me
@nekobatoフロントエンドエンジニア
最近はデザイン監修とプロトタイプ
Polidium
半透明動画プレイヤー
Davneko
webdavライクなオーディオプレイヤー
Vue.js at 実務の話をします
恐縮です
アジェンダ
1. なぜこんなことに
2. 0.12 to 1.0.26
3. 1.0.26 to 2.0.0
状況
on 昔懐かしポチポチゲーWebviewゲーム
コードはPerlのテンプレートエンジンとVue.jsが入り乱れる乱世
将来の夢は完全SPA
みなさんはVue.js 0.12ですか?
なぜ今0.12なのか
困ってなかったから
なぜ今0.12なのか
全然0.12で困らない
- スピードも問題無い
- スケールも問題無い
- Vue.jsの中でflux flowが作れる- (新しめのアプリ構造に乗り遅れるわけでもない)
Announcing Vue.js 2.0
We are also not forgetting about 1.x!
早く0.12から脱出しないと(焦燥感)
歴史
Vue.js 0.12 ← 今ココ!
Vue.js 1.x Vue-Router
Vuex
Vue.js 2.0.0
Vue.js 0.12 to 1.0.26
根気のGrep
v-on=’click:function’
v-el=’name’
v-repeat=’’
<content>
etc…
@click=’function’
:el=’name’
v-for=’’
<slot>
formをformというcomponentで上書きしてたら怒られた
[Vue warn]: Do not use built-in or reserved HTML elements as component id: form
すいませんでした
→ directiveに全書き換え
感想
ほとんどそのまま動く
「これ本当はやっちゃダメだろうな」と思ってた所は動かない
Vue.js 0.12 to 1.0.26〜おわり〜
vue@next
まだalphaだけど試したい気持ち
動機
- サービスと心中するAngular 1.xのようになりたくない- 食らいついていきたい気持ちの表明
- 将来本当に移行できるのか興味ある
- SSRとかちょっと興味ある
- 自分のプロダクトが@nextに移行しつつある知見- デバッグが楽
おまけ:vue-loader@nextが便利
templateのVueに関するエラーをトランスパイルの時点で報告してくれる
Vue.js 1.0.26 to 2.0.0-rc
Vue.js2.0.0を試してみた系の人は言う
「ほとんどそのまま動く」
Vue.js2.0.0を試してみた系の人は言う
「ほとんどそのまま動く」
事前にVuex導入してたらな
Vuexで構築していなかった俺たちは
vm.$eventsと共に死ぬ
資料に従って準備する
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
根気のGrep
v-el:name, v-ref:name
this.$els.name
$vm.ready
v-for構文
etc...
ref=”name”
this.$refs.name
$vm.mounted
DOM構成が厳しくなってる
Component template should contain exactly one root element
1コンポーネント = 1ノードツリー
コンポーネントの概念を正しく実装していたら
特にやることはない
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)'
一番の問題
とりあえず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() {})
とりあえずVue 2.0.0にはなるよver.
まずこうして vue-event-emitter.js
import Vue from 'vue'export default new Vue()
とりあえず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() {})
だいたいGrepだけで動いた
正気に戻る
結論
- シンプルな部分はGrepで置換可能
- カスタム要素は仕様に合わせるために少し頭を使う
- Vuex入れてない人はまずVuex入れよう- Vuexが無くても動く
Recommended