Skip to content

Commit 0741168

Browse files
ceilf6ceilf6
committed
chore[ARCH]: extract
1 parent e894cba commit 0741168

2 files changed

Lines changed: 83 additions & 70 deletions

File tree

‎Vue3/sandboxs-vite/src/App.vue‎

Lines changed: 4 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,13 @@
11
<template>
2-
<div id="app">
3-
<section class="todoapp">
4-
<header class="header">
5-
<h1>todos</h1>
6-
<input
7-
class="new-todo"
8-
autofocus=""
9-
autocomplete="off"
10-
placeholder="What needs to be done?"
11-
v-model="newTodoRef"
12-
@keyup.enter="addTodo"
13-
/>
14-
<!-- 通过 enter 修饰符，当回车时 -->
15-
</header>
16-
<section class="main">
17-
<input id="toggle-all" class="toggle-all" type="checkbox" />
18-
<label for="toggle-all">Mark all as complete</label>
19-
<ul class="todo-list">
20-
<li class="todo">
21-
<div class="view">
22-
<input class="toggle" type="checkbox" />
23-
<label>composition api demo</label>
24-
<button class="destroy"></button>
25-
</div>
26-
<input class="edit" type="text" />
27-
</li>
28-
<li class="todo">
29-
<div class="view">
30-
<input class="toggle" type="checkbox" />
31-
<label>写简历</label>
32-
<button class="destroy"></button>
33-
</div>
34-
<input class="edit" type="text" />
35-
</li>
36-
<li class="todo">
37-
<div class="view">
38-
<input class="toggle" type="checkbox" />
39-
<label>下午3点参加面试</label>
40-
<button class="destroy"></button>
41-
</div>
42-
<input class="edit" type="text" />
43-
</li>
44-
</ul>
45-
</section>
46-
<footer class="footer">
47-
<span class="todo-count">
48-
<strong>3</strong>
49-
<span>items left</span>
50-
</span>
51-
<ul class="filters">
52-
<li><a href="#/all" class="selected">All</a></li>
53-
<li><a href="#/active" class="">Active</a></li>
54-
<li><a href="#/completed" class="">Completed</a></li>
55-
</ul>
56-
<button class="clear-completed" style="display: none">
57-
Clear completed
58-
</button>
59-
</footer>
60-
</section>
61-
</div>
2+
<Todos />
623
</template>
634

645
<script>
65-
import { useNewTodo, useTodoList } from "./compositions";
6+
import Todos from "./components/Todos.vue";
667
678
export default {
68-
setup() {
69-
const { todoRef } = useTodoList();
70-
return {
71-
// todoRef: todoList.todoRef,
72-
todoRef,
73-
...useNewTodo(todoRef),
74-
};
9+
components: {
10+
Todos,
7511
},
7612
};
7713
</script>
78-
79-
<style></style>

‎Vue3/sandboxs-vite/src/components/Todos.vue‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div id="app">
3+
<section class="todoapp">
4+
<header class="header">
5+
<h1>todos</h1>
6+
<input
7+
class="new-todo"
8+
autofocus=""
9+
autocomplete="off"
10+
placeholder="What needs to be done?"
11+
v-model="newTodoRef"
12+
@keyup.enter="addTodo"
13+
/>
14+
<!-- 通过 enter 修饰符，当回车时 -->
15+
</header>
16+
<section class="main">
17+
<input id="toggle-all" class="toggle-all" type="checkbox" />
18+
<label for="toggle-all">Mark all as complete</label>
19+
<ul class="todo-list">
20+
<li class="todo">
21+
<div class="view">
22+
<input class="toggle" type="checkbox" />
23+
<label>composition api demo</label>
24+
<button class="destroy"></button>
25+
</div>
26+
<input class="edit" type="text" />
27+
</li>
28+
<li class="todo">
29+
<div class="view">
30+
<input class="toggle" type="checkbox" />
31+
<label>写简历</label>
32+
<button class="destroy"></button>
33+
</div>
34+
<input class="edit" type="text" />
35+
</li>
36+
<li class="todo">
37+
<div class="view">
38+
<input class="toggle" type="checkbox" />
39+
<label>下午3点参加面试</label>
40+
<button class="destroy"></button>
41+
</div>
42+
<input class="edit" type="text" />
43+
</li>
44+
</ul>
45+
</section>
46+
<footer class="footer">
47+
<span class="todo-count">
48+
<strong>3</strong>
49+
<span>items left</span>
50+
</span>
51+
<ul class="filters">
52+
<li><a href="#/all" class="selected">All</a></li>
53+
<li><a href="#/active" class="">Active</a></li>
54+
<li><a href="#/completed" class="">Completed</a></li>
55+
</ul>
56+
<button class="clear-completed" style="display: none">
57+
Clear completed
58+
</button>
59+
</footer>
60+
</section>
61+
</div>
62+
</template>
63+
64+
<script>
65+
import { useNewTodo, useTodoList } from "../compositions";
66+
67+
export default {
68+
setup() {
69+
const { todoRef } = useTodoList();
70+
return {
71+
// todoRef: todoList.todoRef,
72+
todoRef,
73+
...useNewTodo(todoRef),
74+
};
75+
},
76+
};
77+
</script>
78+
79+
<style></style>

0 commit comments

Comments
 (0)