https://qiita.com/MariMurotani/items/5fbea5942d2edf149989
↑上を参考にvueの勉強をしています...
が、分からないことだらけです、教えてください...
javascript
1//main.js 2 3// The Vue build version to load with the `import` command 4// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 5import Vue from 'vue' 6import App from './App' 7import router from './router' 8 9Vue.config.productionTip = false 10 11/* eslint-disable no-new */ 12new Vue({ 13 el: '#app', 14 router, 15 components: { App }, 16 template: '<App/>' 17})
javascript
1//App.vue 2 3<template> 4 <div id="app"> 5 <img src="./assets/logo.png"> 6 <router-view/> 7 </div> 8</template> 9 10<script> 11export default { 12 name: 'App' 13} 14</script> 15 16<style> 17#app { 18 font-family: 'Avenir', Helvetica, Arial, sans-serif; 19 -webkit-font-smoothing: antialiased; 20 -moz-osx-font-smoothing: grayscale; 21 text-align: center; 22 color: #2c3e50; 23 margin-top: 60px; 24} 25</style> 26
javascript
1//router/index.js 2 3import Vue from 'vue' 4import Router from 'vue-router' 5//import HelloWorld from '@/components/HelloWorld' 6import Scene1 from '@/components/Scene1' 7import Scene2 from '@/components/Scene2' 8 9Vue.use(Router) 10 11export default new Router({ 12 routes: [{ 13 path: '/', 14 name: 'Scene1', 15 component: Scene1 16 }, { 17 path: '/Scene2', 18 name: 'Scene2', 19 component: Scene2 20 }] 21})
javascript
1//Scene1.vue 2 3<template> 4 <div class="hello"> 5 <p @click="alertLocation">{{ msg }}</p> 6 <router-link to="/scene2">Scene2にいくよ!</router-link> 7 </div> 8</template> 9 10<script> 11export default { 12 name: 'Scene1', 13 data () { 14 return { 15 msg: 'This is Secne1!' 16 } 17 },methods:{ 18 alertLocation: function(){ 19 alert("This is Secne1!") 20 } 21 } 22} 23</script> 24 25<!-- Add "scoped" attribute to limit CSS to this component only --> 26<style scoped> 27h1, h2 { 28 font-weight: normal; 29} 30ul { 31 list-style-type: none; 32 padding: 0; 33} 34li { 35 display: inline-block; 36 margin: 0 10px; 37} 38a { 39 color: #42b983; 40} 41p{ 42 cursor: pointer; 43 color: blue; 44} 45</style> 46
javascript
1//Scene2.vue 2 3<template> 4 <div class="hello"> 5 <p @click="alertLocation">{{ msg }}</p> 6 <router-link to="/">Scene1にいくよ!</router-link> 7 </div> 8</template> 9 10<script> 11export default { 12 name: 'Scene2', 13 data () { 14 return { 15 msg: 'This is Scene2!' 16 } 17 },methods:{ 18 alertLocation: function(){ 19 alert("This is Secne2!") 20 } 21 } 22} 23</script> 24 25<!-- Add "scoped" attribute to limit CSS to this component only --> 26<style scoped> 27h1, h2 { 28 font-weight: normal; 29} 30ul { 31 list-style-type: none; 32 padding: 0; 33} 34li { 35 display: inline-block; 36 margin: 0 10px; 37} 38a { 39 color: #42b983; 40} 41p{ 42 cursor: pointer; 43 color: blue; 44} 45</style> 46
/main.jsについて/
import router from './router'
これはrouterというフォルダのパスを示すだけで、中のindex.jsを持ってこれるのですか。
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
components: { App }によって、#app仮装DOMにAppというコンポーネントが適用されるのでしょうか
さらに、ここの routerという宣言によって、App.vueの中での <router-view/> という宣言が可能になるのでしょうか
最後に template: '<App/>' これに関しては意味が全く分かりません...
どのような意味でしょうか
調べていても、ここに、Appなどという独自タグ?を書いてる事例を見つけられなくて
/.vueについて/
"こちらのrouter-viewタグには
export default new Router(...)で指定したコンポーネントが置換されます。"
というところについて、これは例えばScene1とScene2を同じページに並べたい場合にはどのようにすればいいのでしょうか
export default new Router({
routes: [{
path: '/',
name: 'Scene1',
component: Scene1
}, {
path: '/Scene2',
name: 'Scene2',
component: Scene2
}]
})
ここの path: '/Scene2' を path: '/'にしてみたところ、Scene1しか表示されませんでした...
あとは App.vueの <router-view/> を続けて二回書いてみたら上からScene1、Scene2が表示されるのかなと思ったのですがScene1しか表示されませんでした...
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/09 05:37
2018/06/09 07:18
退会済みユーザー
2018/06/09 08:24
2018/06/09 12:37
退会済みユーザー
2018/06/11 02:52
2018/06/11 04:07
退会済みユーザー
2018/06/11 04:13
2018/06/11 04:35
退会済みユーザー
2018/06/11 04:45 編集
2018/06/11 05:05