29_尚硅谷_Vue_案例_交互footer组件功能

需要来看一下，大家看啊。我们现在要写的是哪个主页，就写下面这个。谁好，那我们就找到那个foot是吧，找到福来，叫todo福，把其他的都先干了再说。好，我们这里面呢，一共好几个功能啊，大家看到首先呢，我们有一个显示的问题。对不对，因为做功能首先一个是显示，再一个就是我的用户操作。这个能懂啊，这显示其实也包含它，它是不是有可能要显示，也就是说一旦我勾它，诶我再勾他的时候。他是上这个代表全选嘛。能不懂啊，当然这里面有完成的数量和什么呢？全部的数量。那现在就有问题啊，我现在想的是什么事呢？有这样一个事情，一旦写个组建，我马上要想的事情，我接收哪些属性。

因为只有属性确定了，我的标签是不是才好写。那我介绍哪些数据，首先我们这里面有一个完成的数量和全部的数量是吧？哎，我是不是可以把那个todo传过来。那两个是不是都有。也就是有了todo，我能不能知道啊，完成的数量和全部的数量可以，那这个地方什么类型。没问题吧，好，我有了这个todo，我能不能知道他要不要勾选。你想嘛，什么叫什么时候才勾选to里面所有todo的为什么为，那就应该勾选。对不对，我是不是只要看它就能决定整个三个方面的显示。美女是吧，再说交互，交互呢有几个，首先这个删除什么，已完成任务，这个时候我要接收一个函数吧。

这个什么呢？我要接函数来取个名字呀。平时说肯定也叫delete delete什么呢？Delete complete todo可以吗？有点长是吧，但是至少你应该能建明之意啊，尝一尝吧。嗯，长不要紧，主要要证明自己啊。这能不能看懂来好还有一个。这个我点它的时候，上面应该干嘛，是不是全写我再去点了，应该去掉权限吧，诶这一个啊，这一个是不是也要去更新todo好这个地方我们来写什么呢。嗯，应该P，假设一个函数叫select war todo。这12也是个什么，是不是也是个函数。能不能？啊，选择所有吧，但是他有两种情况，一种是选择所有，一种是不选择所有。

对不对，到时候说白了，我调用的时候得传一个布尔值过去，那标识我到底是要全选还是全部选。这个能理解吧，哎，也就是说我们要接收一个to，接收这样两个函数。好，其他的都可以先不写，其他都可以不写，我们现在需要去把那个标签给改改。也就是我们这个foot是不是在APP里面用的，那也就是说要给他。传三个东西todo，我有吧，我有这不todo吗？好，接着还要需要传什么两个函数。啊啊，稍微有点长啊，还有一个。啊，复制一下。啊，OK，有没有看到好，而这两个函数我得是不是去定义，定义在哪个里面。

记在这个里面吧，是不是这意思啊，OK，好，定性函数就有问题，函数名形参这两个都要确定啊，我函数名已经确定了，实际上参数要不要呢？我去删除所有已经完成的todo。要不要？参数要不要传什么参数。要不要怎么判断呢？得看你做这个事情有没有什么条件，我不团你能不能搞定对不对，说白了你是不是要从中把那个为处的找出来给他干掉啊，需要条件吗？这我整个描述没看到有什么变化的条件呢，我就是找到这个数组，把这个处的todo给它干掉，这有什么条件？整个说的过程中没有一个条件对吧，所以这个时候我是不用传参数的。听不懂啊，这个比较难一点，我也写一下就是啊，就删除所有什么是不是选中的啊，选中的选中的就代表完成了。

好，下面还一个。还一个好这个。好，下面这个方法是干嘛的？要实现什么功能全选或者什么全部选。那也就是说要把所有的todo的改为什么值？处或者是什么，或请问我这个描述里面有没有变化的东西？有没有？就我刚才这个描述，我再说一遍，我现在做的事情就是把这个todo上面每一个todo拿出来，把它的这个complete的值改为true或者是。有没有变化的？啊，这能听不出来没有变化了吗？我这个出货的boss，我得你得告诉我呀。

你不告诉我，哪知道要要是去还是first呢，对不对，说白了你就告诉我，你到底让我去学学呢，还让我什么全部学。是不是这个点，所以这个地方全选或者全部选看谁呀，就看你这个哥们是勾上来还是不勾。对不对，你要勾上了，那你传个Q过去吧。对不对，你要没勾了。是传个过去，那我就这个里面去写一个check。Check就代表勾选嘛，是否勾选或者1CHECK都行啊都行OK。这个分析非常的重要，也就是说要不要传行参你首先的决定，这是第一步，第二步如果要传，传什么？是传一个还是传多个，名字叫什么？这都是你要去分析的。啊，好。这两个函数我们都可以给他写了，这个没有多大难度啊。

这个我们要去删除为处的，对不对，实在要做个什么事情呢？要做一个概念叫过滤。过滤留下什么？对啊，记住过滤留下为first，对不对？那我要对这个todo进行过滤，来过滤一下this。点to，点什么不要好，记住啊，我要留下为todo我的箭头，如果是to。留下的是什么？大家看看我这是什么都留下来了吧。好，那如果我这么写。刘翔是谁？Which we first。留下的是谁为错的嘛，因为不为错，他就他就留下来嘛，懂不懂，那我关键是要留下什么。请问怎么办取反？

但这么写肯定还不行，因为你产生了一个新的数组，你并没有去更新呢。说白了，你要做这样一件事情。是这意思，你过滤产生一个新的数组，是不是覆盖掉以前的？能看到吧，好，下面这个。啊，这个这个实际上是要便利这个里面所有的todo去改它的字吧，这个怎么办？这个应该也不难啊，这个难度不大，This点它点便利呗，拿出一个todo。把这个todo来啊，把这一个todo的什么属性等于什么to还是得等于欠。我也不知道到底出来，或是反正你指定什么，我就负一个什么值。这个能懂吧，啊OK，好，那这边我就相当于全部写好了，那写好之后是不是就剩下他这边了。

好，全部的数量，这个应该会。那不就是去找这个todo点什么。对不对，好，关键这个完成数量你直接能看出来吗？不能得干嘛呢？得去统计统计什么，统计这个to里面comp为什么处。统计，统计其实就是要去计算了，那此时我要去P假设，我就写一个complete set，请问这个定在哪了？是定义在date里面吗？不是定义在什么comp里面，昨天我们留的那个练习是不是有一个奇数和偶数。

那个就应该用一个计算属性来做。因为这个奇偶数是不是根据我这个count的数量来去动态确定的。那就是个计算属性。嗯，OK，好，来下面这里面我是不是有个它呀，我要返回一个结果，那返回多少了。我是不是根据这个数组去做统计，做累加，这个得用数组的一个方法。Reduce。能不懂？而这个reduce传的参数很有特色啊，我们叫pre total，诶，怎么卡死了？还一个啊兔。这里面怎么统计来着，返回谁？这个前一个的统计的数量加几了。可能加一，也可能加零。到底是加一还是加零，看什么呢？

看这个todo里面的什么comp let是to还是for什么？如果是to加几加一，否则呢，加零，我们的初始的总数量为几零？这一个函数应该是讲过了对吧？啊OK。如果你不懂的，那你就要回去过头来去看一下，这个挺重要的啊。OK，好，那也就是说现在我们这个也做了，这个也做了，下边还有。这个一定要选什么。清除已完成的任务，假设我一个完成的任务都没有。要写什么，说白了我一个都没勾选，你看我把这个去掉。他应该什么，他是不是应该隐藏，那这咋读嘞。怎么做的啊，说白了来个微数或者是V是吧，什么时候才显示。

说白了，这个完成数量要什么大于零，那就这样可以了。你大为真嘛？能不懂啊，当然你也可以写大于零，这都可以对吧？那么这样更简洁一点吧。好。来我们还有一些显示，譬如这一个。当前这个是不是涉及到有可能要勾选，有可能不勾选了。那这个时候需要刚刚是不是首先的马上要想到要写一个什么。是不是写一个model能不懂，好，那我这个地方写一个什么名字呢？得命个名字呀，这个是不是代表是否全选呢？那我就来一个一只喔a check。是否全选可以吧啊，你多少钱？好，这里有问题啊，首先我是不是要读出这个的值。

是不是读它的值。要确定到底是to还是for呗，还有一个，还有一个什么意思呢？大家看着我，当我去操作它的时候，诶这个里面没有啊，大家看这里，当我去勾选他应该做什么事，那也就是说我是不是还要监视他的改变。是吧，所以我有两个方面，一个我要读。对吧，读一个结果嘛，还有一个是什么，我要监视。它的变化。听的这两个描述，这是什么呀。既要去得到它的值，读它的值，又要去监视它的值变化，这不计算属性的get吗？说了一个什么事，说的就是我这一个得定义成一个什么呢？计算属性，而且我这个计算属性必须有什么get和set，就这么分析出来的两个方面能看到吧。

