Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Vue.js 2.0 を試してみた
Toshiro Shimizu
Vue.js : Revolutionary Front-end #1 24.08.2016
About me
清水 俊郎 gh: @toshilow
元フリーランスで3月からABEJAで フロントエンドエンジニアをやってます
もともとはサーバサイトJavaエンジニア
3年ほど前からフロントエンドで主にAngular 1xを使ってました...
RC3も出たし
そろそろ2.0への移行も考えていきたい
今日話すこと
1. Vue.jsのここが好き
2. 今日使うサンプルの説明
3. マイグレーションポイント
4. まとめ
Vue.jsのここが好き
リアクティブ Reactive
軽量 Lightweight
シンプル Simple
簡単 Easy
サンプルの説明
vue.js 1.0.26
vue-routerでルーティング
vuexに状態を保存
vue-router-syncを使用
webpackでビルド
vueファイルではなくhtmlテンプレート
https://github.com...
モジュールのアップデート
# npm install vue@next vue-router@next vuex@next vue-router-
sync@next --save
@nextを指定してvue vue-router vuex v...
Webpack.configでaliasを追加
module.exports = {
entry: "./src/main.js",
output: {
path: path.join(__dirname, 'build'),
filename...
1.0
Vue.use(VueRouter)
var router = new VueRouter()
router.map({
'/': {
component: Top
},
'/posts': {
component: Posts
},
...
1.0
<div class="container">
<div class="nav-left">
<a v-link="{path: '/'}"
class="nav-item is-tab">Top
</a>
<a v-link="{pa...
actions.js
export const addPost =
({ commit }, post) => {
commit('ADD_POST', post)
}
export const deletePost =
({ commit }...
1.0
import { addPost, deletePost }
from "../../vuex/action"
export default Vue.extend({
vuex: {
getters: {
posts: state =>...
1.0
import Vue from 'vue'
import { sync } from 'vuex-router-
sync'
import store from './vuex/store'
import router from './...
1.0
<article class="media"
v-for="post in posts">
<div class="media-content">
<strong>{{post.title}}</strong>
<br>{{post.b...
動作確認
まとめ
1.0との互換性は良い (ほとんどそのまま動いた)
APIのシンプルさは保たれたままでよかった
イベント通知のdispachとbroadcastが無くなるemit1択
Vue.js devtoolが便利
今後パフォーマンス測定、SSRも...
参考
Vue.js 2.0 Changes #2873
https://github.com/vuejs/vue/issues/2873
Vuex 2.0 design #236
https://github.com/vuejs/vuex/is...
Join us!! 急募
おわり
Upcoming SlideShare
Loading in …5
×

Vue.js 2.0を試してみた

Vue.js: Revolutionary Front-end #1
http://abeja-innovation-meetup.connpass.com/event/38214/

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Vue.js 2.0を試してみた

  1. 1. Vue.js 2.0 を試してみた Toshiro Shimizu Vue.js : Revolutionary Front-end #1 24.08.2016
  2. 2. About me 清水 俊郎 gh: @toshilow 元フリーランスで3月からABEJAで フロントエンドエンジニアをやってます もともとはサーバサイトJavaエンジニア 3年ほど前からフロントエンドで主にAngular 1xを使ってました Vue.jsを使い始めてから半年 高崎から通ってます
  3. 3. RC3も出たし そろそろ2.0への移行も考えていきたい
  4. 4. 今日話すこと 1. Vue.jsのここが好き 2. 今日使うサンプルの説明 3. マイグレーションポイント 4. まとめ
  5. 5. Vue.jsのここが好き リアクティブ Reactive 軽量 Lightweight シンプル Simple 簡単 Easy
  6. 6. サンプルの説明 vue.js 1.0.26 vue-routerでルーティング vuexに状態を保存 vue-router-syncを使用 webpackでビルド vueファイルではなくhtmlテンプレート https://github.com/toshilow/vue-v1-sample
  7. 7. モジュールのアップデート # npm install vue@next vue-router@next vuex@next vue-router- sync@next --save @nextを指定してvue vue-router vuex vue-router-syncをアップデート
  8. 8. Webpack.configでaliasを追加 module.exports = { entry: "./src/main.js", output: { path: path.join(__dirname, 'build'), filename: 'main.js'}, resolve: { alias: { vue: 'vue/dist/vue.js' } }, module: { loaders: [{test: /.scss$|.sass$/, Standalone (compiler + runtime)
  9. 9. 1.0 Vue.use(VueRouter) var router = new VueRouter() router.map({ '/': { component: Top }, '/posts': { component: Posts }, }) 2.0 Vue.use(VueRouter) var router = new VueRouter({ routes: [ { path: '/', component: Top }, { path: '/posts', component: Posts }, ] }) ルーティングの書き換え
  10. 10. 1.0 <div class="container"> <div class="nav-left"> <a v-link="{path: '/'}" class="nav-item is-tab">Top </a> <a v-link="{path: '/posts'}" class="nav-item is-tab">Posts </a> </div> </div> 2.0 <div class="container"> <div class="nav-left"> <router-link to="/" class="nav-item is-tab">Top </router-link> <router-link to="/posts" class="nav-item is-tab">Posts </router-link> </div> </div> リンクの書き換え
  11. 11. actions.js export const addPost = ({ commit }, post) => { commit('ADD_POST', post) } export const deletePost = ({ commit }, index) => { commit('DELETE_POST', index) } store.js export const posts = state => state.posts VuexStoreの変更 import * as actions from './actions' import * as getters from './getters' export default new Vuex.Store( { state, actions, getters, mutations }) getters.js
  12. 12. 1.0 import { addPost, deletePost } from "../../vuex/action" export default Vue.extend({ vuex: { getters: { posts: state => state.posts }, actions: { addPost,deletePost } }, 2.0 export default Vue.extend({ computed: { ...mapGetters(['posts']) }, methods: { ...mapActions( ['addPost','deletePost']), }, // this.$store.getters.posts // this.$store.dispach(‘addPost’) // とも書ける コンポーネントとVuexのバインディング
  13. 13. 1.0 import Vue from 'vue' import { sync } from 'vuex-router- sync' import store from './vuex/store' import router from './router/router' sync(store, router) router.start( Vue.extend({store}), '#app') 2.0 import Vue from 'vue' import { sync } from 'vuex-router- sync' import store from './vuex/store' import router from './router/router' sync(store, router) new Vue({store, router}) .$mount('#app') エントリーポイントの書き換え
  14. 14. 1.0 <article class="media" v-for="post in posts"> <div class="media-content"> <strong>{{post.title}}</strong> <br>{{post.body}} </div> <div class="media-right"> <button class="delete" @click="deletePost($index)"> </button> </div> </article> 2.0 <article class="media" v-for="(post, index) in posts"> <div class="media-content"> <strong>{{post.title}}</strong> <br>{{post.body}} </div> <div class="media-right"> <button class="delete" @click="deletePost(index)"> </button> </div> </article> $indexの書き換え
  15. 15. 動作確認
  16. 16. まとめ 1.0との互換性は良い (ほとんどそのまま動いた) APIのシンプルさは保たれたままでよかった イベント通知のdispachとbroadcastが無くなるemit1択 Vue.js devtoolが便利 今後パフォーマンス測定、SSRも試してみたい
  17. 17. 参考 Vue.js 2.0 Changes #2873 https://github.com/vuejs/vue/issues/2873 Vuex 2.0 design #236 https://github.com/vuejs/vuex/issues/236 Vue 2.0 RC Starter Resources https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources Vue Router next doc https://github.com/vuejs/vue-router/tree/next-doc petervmeijgaard/vue-2.0-boilerplate https://github.com/petervmeijgaard/vue-2.0-boilerplate
  18. 18. Join us!! 急募
  19. 19. おわり

×