我的Vue组件化开发首个项目todolist

TodoList

学习笔记：
总结TodoList案例

1.组件化编码流程:

(1).拆分静态组件:组件要按照功能点拆分，命名不要与htm|元素冲突。

(2).实现动态组件:考虑好数据的存放位置，数据是一个组件在用， 还是一些组件在用: .

1).-个组件在用:放在组件自身即可。

2). -些组件在用:放在他们共同的父组件上(状态提升)。(3).实现交互:从绑定事件开始。

2. props适用于:

(1).父组件==>子组件通信

(2).子组件==>父组件通信(要求父先给子-一个函数)

3.使用v-model时要切记: v-model绑定的值不能是props传过来的值,因为props是不可以修改的!

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错,但不推荐这样做。

运行截图：
全选和取消全选，相应的全选或取消全选后全选按钮作出相应的反应：


增加

删除

清除已经完成的，全部清除后底部消失：


组件结构：

本项目是在vue-cil5,vue2,nanoid环境下运行

源码：

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8

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

myHeader.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

myList

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

myFoot

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

myItem

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

这给小项目作为vue新手练手组件化开发还是很不错的，这个项目b站上面有尚硅谷的课可以免费看(我只是一名普通的网友啊)
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=70