vue3 todolist 简单例子

vue3 简单的TodList
地址： https://gitee.com/cheng_yong_xu/vue3-composition-api-todo-app-my
效果

step-1

初始化项项目

我们不采用vue cli 搭建项目
直接将上图文件夹，复制到vscode编辑器，清空App.vue的内容
安装包

1. # 安装包
2. npm i
3. # 启动
4. npm run serve

复制代码

step-2

先写样式结构

1. <!-- src\App.vue -->
2. <template>
3.         <h1>ToDo App</h1>
4.         <form>
5.                 <label for="">添加待办项</label>
6.                 <input type="text" name="newTodo" autocomplete="off" />
7.                 <button>添 加</button>
8.         </form>
10.         <h2>待办列表</h2>
11.         <ul>
12.                 <li>
13.                         <span>代办列表</span>
14.                         <button>删 除</button>
15.                 </li>
16.         </ul>
17. </template>
19. <script>
20. export default {}
21. </script>
23. <style lang="scss">
24. $size1: 6px;
25. $size2: 12px;
26. $size3: 18px;
27. $size4: 24px;
28. $size5: 48px;
29. $backgroundColor: #27292d;
30. $primaryColor: #EC23F3;
31. $secondTextColor: #1f2023;
33. $border: 2px solid rgba($color: white,
34.                 $alpha: 0.35,
35.         );
37. $textColor: white;
38. $border_r: 2px solid red;
39. $border_y: 2px solid rgb(241, 229, 50);
40. $border_g: 2px solid rgb(50, 241, 50);
41. $border_w: 2px solid white;
43. body {
44.         margin: 0;
45.         padding: 0;
46.         font-family: Avenir, Helvetica, Arial, sans-serif;
47.         -webkit-font-smoothing: antialiased;
48.         -moz-osx-font-smoothing: grayscale;
49.         background-color: $backgroundColor;
50.         color: $textColor;
52.         #app {
53.                 max-width: 600px;
54.                 margin-left: auto;
55.                 margin-right: auto;
56.                 padding: 20px;
57.                 // border: $border_w;
59.                 h1 {
60.                         font-weight: bold;
61.                         font-size: 28px;
62.                         text-align: center;
63.                         // border: $border_r;
64.                 }
66.                 form {
67.                         display: flex;
68.                         flex-direction: column;
69.                         width: 100%;
71.                         label {
72.                                 font-size: 14px;
73.                                 font-weight: bold;
74.                         }
76.                         input,
77.                         button {
78.                                 height: $size5;
79.                                 box-shadow: none;
80.                                 outline: none;
81.                                 padding-left: $size2;
82.                                 padding-right: $size2;
83.                                 border-radius: $size1;
84.                                 font-size: 18px;
85.                                 margin-top: $size1;
86.                                 margin-bottom: $size2;
87.                                 transition: all 0.2s ease-in-out;
88.                                 /* 添加过渡效果，使变化平滑 */
89.                         }
91.                         input {
92.                                 background-color: transparent;
93.                                 border: $border;
94.                                 color: inherit;
95.                         }
97.                         input:hover {
98.                                 border: 2px solid rgb(236, 35, 243);
99.                         }
101.                         button {
102.                                 cursor: pointer;
103.                                 background-color: rgb(236, 35, 243);
104.                                 border: 1px solid $primaryColor;
105.                                 font-weight: bold;
106.                                 color: white;
107.                                 border-radius: $size1;
108.                         }
109.                 }
111.                 h2 {
112.                         // border: $border_g;
113.                         font-size: 22px;
114.                         border-bottom: $border;
115.                         padding-bottom: $size1;
117.                 }
119.                 ul {
120.                         padding: 10px;
122.                         li {
123.                                 display: flex;
124.                                 justify-content: space-between;
125.                                 align-items: center;
126.                                 border: $border;
127.                                 padding: 10px;
128.                                 border-radius: $size1;
129.                                 margin-bottom: $size2;
131.                                 span {
132.                                         cursor: pointer;
133.                                 }
135.                                 button {
136.                                         cursor: pointer;
137.                                         font-size: $size2;
138.                                         background-color: rgb(236, 35, 243);
139.                                         border: 1px solid $primaryColor;
140.                                         font-weight: bold;
141.                                         color: white;
142.                                         padding: 5px 15px;
143.                                         border-radius: $size1;
144.                                 }
145.                         }
146.                 }
147.         }
148. }
149. </style>

复制代码

step-3

双向绑定数据

