无法在 Vue 中渲染多个组件

Question

我刚开始使用 Vue，我已经定义了 2 个组件，但是，我无法在同一个“Vue”实例中呈现它们。

这是我的两个组件：

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”入口点：

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

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

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

“Vue”开发工具只显示“button-counter”组件：

如果我删除了“button-counter”，“mat-example”就会出现在 Vue 开发者工具中。

为什么我无法在我的 Vue 入口点渲染这两个组件？

Answer 1

这将起作用：

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

演示：

<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'
  })