02-Snippets/01-ListItems.html

<html>
  <head>
    <script src="https://unpkg.com/vue"></script>
    <title>List</title>
  </head>
  <body>
    <div id="app">
      <h1>List</h1>

      <ul>
          <li is="vue:todo-item" v-for="todo in todos" :key="todo" :item="todo" />
      </ul>
    </div>
  </body>
</html>


<script type="text/javascript">
  const app = Vue.createApp({
    data() {
      return {todos: ['Eat', 'Drink', 'Sleep', 'Repeat']};
    }
  });

  app.component('todo-item', {
    props: ['item'],
    template: `<li>{{ item }}</li>`
  });

  app.mount("#app");
</script>


<!-- livereload -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>