28_尚硅谷_Vue_案例_交互删除todo

啊，来看这里。那最终呢，我们这个列表啊，这怎么半天不出来这个。就是这个里面来看到它。好，现在我们下一个要做的就是删除某一个。可以吧，那删除某一个这个地方有两个方面，第一个方面，当我的鼠标移入和移出的时候，这个背景颜色是不是有变化，这个显示是不是有变化，我移进去是灰色的背景，它是不是显示出来了，我要移出了，它是不是就消失了，背景是不是变成白色了。这是一个方面，还有一个方面就是我点击这个按钮。先把删除。当前的todo这个倒好做，咱做过类似的，对吧，好。来，下面我们来去做，首先要知道我们现在要去写哪个组件。是历史的吗？不是，是什么item？

我们先来去做一下我们的那个样式变化，就是这个显示隐藏以及背景的变化。还是一样，前面说过，做这种东西先加阶梯。对吧，好，但是呢，这个地方要给大家介绍。几个事件说一下啊，一个是a mouse。还有一个叫ono。啊，这两个呢，很像。非常非常像啊。他们对应的啊，那个mouse有对应的一个啊，这是记录，还有一个对应的离开叫mouse。On mouse leave，有吧，好，它这个over了，有一个什么呢？它所对应的是on mouse out。可以吧，好，那这两对，嗯，它这两对和这两队他们之间有没有区别的，有区别这个应该以前讲过是吧？啊主要在于什么时候有区别呢？你要举个例子啊，有一个div里面有一个div对吧？好，如果我给他加了这么几个事件，我进来。

进来以后猫摁出发吧。猫是偶尔也出发，这个没有一点问题。这个一点问题没有，没有区别，这一点上没区别，主要是我从这里跑到这里面来。是吧？这个时候啊，它会触发out。能不能就内部的元素进入到内部元素，它会out，会执行。那我再从里面过来了。那这over呀是吧，但是如果是他呢。那就不一样了，什么时候才会触发live呢？只能是这样。懂不懂，也就是说我在里面滑动会触发六吗？不会，这个还是个面试题啊，就让你去区别啊。

他们之间的一个处理方式，那我们用哪个比较合适？说白了，你想啊，这个地方。大下，我现在是要给这个爱绑定监听对吧，我这里面是一个按钮。好。如果假设我们用over和out，这就有问题。你想嘛，我进入是不是显示出来了，当我一旦我的鼠标滑到这个上面来了。嗯，它背景颜色不消失了吗。是不是这意思，我们一定要必须是是跑到这一行的外面去。才会消失啊。这不懂，所以我们应该选择哪个是这两个。对吧，这个要去区别开来啊，这个咱现在不用。那当然，我们不是用这种写法。怎么写的艾佛？

对吧，这个后面的就不用动了吧。嗯，这里其实也告诉大家，大家先这么写，因为这样写有提示。但如果你直接写艾，那就没提示啊，再改一下就行。因为这个单词有点长，所以你很容易写错，能懂吧，好，那这两个啊的操作是不是相反的操作啊，现在我要说一说啊，我们现在要去做到这个ii是背景有变化。样式是不是有变化。还一个是他。这个删除也不能这么做。也就是说这个状态显示状态是变化的。它的背景颜色是不是也是变化的，所以变化的东西得放在哪个里面date嘛。你变化东西不能放到data里面去。到时候去改变数据界面就不变了嘛。有两个，大家看到有两个，一个我取名叫BG color，什么意思，背景颜色啊，默认呢是什么颜色了，白色。

能看到吧，好还一个什么，还一个，诶这个地方写错了，应该是一个对象是吧，一个。是不是显示，比如叫一数默认什么。不，因为那个按钮默认不不显示吗？能懂吗？这个是标识按钮啊，默认是否什么显示，这个是指定是默认的背景颜色啊OK，默认的背景颜色。美女吧，好。那我们这两个事件的回调函数是不是去超出他们俩？而且这两个操作应该是不是相反的呀。来看到那看到我这个地方写一个啊汉的，呃，那个。

猫是看的，看的什么呢？看的树吧。这一个我进入的时候是不是显示，那我在这里面应该什么。是不是隐藏啊，隐藏黑的关键是这么写，是不是要写两个方法，我能不能通过一个方法去搞定呢？对吧，我能不能就这同一个方法。但调用同一个方法是不是得区别开来？怎么区别开来，一共就两种情况，那我得传一个什么不值，假设它叫to是吧，那这个就应该叫什么for，这意思吧，好来啊吧，会好一点，那这个也是，只是它为for的时候，其实上就是离开了吧。能不懂好来那下面。怎么办？写一个麦，写一个他那一说这个布是一个什么意义呢？取个什么名字呢。