1. <!-- src\App.vue -->
2. <template>
3.         <h1>ToDo App</h1>
4.         <form @submit.prevent="addTodo()">
5.                 <label for="">添加待办项</label>
6.                 <input type="text" name="newTodo" autocomplete="off" v-model="newTodo"/>
7.                 <button>添 加</button>
8.         </form>
10.         <h2>待办列表</h2>
11.         <ul>
12.                 <li>
13.                         <span>代办列表</span>
14.                         <button>删 除</button>
15.                 </li>
16.         </ul>
17. </template>
19. <script>
20. import {ref } from 'vue';
21. export default {
22.         name: 'App',
23.         setup(){
24.                 const newTodo = ref('');
26.                 function addTodo(){
27.                         if(newTodo.value){
28.                                 console.log(newTodo.value);
29.                         }
30.                 }
32.                 return {
33.                         newTodo,
34.                         addTodo
35.                 }
36.         }
37. }
38. </script>

复制代码

step-4

定义数据并将数据变成响应式的
将数据长期化到本地
定义数据并将数据变成响应式的

2. <script>
3. import { ref } from 'vue';
4. export default {
5.         name: 'App',
6.         setup() {
7.                 const newTodo = ref('');
8.                 const defaultData = ref([
9.                         {
10.                                 done: false,
11.                                 content: '今天要学习Vue'
12.                         }
13.                 ]);
15.                 const todos = ref(defaultData);
17.                 function addTodo() {
18.                         if (newTodo.value) {
19.                                 todos.value.push({
20.                                         done: false,
21.                                         content: newTodo.value
22.                                 })
23.                         }
24.                         console.log(todos.value)
25.                 }
27.                 return {
28.                         newTodo,
29.                         addTodo
30.                 }
31.         }
32. }
33. </script>

复制代码

将数据长期化到本地

1. <script>
2. import { ref } from 'vue';
3. export default {
4.         name: 'App',
5.         setup() {
6.                 const newTodo = ref('');
7.                 const defaultData = ref([
8.                         {
9.                                 done: false,
10.                                 content: '今天要学习Vue'
11.                         }
12.                 ]);
14.                 const todos = ref(defaultData);
16.                 function addTodo() {
17.                         if (newTodo.value) {
18.                                 todos.value.push({
19.                                         done: false,
20.                                         content: newTodo.value
21.                                 })
22.                         }
23.                         saveData()
24.                         console.log(sessionStorage.getItem('todos'))
25.                 }
27.                 function saveData () {
28.                         const storageData = JSON.stringify(todos.value)
29.                         sessionStorage.setItem('todos', storageData)
30.                 }
32.                 return {
33.                         newTodo,
34.                         addTodo
35.                 }
36.         }
37. }
38. </script>

复制代码

step-5

渲染待办列表

1.         <h2>待办列表</h2>
2.         <ul>
3.                 <li v-for="(todo, index) in todos" :key="index">
4.                         <span>{{ todo.content }}</span>
5.                         <button>删 除</button>
6.                 </li>
7.         </ul>

复制代码

点击笔墨划横线
点击删除从待办列表移除

