feat: todoList demo

Author: ceilf6

Vue3/sandboxs-vite/src/App.vue

@@ -1,9 +1,78 @@
 <template>
-  <div id="app"></div>
+  <div id="app">
+    <section class="todoapp">
+      <header class="header">
+        <h1>todos</h1>
+        <input
+          class="new-todo"
+          autofocus=""
+          autocomplete="off"
+          placeholder="What needs to be done?"
+        />
+      </header>
+      <section class="main">
+        <input id="toggle-all" class="toggle-all" type="checkbox" />
+        <label for="toggle-all">Mark all as complete</label>
+        <ul class="todo-list">
+          <li class="todo">
+            <div class="view">
+              <input class="toggle" type="checkbox" />
+              <label>composition api demo</label>
+              <button class="destroy"></button>
+            </div>
+            <input class="edit" type="text" />
+          </li>
+          <li class="todo">
+            <div class="view">
+              <input class="toggle" type="checkbox" />
+              <label>写简历</label>
+              <button class="destroy"></button>
+            </div>
+            <input class="edit" type="text" />
+          </li>
+          <li class="todo">
+            <div class="view">
+              <input class="toggle" type="checkbox" />
+              <label>下午3点参加面试</label>
+              <button class="destroy"></button>
+            </div>
+            <input class="edit" type="text" />
+          </li>
+        </ul>
+      </section>
+      <footer class="footer">
+        <span class="todo-count">
+          <strong>3</strong>
+          <span>items left</span>
+        </span>
+        <ul class="filters">
+          <li><a href="#/all" class="selected">All</a></li>
+          <li><a href="#/active" class="">Active</a></li>
+          <li><a href="#/completed" class="">Completed</a></li>
+        </ul>
+        <button class="clear-completed" style="display: none">
+          Clear completed
+        </button>
+      </footer>
+    </section>
+  </div>
 </template>
 
 <script>
-export default {};
+import { ref, watchEffect } from "vue";
+import * as todoStorage from "./utils/todoStorage";
+
+export default {
+  setup() {
+    const todoRef = ref(todoStorage.fetchTodos());
+    // 监控副作用
+    // 在 watch 中读取的会自动收集依赖
+    // 当依赖变化时会自动运行该副作用函数
+    watchEffect(() => {
+      todoStorage.saveTodos(todoRef.value);
+    });
+  },
+};
 </script>
 
 <style></style>

Vue3/sandboxs-vite/src/assets/checked.svg

@@ -0,0 +1,4 @@
+
+export default function useTodoList() {
+
+}