siberiy4/task.html

## task.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <task-list></task-list>
    </div>
  </body>

  <script>
    Vue.component("task-list", {
      template: `
            <div>
                <task v-for="task in tasks">{{task.task}}</task>
            </div>
        `,
      data() {
        return {
          tasks: [
            { task: "A", complete: true },
            { task: "B", complete: false },
            { task: "C", complete: true }
          ]
        };
      }
    });

    Vue.component("task", {
      template: "<li><slot></slot></li>"
    });
    new Vue({
      el: "#root"
    });
  </script>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	</head>
	<body>
	<div id="root">
	<task-list></task-list>
	</div>
	</body>

	<script>
	Vue.component("task-list", {
	template: `
	<div>
	<task v-for="task in tasks">{{task.task}}</task>
	</div>
	`,
	data() {
	return {
	tasks: [
	{ task: "A", complete: true },
	{ task: "B", complete: false },
	{ task: "C", complete: true }
	]
	};
	}
	});

	Vue.component("task", {
	template: "<li><slot></slot></li>"
	});
	new Vue({
	el: "#root"
	});
	</script>
	</html>