feat: Add components to main.js

Author: MichaelCurrin

main.js

@@ -1,16 +1,113 @@
 import { createApp } from "https://unpkg.com/vue@3.0.7/dist/vue.esm-browser.js";
 
-const template = `
-<p>Hello, {{ name }}!</p>
-`
+const Counter = {
+  template: `
+    <div id="counter">
+      Counter: {{ counter }}
+    </div>
+  `,
+  data() {
+    return {
+      counter: 0,
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      this.counter++;
+    }, 1000);
+  },
+};
+
+const EventHandling = {
+  data() {
+    return {
+      message: "Hello Vue.js!",
+    };
+  },
+  methods: {
+    reverseMessage() {
+      this.message = this.message.split("").reverse().join("");
+    },
+  },
+  template: `
+    <div id="event-handling">
+      <p>{{ message }}</p>
+      <button v-on:click="reverseMessage">Reverse Message</button>
+    </div>
+  `,
+};
+
+const TwoWayBinding = {
+  data() {
+    return {
+      message: "Hello Vue!",
+    };
+  },
+  template: `
+    <div id="two-way-binding">
+      <p>{{ message }}</p>
+      <input v-model="message" />
+    </div>
+  `,
+};
+
+const TodoItem = {
+  props: ["todo"],
+  template: `<li>{{ todo.text }}</li>`,
+};
+
+const TodoList = {
+  components: { TodoItem },
+  data() {
+    return {
+      groceryList: [
+        { id: 0, text: "Vegetables" },
+        { id: 1, text: "Cheese" },
+        { id: 2, text: "Whatever else humans are supposed to eat" },
+      ],
+    };
+  },
+  template: `
+    <div id="todo-list-app">
+      <ol>
+        <todo-item
+          v-for="item in groceryList"
+          v-bind:todo="item"
+          v-bind:key="item.id"
+        ></todo-item>
+      </ol>
+    </div>
+  `,
+};
 
 const app = createApp({
+  components: {
+    Counter,
+    EventHandling,
+    TwoWayBinding,
+    TodoList,
+  },
   data() {
     return {
       name: "developer",
     };
   },
-  template,
+  template: `
+    <h2>Greeting</h2>
+    <p>Hello, {{ name }}!</p>
+
+    <h2>Counter</h2>
+    <Counter></Counter>
+
+    <h2>Event handling</h2>
+    <EventHandling></EventHandling>
+
+    <h2>Two-way binding</h2>
+    <TwoWayBinding></TwoWayBinding>
+
+    <h2>Todo list</h2>
+    <TodoList></TodoList>
+  `,
 });
 
 app.mount("#app");