template: '<App/>' は一体どんな意味がるのでしょうか？？

Question

最近vueを初めてみました。全然わかっていません。

hello_vue.js

import Vue from 'vue'

import App from './app.vue'

document.body.appendChild(document.createElement('hello'))

new Vue({
  el: 'hello',
  template: '<App/>',
  components: { App }
})

このときの template: '<App/>',はどういう役割を担っているのでしょうか？？

↓app.vue

<template>
  <div id="app">
    Hello Vue!
  </div>
</template>

<App/>のタグはありませんし、削除すると文言が表示されなくなるし、よくわかりませんでした。

Answer 1

コンポーネントですね。
https://jp.vuejs.org/v2/guide/components.html

<App />をapp.vueのテンプレート内の内容に置き換えることをしてくれます。

※どこのサンプルかわからないですが

document.body.appendChild(document.createElement('hello'))

でわざわざやるようなことないはずなんですが・・・
大体
index.htmlで

<div id="app"></div>

を定義してindex.jsなりで

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

ってやるのが普通かな
https://jp.vuejs.org/v2/guide/single-file-components.html
サンドボックスの例をやっていくのがいいかと

Comments

[nama-chan]

ご回答ありがとうございます！！

<App/>というのは<コンポーネント名/>ということでよいのでしょうか？？

[rururu3]

components: { App }
ここが重要で、これ省略せずに書いたら
components: { App: App }
になります。そしてこの左側がHTMLのタグとして利用することができます。

ので
components: { hoge: App }
とかくと
template: '<hoge />'
で変換されます。

[nama-chan]

なるほど！！！そんな省略があるのですね！！！理解できました！！
ずっと考えていたのでほんとに助かりました！ありがとうございます！

[rururu3]

https://qiita.com/isuke/items/3572e3b1c3677961f127
キャメル式がケバブ式になるのは後々覚えておくといいですよ

[nama-chan]

なるほどなるほど????！！！勉強になります！！重ね重ねありがとうございます！！