00:00
好嘞,各位,这小节呢,咱们把删除功能啊给它做一下,就是每一个突突项的后面啊都有一个删除按钮,并且每一个突突项呢,当你鼠标悬浮在它身上的时候,都有一个高亮的效果,哎,其实所谓的高亮呢,就是改变一下背景色,让它能突出显示一下,好来咱写写啊,找到代码里的买item组件,首先呢,先做一个简单的啊,就是鼠标的悬浮是有高亮效果的,那你要注意啊,同学,整个Li啊都是那个图图像,我不是说悬浮的时候想让input有背景色,或者是SPA有背景色是整个都有,所以说你操作的呢,应该是Li在这儿呢,同学咱们就拿最简单的CSS写就可以,哎,给它划到最后走给他写一个Li,那鼠标悬浮效果在CSS里面当然是用这个对吧,然后呢,去改变它的背景色,随便写一个啊,比如说这个淡灰色好,写完了回头看一下效果啊,走可以吧,哎,还有就是这个删除按钮啊,它没有出。
01:00
来,为什么没有出来呢?各位看一下啊,是因为我们这儿啊写了这么一个东西叫display now就把它隐藏了,所以说你得把这个呢先给它删掉,好看一下效果啊,正常来讲,删完了这个东西,删除按钮应该出现了是不?嗯,看看刷新一波来走并没有出现,为什么呢?往下看是因为咱们在写了一个样式的时候呀,我在这儿又写了一个这个display呢,说老师你这到底想怎么控制呢?我说一下啊各位,就是你控制这个按钮隐不隐藏啊,有很多种方式,第一种方式就像刚才我在这里边写,哎,我直接写那个内联的样式啊,Style display,还有一种方式呢,就是你通过这种样式的类名去控制Li下的button,让它隐藏,那我们现在要的效果是这样的,各位啊,一上来呢,默认都是隐藏的鼠标悬浮在哪个上,那哪个Li里的button就显示,对不?各位哎,那这呢,其实跟刚才这一样的效果,给它复制一份只。
02:00
不过我悬浮的时候操作的不是Li,而是Li里边的button,然后让它呢,Display是block对吧,Display block OK,这回呢,看一下效果啊,刷新一波走,诶出现了,接下来呢,做这个交互同学,删除功能其实是最简单的一个,大家想想啊,删除我不用考虑这件事儿完成了还是没完成,反正一点删除就能删除,那很简单,就是你点击这按钮的时候呀,拿到这件事儿的ID就可以了,然后从众多要做的事儿里面,根据ID去把它删掉,是不是就行了呀?哎,所以说当务之急是点击这个删除按钮,在这儿呢,能够输出这个事儿的ID,好了,来咱写写,首先呢,你得找到那个按钮给它绑定一个点击事件,哎,Click名字呢,随便写啊,比如说我写一个delete删除可以吧,各位你看这词多标准呢是吧?哎,Delete你看着它就出事了,各位,这里边有一坑啊,在这呢,你写一个delete方法。
03:00
你看都匹配好了吧,咱都不说的接收参数,就你写到这儿啊,这个模板就编译失败了,来各位你看一下为啥失败了啊,首先呢,大家得会看这个错误啊,你看这他说编译失败,那哪个文件有问题呢?这个买item.view有问题,剩下的这些吧,各位就没什么营养了,就是整个粉色框里的,各位就不要再看了,哎,就看一下开头,大概心里边有数,哎,哪个文件出问题了就得了,然后你再看这儿啊,说尽可能的避免使用GS里边已经被占用的关键词,什么意思呢?就是这个delete呀,各位你记不记得它是GS里的一个关键词,还说老师咋忘了呢,他是干嘛的?同学,它不是删除对象里边某一个属性用的吗?对不?那你比如说同学light,什么function等等,这些都是GS里边已经被占用了的关键词,你就不能再用了是不?所以说你得改名,各位别叫delete啊,你这叫handle check那。
04:00
再加一个这个呗,Handle delete对吧,这个D呢,给它大写,哎,别别用那个关键词啊,也就是说各位如果你在这啊用这个说老师我用哇,那肯定也是不行的,OK,哎,好了,回来给他叫这名字啊,复制往这儿一放,那我是不是得收到一个ID呀?嗯,那这就得传呗,好TODo.ID拿过来直接放在这儿,这收不收呢?收到啊做一个打印来consolo输出这个ID,写好注释吧,啊这叫做删除,那这呢再写一个叫做勾选,勾选或者叫做凹取消勾选对不好,来咱看看效果啊,刷新一波,点击删除走走走ID是不是都能拿到,嗯,但是一般呢,都会问一下说你确认删除吗?所以说别直接就输出这句话,是不是得写一个判断呀,那同学在这儿就别用那个alert了,对吧,同学,Alert只有一个按钮对吧,你除了点确定你没得选,所以说一般呢,我们用这个大家还记得吧,哎,这也很简单,就是确定诶删除。
05:00
吗?嗯,然后在这儿呢,如果确定了再走这儿confirm呢,是根据用户的交互来决定到底这个布尔值是为真还是为假,你点确定那就为真,你点取消那就为假,对不对?好了,来刷新看一下效果,点击删除啊说你确认吗?我点取消啊,那就不走逻辑,如果说诶我确认那就走这个逻辑,这就可以了吧,诶然后这儿呢,大家注意一下啊,就是这个可ome浏览器啊,我这两天录视频的时候呢,也发生了一个事情,就是它更新了,诶它一更新之后呢,同学总有这个东西出现啊,就是让你查看一些问题,你看你刷新的时候,各位他是不是在这儿呢?哎,有的时候啊,你交互了一下,然后你点一下取消,诶你看他跑这儿了,哎说老师这有一个hi,这是怎么回事儿呢?就是控制台不是什么东西都给你输出,OK,各位你比如说这个就没有输出,就是一些记录的信息,如果你把这个也给它勾上,各位,那你看一下效果啊,一上来啊,没有任何输出,你点取消啊,然后你走同学,你每一次点击的时候,它都记录一下,整个点击耗时多久,就在这儿给你输出了,哎,一般。
06:00
来说这个东西同学,对于我们来说,我们不关注啊,所以说把这个呢给他取消,有一些开发者呢,是把这些都取消了,只留下一个谁呢AOL就是只有报错的时候你再告诉我,但是反正建议大家呢,这个info和warning啊,你也留着,要不有一些问题你看不见是不?哎,但如果你要把这取消勾选了,就会造成呢,他一直在告诉你,哎,说有一个东西啊被隐藏了,然后就把它呢给挤下来了,哎,行吧,各位就说的有点细节了啊好来各位回来那删除拿到ID接下来干嘛呀。哎,接下来接着写呗,同学,不能说你自己拿到这儿就在这儿删除,同学琢磨一下土DOS在谁那儿呢?是不是在APP那呢?所以说同学这儿一句话通知APP删除对应ID的图图像是不是就可以了?那所以说各位都明白套路了吧,找到APP来吧,同学添加的在这儿呢,勾选的在这的,那再写一个吧,什么呢,是不是删除的?哎,起个名字delete啊,当然还得继续写,对吧?Todo好了,OK,在这呢,写好注释叫做删除一个todo,删除一个todo好,那开始写吧,来收到这个ID,接下来呢,呃,同学你说什么叫删除啊,就是从众多的todo里面把我不想要的那个人给它过滤掉是不是就可以了?哎,所以说在这呢,我可以用这个方法,this.todo点什么呢?叫做filter过滤嘛,对吧,过滤掉我不想要的,不就是一种删除吗?诶你拿到的每一个都是一个啥呢?Todo项那条件怎么写呀,Return是肯定得写的。
07:28
得返回过滤的条件吗?条件这么写行不行?各位等等ID你这么写就完全写反了,你这么写就刚好把你不想要的那个留下了,别的全都过滤掉了,哎,所以说这会儿啊,得是不等于,还有一个细节上的问题,就是filter,它是不改变原数组的对不?各位,就你这么写了之后,各位你放心吧,它不会变的,它是给了你一个新的数组对不?各位,哎,那怎么办呀?this.todo然后在这赋值一下不就可以了吗?我把过滤出来的新数组重新给它放回去就可以了,剩下的事儿各位真不用你操心,说老师那数组被替换了,是不是那个页面更新,这效率就低了。同学,只要你的ID不出现问题,只要你的ID好好写那个diff算法,它也不会出问题,OK啊,好了,那这就写完了啊,其实你可以精简点各位,你比如说箭头左侧是不是只有一个参数,哎,那就这么写,然后箭头里面默认还要返回值,而且是箭头函数只有一个函数T,那你说怎么办呀。
08:28
可以把这一些东西是不是直接给它放在这,然后直接写在这儿是不可以了,一行不就写完了吗?啊,当然你不精简也可以是不好了。同学,这个delete todo得传给谁呀?你得琢磨一下传给谁呀,传给埃姆,但是同学又出现这个问题了,这是爷爷,这是孙子,爷爷想给孙子东西必须得经过谁呀?父亲咱在这儿吧,同学你没得选,就只能这么写着,对不一会儿我们讲到事件总线的时候,就把这个问题轻松处理好了啊同学你发没发现挺累的,My list确实想要这个todos,但是这个东西,这个东西是他不得已而为之,对不对?没办法,你只能先给我,我再往我儿子那传是吧,先传着吧,各位来复制回到哪儿呢?这个list里面,那你说收不收啊,那得收对不?那收完了之后呢,他自己不用反手就继续往下教了,对不?各位哎,然后呢,复制这个东西来到item里面,那你说是不是得声明。
09:28
接收啊哎,那接收完了之后在这儿是不是就得用啊,This点它,然后什么ID一传,这不就能完成删除了吗?来试一下效果啊刷新,比如说呢,想把喝酒删除走确定吗?我确定OK就删掉了啊,那我想删这个确定吗?不确定那就没有删呗,OK,这个功能不就实现了吗?啊挺简单,最简单的一个功能啊各位这一小节我们听。
我来说两句