Question

我有一个非常基本的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>'
})

Answer 1

在指定的<li ng-repeat="theme in Destinations.themes"> <p>{{theme.name}}</p> <img src="{{theme.imageUrl}}"/> </li>装载元素

组件

使用el 初始化Vue实例前定义组件

＆＃13;
＆＃13;
new Vue
＆＃13;
Vue.component('todo-item', { template: '<li>This is a list item</li>' }) new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
＆＃13;
＆＃13;
＆＃13;

Answer 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等构建工具实现。

Answer 3

我的组件也没有渲染。

如果不是很明显，就像我所看到的，请看一下如何导入组件。

例如，首先我有：

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

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

import CurrencyConverter from "./CurrencyConverter.vue";

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

export default {
    name: "CurrencyConverter",
}

Answer 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'之后。可行！

希望对其他人有帮助！

VueJS组件无法渲染

4 个答案: