无法在Vue中呈现多个组件

Question

我刚开始使用Vue而且我已经定义了2个组件，但是，我无法将它们渲染到相同的“Vue”组合中。实例

以下是我的2个组成部分：

Vue.component('mat-example', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

接下来，我确实有“Vue＆＃39;入口点定义：

var app = new Vue({
  el: '#app'
});

在我的HTML中，我确实有以下代码：

<div id="app">
    <button-counter />
    <mat-example />
</div>

＆＃39; Vue＆＃39;开发工具只显示＆＃39;按钮计数器＆＃39;成分：

如果我删除了＆＃39;按钮计数器＆＃39;，那么＆＃39; mat-example＆＃39;出现在Vue Developer Tools中。

我怎么能在我的Vue入口点渲染这两个组件？

Answer 1

这将起作用：

<div id="app">
    <button-counter></button-counter>
    <mat-example></mat-example>
</div>

演示：

  Vue.component('mat-example', {
    data: function() {
      return {
        count: 0
      }
    },
    template:
      '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })

  Vue.component('button-counter', {
    data: function() {
      return {
        count: 0
      }
    },
    template:
      '<button v-on:click="count++">You clicked me {{ count }} times</button>'
  })

  var app = new Vue({
    el: '#app'
  })

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <div id="app">
        <button-counter></button-counter>
        <mat-example></mat-example>
    </div>