Question

我正在尝试从Vue docs运行有关组件的代码，但该组件未显示。为什么不呢？

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <todo-item></todo-item>
  </div>
  <script>
    Vue.component('todo-item', {
      template: '<li>This is a todo</li>'
    })
  </script>
</body>
</html>

Answer 1

您需要创建一个Vue实例，并告诉它根页元素在页面中的位置（在这种情况下为#app）：

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var app = new Vue({
  el: '#app'
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
    <todo-item></todo-item>
</div>

Vue组件未显示

1 个答案: