TODOList编辑
新增一个编辑功能，要完成的逻辑就是，当我们一点击编辑按钮，对象会新增一个属性edit为true，然后页面上两个标签一个span一个input通过edit的值去条件渲染是否展示
这里还只能用我们的第二种$set的方法因为这里拿不到Vue
最好用v-show毕竟这里会频繁切换
这里应该完善一下，不是每一次点击编辑都会去创建一个属性，有这个属性了直接改值就可以了
我们失去焦点后要把值改到数据里面去的逻辑，注意还记得得到这里吗，事件处理函数不传参数默认为e，传多个参数的时候要使用e，需要传参$event
emit
1.nextTick
bug
可以输入空值并保存为新的值
-
有一个很重要的点，我们需要一点编辑，就让input框获取焦点吧，这样才符合常理，我们可以通过打标识，来获取这个input框，然后在我们点击编辑的事件中，最后一步通过$refs来让他获取焦点
我们vue的工作原理是当一个函数的内容执行完了才会去重新解析模板，如果完成一行数据就去，那一直都在来回就很耗费资源了，所以这里当我们点击编辑的时候刚好把edit改为了true，页面接收到true后文字消失，input出现，但是关键就是这个时候就处于这个节点，拿到了true还没给到页面上，这个时候继续往下执行focus这一行代码，我们的input都没出现在页面上怎么来获取焦点？
.$nextTick，他后面跟的是一个回调函数，他的意思就是当我们完成下一次DOM更新操作后才会去执行里面的回调函数，也就是这一次编辑改为true更新到DOM上面后才会回来执行这里面的回调
过渡与动画
1.动画
先完成一个点击显示隐藏的案例
在vue里面虽然可以简便一点，但是效果还是要自己写写的
我们要的效果就是点击显示就给我显示同时添加一个来的效果，点击隐藏同理，如果原生js写就需要去判断逻辑等等
transition这个标签里面放我们的要显示隐藏的元素v-enter-active，隐藏是
v-leave-active，配置好这些后，vue就能在合适的时机给你添加合适的动画 注意:
transition标签可以自己取名字，但是取了之后，对应的动画类名的 v也要跟着改才会有动画效果
appear（可以直接就简写为一个appear就表示为真了，有这个值了）
最终的真实DOM并没有transition这个标签
2.过渡
用过渡再次实现上面的动画效果，首先标签这里还是一样，transition标签，name属性
v-enter和v-enter-to，用transition来做就不用写动画效果了，直接在来的起点写上是个什么状态，终点是个什么状态即可 这个也可以写到我们的出现动画效果的标签上transition控制过渡效果，也可以写到我们的过程中这个类名里面
最终简化下来，进入的起点使我们离开的终点，离开的终点是我们的进入的起点
注意transitin配置在动画呈现的标签里面会有bug，最好还是写在类名里面
3.多元素过渡
当我们想多个元素使用过渡的时候，如果这样做，就会报错
transition-group而且，还必须配置key值
4.第三方集成包
animate.css
我们之前的所有style的样式全部删除，就留一个标签上的transition-group这个还是要的，参考其官网可查看到首先安装，并且引入的时候直接引入的方式，因为是css格式
name（官网）、然后是进入的属性enter-active-class，离开属性leave-active-class，后面两个的值直接在官网首页找到对应的样式复制进来
5.TODOList动画版（问题）
直接在css里面定义动画，然后给每个li添加transition即可实现
这里面有两个问题啊，我又是一个喜欢剖析原理得人，第一个是为什么一定要添加appear，这个添加的效果不管是现在还是后续才会有效果，他不就是一个能让一开始就执行一次动画的属性吗，还有一个问题，这里没有条件渲染了，想知道vue是怎么检测到我是删除和添加的并还能对应给出动画效果，因为添加是unshift方法实现的，删除是数组filter方法实现的，难道vue又做了封装？