夏の終わりのVue.js -これからのJavaScriptフレームワーク大本命-
0 likes•1,202 views
2017年8月30日にカサレアルにて開催したフリーセミナー用の発表資料です。 以下、告知時の文章です。 フレームワークを決めるのは、Vue.jsを試してからでも遅くありません！ 「ReactかAngularか、どっちにしようかな？」 ・・・と、JavaScriptフレームワークを迷っている方は多いのではないでしょうか？ ちょっと待ってください。 両方のいいとこ取りのVue.jsを体験してから決めませんか。 2014年にリリースされ、2016年に最新バージョンの2.0が発表されたVue.jsは 日本語の公式ドキュメントもあり（しかもわかりやすい！）、 シンプルなAPIで多くのエンジニアに愛されています。 機能が足りないときには、Web上から好きなライブラリを選択し、 機能拡張を行えるなど、汎用性にも優れています。 本セミナーでは、Vue.jsの全体像を整理した後、 React、Angularとの比較も交えてVue.jsを体験して頂きます。 他のフレームワークと一線を画するVue.jsで、新しい風を感じてみませんか？
![<div id="app">
<ul>
<li v-for="type in bloodTypes">
{{type}}
</li>
</ul>
</div>
new Vue({
el: '#app',
data() {
return {
bloodTypes:
['A','B','AB','O']
}
}
})](https://image.slidesharecdn.com/vue-170904033621/85/Vue-js-JavaScript-13-320.jpg)
![<template id="template-result">
<span>
{{result}}
</span>
</template>
<template id="template-calc">
<div>
{{num1}} + {{num2}} =
<result-component
v-bind:result="num1+num2" />
</div>
</template>
const ResultComponent = {
template: '#template-result',
props: ['result']
}
const CalcComponent = {
template: '#template-calc',
data() {
return {
num1: 2,
num2: 3
}
},
components: {ResultComponent}
}](https://image.slidesharecdn.com/vue-170904033621/85/Vue-js-JavaScript-16-320.jpg)
 {
state.deposit -= payload
}
}
})
{{this.$store.state.deposit}}this.$store.commit('PAYMENT',100)](https://image.slidesharecdn.com/vue-170904033621/85/Vue-js-JavaScript-19-320.jpg)
![const router = new VueRouter({
routes:[
{path:'/', component:IndexComponent},
{path:'/list', component:ListComponent},
]
})
<div id="app">
<div>
<router-link to="/">IndexPage </router-link>
<router-link to="/list">ListPage </router-link>
</div>
<div>
<router-view> </router-view>
</div>
</div>](https://image.slidesharecdn.com/vue-170904033621/85/Vue-js-JavaScript-21-320.jpg)
夏の終わりのVue.js -これからのJavaScriptフレームワーク大本命-
- 10. <div id="app"> {{price}} <button @click="taxIn"> </button> </div> new Vue({ el: '#app', data() { return { price: 100 } }, methods: { taxIn() { alert(this.price*1.08) } } })
- 11. <div id="app"> {{price}}:{{taxIn}} </div> new Vue({ el: '#app', data() { return { price: 100 } }, computed: { taxIn() { return this.price*1.08 } } })
- 12. <div id="app"> <div v-if="age >= 20"> {{age}} </div> <div v-else-if="age >= 18"> {{age}} </div> <div v-else> {{age}} </div> </div> new Vue({ el: '#app', data() { return { age: 19 } } })
- 13. <div id="app"> <ul> <li v-for="type in bloodTypes"> {{type}} </li> </ul> </div> new Vue({ el: '#app', data() { return { bloodTypes: ['A','B','AB','O'] } } })
- 14. HTMLJavaScript
- 15. <template id="template-calc"> <div> {{num1}} + {{num2}} </div> </template> <div id="app"> <calc-component/> </div> const CalcComponent = { template: '#template-calc', data() { return { num1: 2, num2: 3 } } } new Vue({ el: '#app', components: {CalcComponent} })
- 16. <template id="template-result"> <span> {{result}} </span> </template> <template id="template-calc"> <div> {{num1}} + {{num2}} = <result-component v-bind:result="num1+num2" /> </div> </template> const ResultComponent = { template: '#template-result', props: ['result'] } const CalcComponent = { template: '#template-calc', data() { return { num1: 2, num2: 3 } }, components: {ResultComponent} }
- 19. const store = new Vuex.Store({ state: { deposit: 1000 }, mutations: { ['PAYMENT'](state, payload) { state.deposit -= payload } } }) {{this.$store.state.deposit}}this.$store.commit('PAYMENT',100)
- 21. const router = new VueRouter({ routes:[ {path:'/', component:IndexComponent}, {path:'/list', component:ListComponent}, ] }) <div id="app"> <div> <router-link to="/">IndexPage </router-link> <router-link to="/list">ListPage </router-link> </div> <div> <router-view> </router-view> </div> </div>
- 24. <template> <div>{{msg}} </div> </template> <script> export default { data:{ return {msg:'Hello'} } } </script> <style> div { background: #999; } </script>
- 26. ✖