😹 作者: gh-xiaohe
😻 gh-xiaohe的博客
😽 觉得博主文章写的不错的话，希望大家三连（✌关注，✌点赞，✌评论），多多支持一下！！！

🚏 TodoList案例1.0版本

🚬 组件化编码流程（通用）

• 1、实现静态组件：抽取组件，使用组件实现静态页面效果
• 2、展示动态数据：
  • 数据的类型、名称是什么？
  • 数据保存在哪个组件？
• 3、交互——从绑定事件监听开始

总结：
 

🚬 1、静态编写

① 基础创建

MyFooter.vue

1
2
3
4
5
6
7
8
9
10
11
12
13

MyHeader.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

MyItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13

MyList.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

App.vue —> 引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

② 导入已有的结构和样式

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187

🚭 拆：先拆结构在拆样式，剪切走后立马写上结构,借助开发者工具查看

🚭 拆结构

• 把app中tempalte中的模板，剪切走复制到对应的组件位置
• MyItem 中没有数据 在拆 MyLIst组件

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

MyFooter.vue

1
2
3
4
5
6
7
8
9
10
11

MyHeader.vue

1
2
3
4
5

MyItem.vue

1
2
3
4
5
6
7
8
9

MyList.vue

// 在拆 到 MyItem中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

🚭 拆样式

• 样式中有相应的备注

app.vue

	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
	}


 
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

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

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

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

MyList.vue

// 在拆 到 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

🚬 2、展示动态的数据

• 数据的类型、名称是什么
• 一堆要做的事情是一个数组，一个个要做的事情是对象，对象里面的内容=={id，name，done(标识，完成)}==
• 数据保存在哪个组件
• 谁要展示数据，list组件展示

MyList.vue

• 根据数据决定使用多少次 MyItem
• 把每一条的具体信息对象传递给 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

MyItem.vue

• 接收
• 动态决定是否勾选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

🚬 3、交互

• 组件之间的通信（兄弟、子传父、爷传孙），后面有更好的方式实现。

🚭 添加

MyHeader.vue

• 绑定个键盘事件

• 把用户的输入打印

• 获取用户的输入

  • 方式一：event 事件对象

    •         add(event){
                  consloe.log(event.target.value) // 获得发生事件对象的元素
              }
      1
      2
      3

  • 方式二：v-model

    • <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model='title' @keyup.enter="add"/>
      
      		data() {
                  return {
                      title:''
                  }
              }
      		menthod: {
                  add(event){
              		consloe.log(this.target) // 获得发生事件对象的元素
                  }
              }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12

• 把获取到的数据包装成一个todo对象 id使用uuid 的压缩版本 nanoid （单机版本） npm i nanoid

• 把对象放到数组的前方 保存数据的todos 在LIst组件中 输出 在 Header组件

  • 两个兄弟组件之间数据传递—> 暂时实现不了
    • 把List中的todos[] 给 App 让App 通过props 方式 传递给list
    • 让Header 把todoObj 给App
    • 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

MyList.vue

   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

MyHeader.vue 给 App.vue 方式一：实现 清空数据时操作了dom

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

MyHeader.vue 给 App.vue 方式二：v-model

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

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

 
App.vue 添加数据

       methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			}
		},
1
2
3
4
5
6

• 校验数据不为空 和 添加完成后 输入框清空 也补全 MyHeader.vue 中

🚭 勾选

MyItem.vue

• 拿到勾选的id 去todos中找到这个人 done 取反
• todos数据在App (数据在哪里操作数据的方法就在哪里)

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

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

• checkTodo 给 MyItem

• 先给list 再给 item
   
  
   

list.vue 接收–> 再传给 MyItem

		

	props:['todos','checkTodo']
1
2
3

MyItem 接收

		props:['todo','checkTodo'],
       methods: {
			//勾选or取消勾选
			handleCheck(id){
				//通知App组件将对应的todo对象的done值取反
				this.checkTodo(id)				
			}
		},
1
2
3
4
5
6
7
8

🚭 删除

• 鼠标悬浮有高亮效果，删除按钮
  • 获取id，根据id删除

MyItem.vue 通知app删除对应项 同样是 爷 传 孙

删除

		methods: {
			//删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					consloe.log(id)
				}
			}
		},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

App.vue 传 list

		

		methods: {
			//删除一个todo
			deleteTodo(id){
				// filter 不改变原数组 
				this.todos = this.todos.filter( todo => todo.id !== id )
			}
		}
1
2
3
4
5
6
7
8
9

list 接收

		

props:['todos','checkTodo','deleteTodo']
1
2
3
4
5
6
7
8
9

