VueJS组件不呈现

Question

我有一个非常基本的 VueJS 应用程序，我正在通过关注该网站来构建它。

这是 代码，为什么这个组件不渲染？

HTML：

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

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

    <div>
    <ol>
      <todo-item></todo-item>
    </ol>
    </div>

JS：

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

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

原文由 qweqwe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更好的是，您可以使用 单文件组件 在另一个文件中定义 todo-item 组件：

应用程序.vue

  import TodoItem from './components/todo-item'

 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    TodoItem
  }
})

组件/待办事项.vue

 <template>
  <li>This is a list item</li>
</template>

<script>
  export default {
    name: 'todo-item'
  }
</script>

在许多 Vue 项目中，全局组件将使用 Vue.component 定义，然后使用 new Vue({ el: '#container' }) 来定位每个页面正文中的容器元素。

这对于中小型项目非常有效，其中 JavaScript 仅用于增强某些视图。然而，在更复杂的项目中，或者当您的前端完全由 JavaScript 驱动时，这些缺点会变得很明显：

• 全局定义 强制每个组件使用唯一名称
• 字符串模板 缺乏语法高亮，并且需要丑陋的斜线用于多行 HTML
• 不支持 CSS 意味着虽然 HTML 和 JavaScript 被模块化为组件，但 CSS 明显被遗漏了
• 没有构建步骤 限制我们使用 HTML 和 ES5 JavaScript，而不是像 Pug（以前的 Jade）和 Babel 这样的预处理器

所有这些都可以通过带有 .vue 扩展名的单文件组件来解决，这可以通过 Webpack 或 Browserify 等构建工具实现。

原文由 Yann Bertrand 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

• 使用 指定 el 安装元素内的组件
• 在初始化 Vue 实例 之前 定义组件 new Vue

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

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

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

<div id="app">
  <ol>
    <todo-item></todo-item>
  </ol>
  <p>{{ message }}</p>
</div>

<div>

</div>

原文由 yuriy636 发布，翻译遵循 CC BY-SA 4.0 许可协议