- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-10-07T11:15:32+00:00","","")
#mynavi(Vue.js)
#setlinebreak(on);
* 目次 [#g3ebd959]
#contents
- 関連
-- [[Vue.js]]
* 概要 [#l91110ad]
#html(<div style="padding-left: 10px;">)
ここでは is 属性を使用して表示する画面を切り替える方法について記載する。
※Vue-router を使用する方法についてはここでは記載しない。
#html(</div>)
* プロジェクトの作成 [#febbadc9]
#html(<div style="padding-left: 10px;">)
#myterm2(){{
vue create sample-project
cd sample-project
}}
#html(</div>)
* イベントハンドリング用オブジェクト [#m1d5893a]
#html(<div style="padding-left: 10px;">)
コンポーネント間でイベントのやり取りを行う為のオブジェクトを作成しておく。
src/EventHub.js
#mycode2(){{
import Vue from 'vue'
const EventHub = new Vue()
export default EventHub
}}
#html(</div>)
* メイン画面の作成 [#h66101bb]
#html(<div style="padding-left: 10px;">)
src/main.js
#mycode2(){{
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
}}
src/App.vue
#mycode2(){{
<template>
<div id="app">
<!-- ヘッダ -->
<Header />
<!-- メインコンテンツ -->
<component v-bind:is="currentView"></component>
<!-- フッタ -->
<Footer msg="Footer Content"/>
</div>
</template>
<script>
import EventHub from './EventHub.js'
import Header from './components/Header.vue'
import Top from './components/Top.vue'
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'
import Footer from './components/Footer.vue'
export default {
name: 'app',
components: {
Header, Top, Page1, Page2, Footer
},
data: function(){
return {
currentView: "Top"
}
},
methods: {
// 画面の切り替え
switchView(viewName) {
this.currentView = viewName;
}
},
created: function(){
// switchViewイベント発生時に画面を切り替える
EventHub.$on('switchView', this.switchView)
}
}
</script>
<style>
html,body {
margin: 0;
}
#app .main {
padding-bottom: 40px;
}
#app .footer {
position: fixed;
bottom: 0;
width: 100%;
}
</style>
}}
#html(</div>)
* ヘッダコンポーネント [#y56d25f2]
#html(<div style="padding-left: 10px;">)
src/components/Header.vue
#mycode2(){{
<template>
<div class="header" style="background: #333; color: #fff;">
<ul id="header-menu">
<li v-on:click="menuClicked('Top')">TOP</li>
<li v-on:click="menuClicked('Page1')">画面1</li>
<li v-on:click="menuClicked('Page2')">画面2</li>
</ul>
</div>
</template>
<script>
import EventHub from '../EventHub.js'
export default {
name: 'Header',
methods: {
"menuClicked" : function(pageName){
// メニューがクリックされた時は switchView イベントを発火する
EventHub.$emit('switchView', pageName)
},
}
}
</script>
<style scoped>
#header-menu {
list-style-type: none;
margin: 0;
padding: 0;
}
#header-menu.ul,#header-menu li {
display: inline-block;
}
#header-menu li {
padding: 10px;
border-right: 1px dotted #fff;
cursor: pointer;
}
#header-menu li:hover {
opacity: 0.8;
text-decoration: underline;
}
</style>
}}
#html(</div>)
* フッタコンポーネント [#d9ecae6a]
#html(<div style="padding-left: 10px;">)
src/components/Footer.vue
#mycode2(){{
<template>
<div class="footer" style="background: #333; color: #fff">
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
name: 'Footer',
props: {
msg: String
}
}
</script>
}}
#html(</div>)
* 各画面コンポーネント [#kfcdd253]
#html(<div style="padding-left: 10px;">)
src/components/Top.vue
#mycode2(){{
<template>
<div class="main">
<h1>Top content</h1>
</div>
</template>
<script>
export default {
name: 'Top'
}
</script>
}}
src/components/Page1.vue
#mycode2(){{
<template>
<div class="main">
<h1>Page1 content</h1>
</div>
</template>
<script>
export default {
name: 'Page1'
}
</script>
}}
src/components/Page2.vue
#mycode2(){{
<template>
<div class="main">
<h1>Page2 content</h1>
</div>
</template>
<script>
export default {
name: 'Page2'
}
</script>
}}
#html(</div>)