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で、新しい風を感じてみませんか？

7. HTMLJavaScript

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>

25. js
JavaScript
WebPack
(VueLoader)
IndexComponent.vue
ListComponent.vue
EditComponent.vue

26. ✖