Vuejs：Vue.component 似乎不起作用

Question

I am unsure am I doing something wrong but the vuejs component I declared is not working.

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

I am using the JsFiddle, message part does display the data but the todo-item didn't show anything.

Answer 1

Vue.component has to be called before new Vue in order for the Vue instance to use the component. 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!'
  }
})

That, and your app's code has to all be inside of the #app div, as pointed out by CUGreen's answer.

Answer 2

Your component needs to inside your "#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>

Here is a working fiddle .