Vuejs: Vue.component, похоже, не работает

Я не уверен, что делаю что-то не так, но объявленный мной компонент vuejs не работает.

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

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

</div>

  <ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

JavaScript:

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

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

Я использую JsFiddle, часть сообщения отображает данные, но элемент задачи ничего не показывает.

javascript vue.js client-side

01.05.2018 04:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Vue.component должен называться передnew Vue, чтобы экземпляр Vue мог использовать компонент. Из документов (которые, по общему признанию, не так понятны):

These components are globally registered. That means they can be used in the template of any root Vue instance (new Vue) created after registration.

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

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

Это и код вашего приложения должны находиться внутри блока #app, как указано в ответе CUGreen.

это имеет смысл .... vuejs.org/v2/guide/index.html Я перехожу по этой ссылке, но не вижу этого предложения.

— 01.05.2018 05:15

01.05.2018 05:11

Ответ принят как подходящий

Ваш компонент должен находиться внутри вашего div "#app".

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

<div id = "app">
    <p>{{ message }}</p>
    <ol>
        <!-- Create an instance of the todo-item component -->
        <todo-item></todo-item>
    </ol>
</div>

Вот рабочий рабочий пример.

01.05.2018 05:11