Vue TodoList案例（组件化编程的流程）

 要点：

 

 一、拆分组件(功能点)并实现静态组件

这边定义组件,并且只考虑组件的结构和样式,不考虑数据交互点击等,不包括动态的数据也不包括动态的交互

二、进行动态动态展示数据

一、这边考虑数据的时候

应该设置为[]里面为{}的形式

二、数据写在哪里,哪边要进行展示就把数据放在哪边

这边要在list里面展示出来,就写在list组件上

使用v-for和props传入数据实现数据的动态

使用nanoid生成id

 

 

 

这边我们不使用兄弟组件数据的传输的高级做法

我们使用父子关系的数值传输的基础做法,主要难点在下图,实现父到子传输简单使用props就能实现,但是子到父的话,就在父组件上定义一个方法,然后父组件把着个方法用props传给子组件,然后子组件在里面调用即可。

app.vue

Header.vue

 

 实现原理：

当回车进行添加事件时,先触发Header里面的todoAdd()，添加的事件生成一个对象,然后调用父组件app的方法,把父组件的todos数组对象,进行首位增添,导致了数据改变,父组件的模板重新解析,也就把新的todos传给了list,list组件进行v-for指令让item组件多生成了一个

 

 

操作dom元素的写法不需要在前面在v-model

 

 注意 当在为data props和methods和computed取名时,一定不要取被vue所征用的名字,因为定义完这些会都会出现在vue component ,如果在vue component上重复定义就会报错

 

 

总结：

这边我们组件间通信,实现了子到父 父到子,并且把数据都放在了app组件上

父到子 使用props传

子到父 现在父组件上定义一个方法再用props传给子组件,子组件再调用这个方法实现

 

实现点击checkbox 让数据的done进行修改 由于数据再app那,所以要进行item和app的通信这边我用基础的逐层传递 就是app到list list再到item这边可以见组件间通信再项目开发中的重要性

第一种写法：

app.vue

 

List.vue

item.vue

 

实现

 

 

第二种写法把数据传入和事件写在一起

 

 可以把上图图checkbox得内容写成

 

 之前说过,如果用双向绑定了checkbox并且v-model后面为一个布尔值,则会直接改变checkbox得勾选

 

结果发现这样写也成功实现效果,但是不建议这样写 

因为双向绑定得是todo.done 也就是就是把props里面得todo的done进行双向绑定了,也就是当你地点时其实发生了props里todo的done的修改,但是之前说过props里的东西不要改而且会报错,但是这边并没有报错为什么？

因为对于基本类型这样就是修改了数据

 

 但是对于对象类型

有两种修改 一种为把对象中某个属性的值给改了,第二种为把对象中的属性给修改了

而vue能监测到的是后者,前面的监测不到

也就是说第一个属于藏在一个对象中改,vue监测不到,不会报错

第二个为直接对对象修改监测的到

 

 

不建议再v-model里面写props传进来的东西,因为本身props就不希望被修改

 

 删除按钮实现

使用过滤函数实现删除

 但是这边我们还是最基础的逐层进行传递

完成底部功能

 

第一种方法用简单的遍历用计算属性实现

 第二种用es6的reduce方法进行条件统计

用法

 第一个为函数,第二个为一个参数为初始值,就像前面写法的finishedCount=0

你的数组对象是几个就会遍历几遍

 

 

里面可以有两个参数,一个为之前的值一个为当前的值

 

 输出pre

原因,因为reduce在执行遍历时,第一次的pre为初始值即这边的0，第二次为第一次遍历的返回值而这边我们没有写return所以为undefined,第三次为第二次的返回值,为undefined

 

然后我们把这边的return换成pre+1 为第一次时,起始值为0 则一开始pre为0 第一次输出为pre+1则输出为1 第二次pre为1则输出为2 第三次为2则输出为3所以最后输出三,所以结果为三

也就是说这么写相当于计算数组的长度,但是用reduce一般不会去实现计算数据长度,毕竟一个length就解决的事

 

 

然后我们在输出后面一个参数current 

 

发现current其实就是每一个todo项

 

 就可以这样写

判断done值是否为真,为真则为1 不为真则用0

精简写法

 

 

实现checkbox全完成的勾选功能

对之前的计算属性,进行套完

 

 

 

使用v-show指令实现.没有任务时footer不显示

 

 

实现点击footer的checkbox实现全选或者全不选

第一种写法

app.vue

 footer.vue

 

 第二种写法

把属性和事件合并成v-model

 

由于这边计算属性定义为简单方式,也就是说,只进行了get()读取方法,不能进行修改,所以如果直接把它改成v-model的话，就相当于对isAll的修改 会报错

所以我们得使用计算属性得完整版形式get set都要写

 get里面就是跟前面一样,而set得value就是显示的勾不勾

 

 所以只要在set里面写入刚刚上一种的methods就行,而vue帮set得到了checkbox的checked直接写value就行了

 注意这边v-model绑定的是计算属性,而不是之前说不推荐的props

总结：