VueJS组件不呈现答案

【问题标题】：VueJS component not renderingVueJS组件不呈现
【发布时间】：2017-12-02 00:01:57
【问题描述】：

我有一个非常基本的 vueJS 应用程序，我正在从网站上关注它。

Here's代码，为什么组件不渲染？

HTML

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

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

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

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

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

【问题讨论】：

您的<todo-item> 不在<div id="app"> 之外，这是Vue 挂载点。
@yuriy636 不起作用，即使我将 <ol> 放入 div#app .. link

标签： javascript vue.js rendering vue-component

【解决方案1】：

使用组件在指定el挂载元素内
定义组件之前用new Vue初始化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>

【讨论】：

这个是正确答案。根据文档，确实需要在实例化 Vue 之前声明组件:)
如果你想扩大你的应用程序，你真的应该看看single file component 结构而不是在一个文件中定义每个组件。
我刚刚意识到很久以前我显然对这个答案投了反对票。我不知道为什么并假设我错误地点击了。但是，与此同时我无法撤消它，我的选择是“锁定的”，除非答案将被编辑。所以我要求 yuriy636 在她/他的答案中编辑一些内容，这样我就可以撤消我愚蠢的反对票。我真的很抱歉！
很高兴您收到消息并可以编辑您的答案，@yuriy636！我可以把我的投票变成赞成票！感谢您的理解！

【解决方案2】：

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

app.vue

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

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

组件/todo-item.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 等构建工具实现。

【讨论】：

这对我在 Chrome 上的小提琴不起作用。你认为 Fiddle 只是错误地加载了 Vue？
我已经添加了一些解释
Vue.Component('...') 将全局声明组件。在components {}里面使用Vue.Component是错误的

【解决方案3】：

我的组件也没有渲染。

如果它不是那么明显，就像对我一样，看看你是如何导入组件的。

例如，首先我有：

import { CurrencyConverter } from "./CurrencyConverter.vue";

并且不得不删除括号，所以看起来像这样：

import CurrencyConverter from "./CurrencyConverter.vue";

当然，这意味着在您的组件中使用以下语法：

export default {
    name: "CurrencyConverter",
}

【讨论】：

【解决方案4】：

我只是有类似的问题。在我尝试了@yuriy636 所说的之后，它仍然没有渲染。我发现在组件字段中有一个组件声明，如下所示：

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    'todo-item': 'todo-item',  <--- see this ?
  }
})

在我删除 'todo-item': 'todo-item' 之后。有效！

希望这可以帮助其他人！

【讨论】：