尝试在Vue中尝试Hello World时会出现错误

Question

我有这个错误：

组件模板应完全包含一个根元素。如果是 在多个元素上使用v-if，使用v-else-if链接。

尝试时：

<template>
    <h1>Il tuo oroscopo</h1>
    <h3>{{ msg }}</h3>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello World!'
        }
    }
}
</script>

<style scoped></style>

Answer 1

您必须将DIV放在根本上。只有一个。

<template>
<div>
    <h1>Il tuo oroscopo</h1>
    <h3>{{ msg }}</h3>
</div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello World!'
        }
    }
}
</script>

<style scoped></style>

Answer 2

正如错误所说的那样，组件模板应完全包含一个根元素。

这意味着，将模板内容包裹在单个元素中，该元素将作为根元素可用。因此，用＆lt; div＆gt;包裹将解决此错误。

演示：

Vue.component('child', {
  props: ['childmsg'],
  template: `<div><h1>Il tuo oroscopo</h1>
                     <h3>{{ childmsg }}</h3></div>`
});

var app = new Vue({
  el: '#app',
  data: {
        msg: 'Hello World!'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child :childmsg="msg">
  </child>
</div>