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，消息部分确实显示数据，但todo-item没有显示任何内容。

Answer 1

为了让Vue实例使用该组件，必须在 Vue.component之前将

new Vue称为。 From the docs (which aren't all that clear on this, admittedly):

这些组件是全球注册的。这意味着它们可以在注册后创建的任何根Vue实例（新Vue）的模板中使用。

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

您的组件需要在您的＃34;＃app＆＃34;格。

<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似乎不起作用

2 个答案: