Javascript VueJS 组件未呈现

VueJS component not rendering

提问by qweqwe

I have a very basic vueJS app which I'm following from the website.

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

Here'sthe code, why is the component not rendering?

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

HTML

HTML

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

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

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

JS

JS

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

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

采纳答案by Yann Bertrand

Better, you can use the Single File Componentsto define the todo-itemcomponent inside another file:

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

app.vue

应用程序

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

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

components/todo-item.vue

组件/todo-item.vue

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

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

In many Vue projects, global components will be defined using Vue.component, followed by new Vue({ el: '#container' })to target a container element in the body of every page.

This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:

• Global definitionsforce unique names for every component
• String templateslack syntax highlighting and require ugly slashes for multiline HTML
• No CSS supportmeans that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
• No build steprestricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel

All of these are solved by single-file components with a .vueextension, made possible with build tools such as Webpack or Browserify.

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

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

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

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

回答by yuriy636

• Use the component inside of the specified elmount element
• Define the component beforeinitializing the Vue instance with new Vue

• 使用指定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>

回答by Anyany Pan

I just have similar problem. After I try what @yuriy636 said it still not rendering. And I found that there is a component declaration in componets field like this:

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

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 ?
  }
})

After I remove 'todo-item': 'todo-item'. It works!

在我删除'todo-item': 'todo-item'. 有用！

Hope this help other guys!

希望这能帮助其他人！

回答by tno2007

My components was also not rendering.

我的组件也没有渲染。

In case it's not that obvious, like it was to me, take a look at how you are importing components.

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

For example, first I had:

例如，首先我有：

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

And had to remove the brackets, so it looked like this:

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

import CurrencyConverter from "./CurrencyConverter.vue";

Ofcourse, this means in your component you use the syntax:

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

export default {
    name: "CurrencyConverter",
}