你看传那个传了个取得取个名字啊。是否记录啊，如果传to就记录，传就什么。离开嘛，好在这个里面呢，其实这个非常简单啊，来我判断一下，那个一要为to说明我是进入吧，进入，我无论是进入还是离开都要去更新状态吧，更新数据，这个其实好做，就是this.bg color等于什么颜色。是不是灰色啊，比如说写一个什么green可以吧，或者你当然也可以写一个看看呢，譬如说我写个颜色值行不行。可以吧，可以，这没问题啊，好，下面一个this is数为什么处。

那你说下面呢。这为什么他嘛。对了吗？是这样的吧，这就可以了吗？好来，下面我们来看一下我们当前这个行不行。这是我们的是吧，稍微刷一下看一下诶。看是不是我们的，是我们的吧，有多吗？没有吧，对吧，啊OK，那现在根本就没反应嘛。能看懂，那首先看有没有报错没有吧。没报错，接着我们刚刚说过的，看一下什么数据。看一下数据有没有变呐。好看下数据啊，就看的是第一个是吧，White和for来。

根本没有什么是没有变，那没有变，我得去看这个世世界有没有什么。是不是有个触发。就这里对吧，啊，我得看一下到底有没有触发，我把这个一给他打印输出一下。能理解吧，啊OK，来刷一下。看一下打印出租有吗？有吧，有打看他是吗？但现在呢啊，我触发了他以后，打开它一个出一个货，什么触发他以后，他这一个数据改没改了。打开啦。没有对不对，没有好啦，那我们就要去看一下。我们这不传的to吗？这不穿的force吗？那接着我们这个date return是吧，Return是个BG color，我这个写的BG color吧。四角是吧，啊，Is数为或者为什么或者是。没有任何问题啊。

主要是要看一下我们最终的那个状态必须得变是吧，还有一个事情，主要有个事，咱们去读状态。咱更新了，其实操作以后没读，没读的话，它这里面显示不出来。我的界面有去读这个数据吗？没有吧，这个注意我们其实在本子上改了，只是我这里没读，那也就是说我这个style。是不是有一个背景的一个。就说就用它吧，谢什么。BG是不是开了，但是这个地方得用什么。大符号吧，还要写冒号吧？就这个左边。你不得写个冒啊。强制把密码的吧，下面这个。V杠什么或者V杠是都可以一什么你没读嘛。

是不是有了，有了没有问题。啊，必须得读，打开来是不是有变化，大家看这里啊有吧，有你看。听到了吧。那。搞定这个好搞这个其实跟昨天差不多，这个删除，那删除的话，我们这一次想想啊删除，那我这个地方去操作的是它呗，给它保留一个什么at等于，呃可以说叫delete atem可以吧，那我这里面是不是要写一个对应的方法是吧？嗯，写一个对应的方法好。来看一下这个地方，我做的好一点，可以，当然可以先确定一下对不对，确定一下说，呃，确认删除谁的评论呢，删除哪个评论呢。对吧，这个地方我们是不是可以去取出那个标题，取出那个标题啊，删除啊，那我取出标题可以，前面等于什么，This，那我在这了，Todo还有一个index，那我这个地方去写一个大括号是吧？Todo点什么。

后面加个嘛，是吧。哦，写个什么哦，这个地方必须写一个window点什么啊，window.com是不是在这里面呢。是吧，啊抬啊，我写的是吧，抬好里面。最终我是不是要去调用函数更新？对吧，那函数我得先什么。是不是定义一个。对吧，来第一个叫delete todo，传一个index this时间todo什么index。

对吧，好，接着把这个函数啊，先跟昨天一样的啊，传给他是吧，接着我们过去。过去后要证明什么接收是一个方险对吧，好了，接着我自己不用我什么再传递是吧。接着我的item这边再接收啊，也挺麻烦的是吧，放弃好，最后我在这里面我是不是可以把它取出来呀，取出来那下面的事情很好办了。Todo船。

算了吧，嗯，没有问题啊，这个挺简单的，来我们来看一下。删除一个，哎，取消没问题啊，确认。可以吧，啊可以没有任何问题啊，这说的是删除。