VueJS组件不呈现

Posted 2023-02-23

【中文标题】VueJS组件不呈现

【英文标题】：VueJS component not rendering

【发布时间】：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>

JS

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

【参考方案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' 之后。有效！

希望这可以帮助其他人！