Vuejs：Vue.component 似乎不起作用

Question

我不确定我做错了什么，但我声明的 vuejs 组件不起作用。

    <script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>

</div>

  <ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

JavaScript:

var a = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Vue.component('todo-item', 
{
  template: '<li>This is a todo</li>'
})

我正在使用 JsFiddle，消息部分确实显示了数据，但待办事项没有显示任何内容。

Answer 1

Vue.component 必须在 之前调用 new Vue 以便 Vue 实例使用该组件。 From the docs (which aren't all that clear on this, admittedly):

These components are globally registered. That means they can be used in the template of any root Vue instance (new Vue) created after registration.

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var a = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

正如 CUGreen 的回答所指出的那样，您的应用代码必须全部位于 #app div 中。

Answer 2

您的组件需要在您的“#app”中 div。

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <p>{{ message }}</p>
    <ol>
        <!-- Create an instance of the todo-item component -->
        <todo-item></todo-item>
    </ol>
</div>

这是一个有效的 fiddle。

Vuejs：Vue.component 似乎不起作用

Vuejs : Vue.component not seems to work

javascript

vue.js

client-side