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

Answer 1

• 使用指定的elmount元素内部的组件.
• 在初始化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>

Answer 2

更好的是,您可以使用单个文件组件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等构建工具实现.