时间戳

首页 > 解决方案 > Vuejs：Vue.component 似乎不起作用

javascript - Vuejs：Vue.component 似乎不起作用

问题描述

我不确定我做错了什么，但我声明的 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 没有显示任何内容。

标签： javascriptvue.jsclient-side

解决方案

Vue.component必须先调用才能 new Vue让 Vue 实例使用该组件。从文档中（诚然，这并不是很清楚）：

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

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

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

#app正如 CUGreen 的回答所指出的那样，您的应用程序代码必须全部在div 内。

推荐阅读