1. <!-- src\App.vue -->
2. <template>
3.         <h1>ToDo App</h1>
4.         <form @submit.prevent="addTodo()">
5.                 <label for="">添加待办项</label>
6.                 <input type="text" name="newTodo" autocomplete="off" v-model="newTodo" />
7.                 <button>添 加</button>
8.         </form>
10.         <h2>待办列表</h2>
11.         <ul>
12.                 <li v-for="(todo, index) in todos" :key="index">
13.                         <span
14.                         :class="{ done: todo.done }"
15.                         @click="todo.done = !todo.done"
16.                         >{{ todo.content }}</span>
17.                         <button @click="removeTodo(index)">删 除</button>
18.                 </li>
19.         </ul>
20. </template>
22. <script>
23. import { ref } from 'vue';
24. export default {
25.         name: 'App',
26.         setup() {
27.                 const newTodo = ref('');
28.                 const defaultData = ref([
29.                         {
30.                                 done: false,
31.                                 content: '今天要学习Vue'
32.                         }
33.                 ]);
35.                 const todos = ref(defaultData);
37.                 function addTodo() {
38.                         if (newTodo.value) {
39.                                 todos.value.push({
40.                                         done: false,
41.                                         content: newTodo.value
42.                                 })
43.                                 newTodo.value = ''
44.                         }
45.                         saveData()
46.                         console.log(sessionStorage.getItem('todos'))
47.                 }
49.                 function removeTodo(index) {
50.                         todos.value.splice(index, 1)
51.                         saveData()
52.                 }
53.                 function saveData() {
54.                         const storageData = JSON.stringify(todos.value)
55.                         sessionStorage.setItem('todos', storageData)
56.                 }
58.                 return {
59.                         newTodo,
60.                         todos,
61.                         addTodo,
62.                         removeTodo
63.                 }
64.         }
65. }
66. </script>
67. <style lang="scss">
68. $size1: 6px;
69. $size2: 12px;
70. $size3: 18px;
71. $size4: 24px;
72. $size5: 48px;
73. $backgroundColor: #27292d;
74. $primaryColor: #EC23F3;
75. $secondTextColor: #1f2023;
77. $border: 2px solid rgba($color: white,
78.                 $alpha: 0.35,
79.         );
81. $textColor: white;
82. $border_r: 2px solid red;
83. $border_y: 2px solid rgb(241, 229, 50);
84. $border_g: 2px solid rgb(50, 241, 50);
85. $border_w: 2px solid white;
87. body {
88.         margin: 0;
89.         padding: 0;
90.         font-family: Avenir, Helvetica, Arial, sans-serif;
91.         -webkit-font-smoothing: antialiased;
92.         -moz-osx-font-smoothing: grayscale;
93.         background-color: $backgroundColor;
94.         color: $textColor;
96.         #app {
97.                 max-width: 600px;
98.                 margin-left: auto;
99.                 margin-right: auto;
100.                 padding: 20px;
101.                 // border: $border_w;
103.                 h1 {
104.                         font-weight: bold;
105.                         font-size: 28px;
106.                         text-align: center;
107.                         // border: $border_r;
108.                 }
110.                 form {
111.                         display: flex;
112.                         flex-direction: column;
113.                         width: 100%;
115.                         label {
116.                                 font-size: 14px;
117.                                 font-weight: bold;
118.                         }
120.                         input,
121.                         button {
122.                                 height: $size5;
123.                                 box-shadow: none;
124.                                 outline: none;
125.                                 padding-left: $size2;
126.                                 padding-right: $size2;
127.                                 border-radius: $size1;
128.                                 font-size: 18px;
129.                                 margin-top: $size1;
130.                                 margin-bottom: $size2;
131.                                 transition: all 0.2s ease-in-out;
132.                                 /* 添加过渡效果，使变化平滑 */
133.                         }
135.                         input {
136.                                 background-color: transparent;
137.                                 border: $border;
138.                                 color: inherit;
139.                         }
141.                         input:hover {
142.                                 border: 2px solid rgb(236, 35, 243);
143.                         }
145.                         button {
146.                                 cursor: pointer;
147.                                 background-color: rgb(236, 35, 243);
148.                                 border: 1px solid $primaryColor;
149.                                 font-weight: bold;
150.                                 color: white;
151.                                 border-radius: $size1;
152.                         }
153.                 }
155.                 h2 {
156.                         // border: $border_g;
157.                         font-size: 22px;
158.                         border-bottom: $border;
159.                         padding-bottom: $size1;
161.                 }
163.                 ul {
164.                         padding: 10px;
166.                         li {
167.                                 display: flex;
168.                                 justify-content: space-between;
169.                                 align-items: center;
170.                                 border: $border;
171.                                 padding: 10px;
172.                                 border-radius: $size1;
173.                                 margin-bottom: $size2;
175.                                 span {
176.                                         cursor: pointer;
177.                                 }
178.                                 .done {
179.                                         text-decoration: line-through;
180.                                 }
182.                                 button {
183.                                         cursor: pointer;
184.                                         font-size: $size2;
185.                                         background-color: rgb(236, 35, 243);
186.                                         border: 1px solid $primaryColor;
187.                                         font-weight: bold;
188.                                         color: white;
189.                                         padding: 5px 15px;
190.                                         border-radius: $size1;
191.                                 }
192.                         }
193.                 }
194.                 h4 {
195.                         text-align: center;
196.                         opacity: 0.5;
197.                         margin: 0;
198.                 }
199.         }
200. }
201. </style>

复制代码

step-6

目前我们的数据固然存在本地，但是我们利用的是内存中的数据，应该利用本地的数据
关闭浏览器再打开看到的还是和关闭之前一样的数据