list 传 item

		//声明接收todo、checkTodo、deleteTodo
		props:['todo','checkTodo','deleteTodo'],
		methods: {
			//删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					this.deleteTodo(id)
				}
			}
		},
1
2
3
4
5
6
7
8
9
10
11

🚭 底部实现

• 统计全部和已完成 MyFooter –> todos 数组的长度 done 为真的数量
• 全选/全部选 取解决 以完成 和全部 是否相等
  • 如果没有数据时，不应该勾选
  • 和不应该展示
• 删除已完成任务

App.vue 给 footer 传递

// 1

1
2

MyFooter.vue 声明接收

// 1
已完成{{todos.？？？}} / 全部{{todos.length}}

props:['todos'],

//2
// 等于0 时不展示

   
已完成{{doneTotal}} / 全部{{total}}

		computed: {
			//总数
			total(){
				return this.todos.length
			},
			//已完成数
			// 方式一： 数组中的方法 reduce 推荐
			doneTotal(){
				//此处使用reduce方法做条件统计
				/* const x = this.todos.reduce((pre,current)=>{
					console.log('@',pre,current)
					return pre + (current.done ? 1 : 0)
				},0) */
				//简写
				return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
			}
			// 或者方式二实现：
			doneTotal(){
				let i = 0
				this.todos.forEach((todo)=>){
					if(todo.done) i++
				}
				return i
			}
		},
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

​图片一
 

 
图片二
 

 
MyFooter.vue 勾选

// 复杂




computed: {
			// 一个计算属性可以通过其他的计算属性 在进行计算 
			//控制全选框
			isAll(){ // 简写方式，没有setter 方法  只能被读取不能被修改才可以  后面需要修改
				return this.doneTotal === this.total && this.total > 0
			}
		},
1
2
3
4
5
6
7
8
9
10
11
12

 
MyFooter.vue 全选/全不选

• this.checkAllTodo(e.target.checked) // true false 全选 或者 全不选
• 告诉存储 todos 的人全选全不选

// 1


		methods: {
			checkAll(e){
				this.checkAllTodo(e.target.checked) // true false 全选 或者 全不选
			} 
			
		},
// 2
// 方式一:
props:['todos','checkAllTodo'],

		methods: {
			//清空所有已完成   
			clearAll(e){
				this.clearAllTodo(e.target.checked)
			}
		},
// 方式二： 更好
// 初始值需要展示 以后有交互

		非简写方式 可读可写
		computed: {
			//控制全选框
			isAll:{
				//全选框是否勾选
				get(){
					return this.doneTotal === this.total && this.total > 0
				},
				//isAll被修改时set被调用
				set(value){
					this.checkAllTodo(value)
				}
			}
		},
		methods: {  // 中的方法就不需要了

		},
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

app.vue

		methods: {
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
		}
1
2
3
4
5
6
7
8
9

MyFooter.vue 清除已完成 app传递 接收

		清除已完成任务
		methods: {
			//清空所有已完成
			clearAll(){
				
			}
		},

---------------------------------------
		props:['todos','checkAllTodo','clearAllTodo'],
		methods: {
			//清空所有已完成
			clearAll(){
				this.clearAllTodo()
			}
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

app.vue

		methods: {
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		}
1
2
3
4
5
6
7
8
9

🚬 全部文件

🚭 MyFooter.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

🚭 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
48
49
50

🚭 MyItem.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

🚭 MyList.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

🚭 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

🚏 TodoList本地监视

• 使用监视switch，监视数据todos的变化，变化后拿最新的数据存储
  • 第一次使用时,没有数据，JSON.parse 读取 空 报错 ,给一个空数组
  • 有勾选，应该是深度监视 完整版 deep:true

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

🚏 TodoList自定义事件

app.vue

1

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

 
app.vue

// :todos="todos" 是传的数据
  
1
2

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

🚏 TodoList事件总线

• App –> Mylist –>MyItem 替换

main.js

// 安装全局事件总线
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})
1
2
3
4
5
6
7
8
9

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

MyList.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

MyItem.vue

 i
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

🚏 TodoList消息订阅与发布

• 删除功能
  • App.vue 订阅 Item 发布

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

MyItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

• vue 的开发者工具看不到消息的订阅与发布

🚏 TodoList编辑功能

• 新增编辑按钮，点击编辑按钮，变成input框
• 在浏览器中存储了数据，刷新还是input
• 修改完后input 变回文字
  • 失去焦点事件
• 数据校验不能为空
• 点击编辑按钮时，新变出来的输入框获取焦点

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

app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19