Компонент VueJS не отрисовывается

у меня есть очень простое приложение 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>'
})
6
javascript vue.js

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, эти недостатки становятся очевидными:

  • глобальные определения force уникальные имена для каждого компонента
  • строка шаблоны отсутствие подсветки синтаксиса и требуют уродливых косых черт для многострочного HTML
  • нет поддержки CSS означает, что в то время как HTML и JavaScript благодаря модульности на компоненты, CSS-это явно вышел
  • нет шага сборки ограничивает нас HTML и ES5 JavaScript, а не препроцессорами, такими как Pug (ранее Jade) и Babel

все они решаются однофайловыми компонентами с

6

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>
23