1. <template>
2.         <h1>ToDo App</h1>
3.         <form @submit.prevent="addTodo()">
4.                 <label>New ToDo </label>
5.                 <input
6.                         v-model="newTodo"
7.                         name="newTodo"
8.                         autocomplete="off"
9.                 >
10.                 <button>Add ToDo</button>
11.         </form>
12.         <h2>ToDo List</h2>
13.         <ul>
14.                 <li
15.                         v-for="(todo, index) in todos"
16.                         :key="index"
17.                 >
18.                         <span
19.                                 :class="{ done: todo.done }"
20.                                 @click="doneTodo(todo)"
21.                         >{{ todo.content }}</span>
22.                         <button @click="removeTodo(index)">Remove</button>
23.                 </li>
24.         </ul>
25.         <h4 v-if="todos.length === 0">Empty list.</h4>
26. </template>
28. <script>
29.         import { ref } from 'vue';
30.         export default {
31.                 name: 'App',
32.                 setup () {
33.                         const newTodo = ref('');
34.                         const defaultData = [{
35.                                 done: false,
36.                                 content: 'Write a blog post'
37.                         }]
38.                         const todosData = JSON.parse(localStorage.getItem('todos')) || defaultData;
39.                         const todos = ref(todosData);
40.                         function addTodo () {
41.                                 if (newTodo.value) {
42.                                         todos.value.push({
43.                                                 done: false,
44.                                                 content: newTodo.value
45.                                         });
46.                                         newTodo.value = '';
47.                                 }
48.                                 saveData();
49.                         }
51.                         function doneTodo (todo) {
52.                                 todo.done = !todo.done
53.                                 saveData();
54.                         }
56.                         function removeTodo (index) {
57.                                 todos.value.splice(index, 1);
58.                                 saveData();
59.                         }
61.                         function saveData () {
62.                                 const storageData = JSON.stringify(todos.value);
63.                                 localStorage.setItem('todos', storageData);
64.                         }
66.                         return {
67.                                 todos,
68.                                 newTodo,
69.                                 addTodo,
70.                                 doneTodo,
71.                                 removeTodo,
72.                                 saveData
73.                         }
74.                 }
75.         }
76. </script>
78. <style lang="scss">
79. $border: 2px solid
80.         rgba(
81.                 $color: white,
82.                 $alpha: 0.35,
83.         );
84. $size1: 6px;
85. $size2: 12px;
86. $size3: 18px;
87. $size4: 24px;
88. $size5: 48px;
89. $backgroundColor: #27292d;
90. $textColor: white;
91. $primaryColor: #a0a4d9;
92. $secondTextColor: #1f2023;
93. body {
94.         margin: 0;
95.         padding: 0;
96.         font-family: Avenir, Helvetica, Arial, sans-serif;
97.         -webkit-font-smoothing: antialiased;
98.         -moz-osx-font-smoothing: grayscale;
99.         background-color: $backgroundColor;
100.         color: $textColor;
101.         #app {
102.                 max-width: 600px;
103.                 margin-left: auto;
104.                 margin-right: auto;
105.                 padding: 20px;
106.                 h1 {
107.                         font-weight: bold;
108.                         font-size: 28px;
109.                         text-align: center;
110.                 }
111.                 form {
112.                         display: flex;
113.                         flex-direction: column;
114.                         width: 100%;
115.                         label {
116.                                 font-size: 14px;
117.                                 font-weight: bold;
118.                         }
119.                         input,
120.                         button {
121.                                 height: $size5;
122.                                 box-shadow: none;
123.                                 outline: none;
124.                                 padding-left: $size2;
125.                                 padding-right: $size2;
126.                                 border-radius: $size1;
127.                                 font-size: 18px;
128.                                 margin-top: $size1;
129.                                 margin-bottom: $size2;
130.                         }
131.                         input {
132.                                 background-color: transparent;
133.                                 border: $border;
134.                                 color: inherit;
135.                         }
136.                 }
137.                 button {
138.                         cursor: pointer;
139.                         background-color: $primaryColor;
140.                         border: 1px solid $primaryColor;
141.                         color: $secondTextColor;
142.                         font-weight: bold;
143.                         outline: none;
144.                         border-radius: $size1;
145.                 }
146.                 h2 {
147.                         font-size: 22px;
148.                         border-bottom: $border;
149.                         padding-bottom: $size1;
150.                 }
151.                 ul {
152.                         padding: 10px;
153.                         li {
154.                                 display: flex;
155.                                 justify-content: space-between;
156.                                 align-items: center;
157.                                 border: $border;
158.                                 padding: $size2 $size4;
159.                                 border-radius: $size1;
160.                                 margin-bottom: $size2;
161.                                 span {
162.                                         cursor: pointer;
163.                                 }
164.                                 .done {
165.                                         text-decoration: line-through;
166.                                 }
167.                                 button {
168.                                         font-size: $size2;
169.                                         padding: $size1;
170.                                 }
171.                         }
172.                 }
173.                 h4 {
174.                         text-align: center;
175.                         opacity: 0.5;
176.                         margin: 0;
177.                 }
178.         }
179. }
180. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。