八、待办事项案例

1、需求

1. 输入待办事项回车添加到代办列表
2. 鼠标移入待办事项列表项右侧出现删除按钮，可删除当前项
3. 待办事项列表项左侧有勾选框，勾选表示以完成
4. 待办列表下有统计（已办数量/待办数量）
5. 统计前有勾选框，勾选表示全部完成（列表全部勾选，取消勾选也同步取消）
6. 有已完成项后统计右侧出现删除按钮，可以删除已完成的任务

---

2、功能组件划分示意图

---

3、CODE

1、项目结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ecPX2oQT-1659622168400)(2_Vue-cli.assets/image-20220804215524911.png)]

2、App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

3、AddInput.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

4、TodoList.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

5、TodoItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

6、Collect.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

---

4、Result

---

5、总结

1. 组件化编码流程
   1. 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
   2. 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用
      1. 一个组件在用：放在组件自身即可
      2. 一些组件在用：放在他们共同的父组件上（状态提升）
   3. 实现交互：从绑定事件开始
2. props适用于
   1. 父组件 ==> 子组件 通信
   2. 子组件 ==> 父组件 通信（要求父先给子一个函数）
3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做