好，Get是什么意思？我要确定我当前是个to还是for，什么看什么。譬如说看comp的size等不等于这个。认识呗，完成的数量如果等于总数量，那是不是应该全选？这概念，那就是return。变成什么？这点完成的数量看size，记住千万千万不要加括号。计算属性，这相当于是个get，我们只要去读这个属性值，这个函数就会自动调用。你发现我们这里也没去调用括号啊。啊，接着看它等不等于谁时间todo时间。

能看懂吧，好，这是说我要读到一个结果是吧，我要读的还有一方面我要干嘛。当我，哎这个什么东西。是不是当前这个的值，说白了，我一旦点一下勾啊，我点一下这个勾选。我要点一下勾选，那他是不是接受了一个value，这个value应该什么类型不类型对吧？OK，这一个啊是value是当前check box最新的值，Check box不是出吗？那一旦他发生了改变，我应该干嘛去。调谁去？调用这个函数不就实现全选或者全部选吗？那我怎么做？Z减它括号传什么？这个扭是不是代表我当前是否勾选呢？

那不就可以了吗？嗯，OK。这样我们的这个啊，这个check box啊，两个方面都做了啊，一个读一个监视是吧，还一个是这里面的统计。啊，实际上是一个计算属性。啊，最后有一个这个艾和等于这个很简单，实际上就去调用水句是不是调用它啊，我实际上直接可以这么写。都不写了，就这样。如果我不需要确认的话，我直接这么干就行。能不能看懂我这一个方法吗？我们说过了，这个方法是可以加括号也可以，什么不加能看懂不啊，这里面你不要一老想着就是正面马上搞瑞士啊，瑞士不需要。对不对，你说现在是不是已经访问组建对象的这个方法了，而且它默认是不是自动会掉啊。

当然你也可以写，这么写行不行？啊，这个地方还要注意，我有需要传参数吗。大家看一下需要吗？不需要，所以我完全没有必要去写小括号。少两个字符了。对不对啊，OK，好。来，现在我们来看一下，看看我们当前的这个啊。哎，现在有问题是吧，有问题得去看一下我们当前的这个是什么问题，来to do。什么is not DeFine，没有什么，没有定义在这个里面是不是。来看一下。我是不是说声明去接受一个todo是这个地方，但是我这边看看。四传的吧，是不是传了一个求60吗？那这个时候他说他说的说的很明确，大家我刷新一下看看，他还报不错啊。

是不是还有这个问题啊，还有他说todo is not DeFine没有定义，没有定义，嗯，看看关键是吧，有时候他看诶这个多少。最好能找到多少行，23行是吧？23行，我们来看一下23行啊，TODO23行。这个没有定义，我定义了吗？没有，那确实就是没有，所以吧，有时候知道哪一行非常关键是吧。有没有看到，好，来试一下，刷新一下。出来了吧，好，出来以后来啊，把它来看一眼。清理一下首先啊，诶这对吧。对吧，好走里，诶可以吧，可以。可以吧，可以啊，就在我点它走你可不可以，可以走你。

是不是也可以，当我选中了一个，它是不是就显示了，接着我点它走你。是不是可以删了就不可以吗？没任何问题是不是好，我再删一个，这么删。好，问题来了。这不对吧，这样不好吧，啥意思。一个都没了，你勾干嘛？这有什么好勾的呀？现在没有必要勾选吧，咋办呢？先说咋办之前，我们先得分析他为什么会勾，你看吧，总数量和完成的数量现在相不相等，相等确实就是满足条件，所以是勾选的嘛。怎么办呀？这说明我这个条件还不够，是不还需要别的条件，什么条件？啊，这个总数量或者说有一个至少有一个勾选都行，对吧，这都没问题，他是吧，大于你一个都没有，我去够干嘛呀。

是不这意思啊，OK，那这样是没勾了，哎，又没问题了。嗯，当然我可以去加是吧，OK，都可以啊。这样我们就实现了一个基本的这个福的啊，所有功能福稍微应该是这里面最懒的一个，尤其是这个。难在哪了？难在你就想不到要用计算属性，我前面反复跟大家强调过啊，你想到了要用计算属性，这就很简单了。就你根本想不到。这就很麻烦，或者说你不用计算属性，你用别的也可能能做，但是呢要麻烦一些。