質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

291閲覧

vue-cli 理解

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/06/09 03:47

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しか表示されませんでした...

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

※完全回答ではないと思いますが、少しでも理解が進めばと思い回答します。

これはrouterというフォルダのパスを示すだけで、中のindex.jsを持ってこれるのですか

こちらはindex.jsがあればそちらを認識したと思います

newVue部分については実際のVueを初期化するjavascriptになります。

このjavascriptから実際にページ上で#app要素にVueを適用しますよ、というようなことが設定されていて、あとはAppコンポーネントやRouterから全てが表示されるような仕組みです。

javascript

1new Vue({ 2 el: '#app', // id app に適用する 3 router, // router: routerと同じ意味です。 route/index.jsで定義されているnew Router によってRouterインスタンスが入ります。 4 components: { App }, // App.vueというコンポーネントを使いますという登録です。 5 template: '<App/>' // .vueファイルのtemplateタグと同じです。 <App></App> と同じ意味で、App.vueを表示するという形になります。 6})

これは例えばScene1とScene2を同じページに並べたい場合にはどのようにすればいいのでしょうか

通常はページごとにページ用の大枠のコンポーネントみたいなものを作ります。

Scene1PageViewで

vue

1<template> 2 <div> 3 <Scene1/> 4 <Scene2/> 5 </div> 6</template>

というふうに表示することになるかと思います。

違うページに相当するコンポーネントを2つ表示することは中々ないと思いますが、
違うコンポーネントからScene1/Scene2をどちらにせよ読み込むという形になるのではないかと思います。

投稿2018/06/09 04:47

isoppp

総合スコア102

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/06/09 05:37

回答ありがとうございます template: '<App/>' というのはhtml側にAppタグを生み出し、そこにAppコンポーネントが当てはまる感じでしょうか... だとするならば、それはApp.vueで export default { name: 'App' } という風に、name: "App"と宣言してるから可能なのでしょうか name: "xxx"というのが xxxコンポーネントっていう捉え方でいいのでしょうか 単一ファイルコンポーネントから、別の単一ファイルコンポーネントを呼べましたので、そんな感じでできました!!! ありがとうございます!
karamarimo

2018/06/09 07:18

html側にAppタグを生み出すというか、template内のAppタグをAppコンポーネントとして解釈するようにする、ということですね。 タグ名とname option は関係なくて、components プロパティでのキー名になっています。 { App } は { App: App } の省略形ですから、'App'という名前で App.vue が使えるようになります。
退会済みユーザー

退会済みユーザー

2018/06/09 08:24

少しわかってきました、ありがとうございます...
isoppp

2018/06/09 12:37

お返事遅くなりすみません! template内のAppがコンポーネントとして認識されて、#app内にvueが適用するというイメージです。 また、既に把握されていそうですが、nameについては特にコンポーネント登録時に影響はなく、 importによって読み込まれた部分を App: Appによって渡すという感じです。 vueファイルはjsファイルにトランスパイルされるため、このApp: Appの右側のAppという値はrouterを適応しているのと同様jsファイルをimportしたあとにそれを適用しているようなイメージとなります。 コンポーネントもnew Vueしているような所と同じような感じで記載できますが、それが書きにくいためvueファイルという形式が生まれてそれをjsにトランスパイルできるような仕組みが提供されています。
退会済みユーザー

退会済みユーザー

2018/06/11 02:52

とんでもないです、回答本当にありがたいです。 nameについて、 "importによって読み込まれた部分を App: Appによって渡す"ということですが、 import App from './App' によってApp.vueの全体がAppという名前で渡ってきた。 App.vueの全体というか、App.vueファイル自体が渡ってきて、それをAppという名前で扱うことにした。 そしてそのApp.vueファイルの中のAppというコンポーネントを使うといった感じでしょうか。 つまり、{ App: App } は、 { App.vueというファイル : その中のAppコンポーネント }みたいな感じでしょうか...。
isoppp

2018/06/11 04:07

完璧にトランスパイルの流れが私も理解できていないと思いますが、 > App.vueファイル自体が渡ってきて、 という部分は.vue形式のファイルがトランスパイルされる際にes modulesの形式(js)に変換されてそれをimportしていると理解しています。 もしかするとvueファイルが恐らくなかったバージョン1系のドキュメントをぱらぱらと見ると理解できることが多い良いかもしれません。 https://v1-jp.vuejs.org/guide/components.html
退会済みユーザー

退会済みユーザー

2018/06/11 04:13

ありがとうございます... 読んでみます
karamarimo

2018/06/11 04:35

> App.vueの全体というか、App.vueファイル自体が渡ってきて、それをAppという名前で扱うことにした。 > そしてそのApp.vueファイルの中のAppというコンポーネントを使うといった感じでしょうか。 App.vue 内で export default でオブジェクト(コンポーネントの設定)がエクスポートされていますよね? import App from './App' というのは、App.vue というファイルの今言った default export であるオブジェクトが App という名前の変数で使えるようになるということです。 vue-loaderの性質上、default export がそのまま export されるわけではなく、テンプレートの情報なども追加されて export されますが、使う側としては、このようにコンポーネントがインポートできるんだということで、詳細は気にする必要はありません。 ES6 import/export https://qiita.com/bmf_san/items/bdb67c7abf4d381cf976 > つまり、{ App: App } は、 > { App.vueというファイル : その中のAppコンポーネント }みたいな感じでしょうか...。 いえ、違います。{ } がオブジェクトリテラルであるということは分かりますか? オブジェクトの key に任意の名前を、value にコンポーネントを指定します。 例えば { MyComponent: App } とすれば App という変数に入ったコンポーネントがテンプレート内で <MyComponent/> と使えるようになります。
退会済みユーザー

退会済みユーザー

2018/06/11 04:45 編集

回答ありがとうございます。 やっとわかった気がします。 今試しに new Vue({ el: '#app', router, components: { MyComponent: App }, template: '<MyComponent/>' }) このように変えてみたのですが、同じようにできました。 components: { "タグ名" : "単一ファイルコンポーネントオブジェクト(?)" } みたいな感じですね そもそもファイル全体とかいう概念は全然間違ってましたね...
isoppp

2018/06/11 05:05

karamarimoさん とても分かりやすい説明ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問