Document

--- theme: cyanosis --- **这是我参与8月更文挑战的第9天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")** # 前言终于来到了这一天了啊！期待不期待呢？前面搞完了**事件、渲染指令、过渡**。那么今天就来搞个基础版的Todos啊。后面会讲到**计算属性**这一知识点。我们再搞个升级版的吧！ # 介绍今天我们利用**transitoin-group**实现一个简单的todos啊。 **主要功能** - 新增 - 删除 - 切换todo的状态 **实现步骤** - 布局 - 过渡动画 - 逻辑 # 实现步骤 ## 1、简单布局 en，首先这里的话呢我是没有写任何的样式的啊。样式自己私下画画，主要在于实现功能。其次有三点： 1. 新增用的是回车事件（**修饰符**） --- **@keyup.enter.exact** 2. **transition-group**实现过渡动画 3. 通过**动态绑定class**进行状态的切换 ```html

``` ## 2、书写过渡动画 ```css ``` > 我们来看看官网是怎么描述的呢？在`进入/离开的过渡`中，会有 6 个 class 切换。 1. `v-enter`：定义`进入`过渡的`开始状态`。在元素被插入之前生效，在元素被插入之后的下一帧移除。 1. `v-enter-active`：定义`进入过渡生效时`的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 1. `v-enter-to`：**2.1.8 版及以上**定义进入过渡的`结束状态`。在元素被插入之后下一帧生效 (与此同时 `v-enter` 被移除)，在过渡/动画完成之后移除。 1. `v-leave`：定义`离开`过渡的`开始状态`。在离开过渡被触发时立刻生效，下一帧被移除。 1. `v-leave-active`：定义`离开过渡生效时`的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 1. `v-leave-to`：**2.1.8 版及以上**定义`离开过渡的结束状态`。在离开过渡被触发之后下一帧生效 (与此同时 `v-leave` 被删除)，在过渡/动画完成之后移除。 ![transition.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/523071f741aa49c6bf2c1622b5e5b940~tplv-k3u1fbpfcp-watermark.image) > 这里看下来可能有的复杂啊，其实我们只需记住`enter是进入，leave是离开，active是生效时，to代表就是结束` **疑问：** 那为什么不是 `v-` ，而是 `move-` 呢？ **答：** 在过渡中切换的类名来说，如果你使用的是一个没有名字(`name`)的 ``，`v-` 就是这些类名的默认前缀，那么一旦你使用了`name`,那么 `v-` 就会被替换成 `name-`。就比如我们上面用的是``，就会变成 `move-enter`。 ## 3、方法逻辑根据开头我们说的todo有啥功能啊，我们就知道要写什么样的方法，从哪入手。一个是新增，切换状态，删除。 **那就从最简单的新增开始吧，有了新增才能搞其他的对吧！这里我们把切换状态的放最后吧！** ### 新增这里我们通过**事件对象**来拿到我们input中输入的值，然后使用push改变原数组进行新增一条数据。 ```js addTodo(evt) { console.log(evt.target.value) // 去除首尾空格 let text = evt.target.value.trim() // 删除字符串首尾连续空白 if (!text) { return } // 添加一条新的todo this.todos.push({ id: new Date().getTime(), text, completed: false }) // 清除输入框文本内容 evt.target.value = "" }, ``` ### 删除这还不简单嘛，直接filter搞起就完事了。 ```js removeTodo(id) { this.todos = this.todos.filter(t => t.id !== id) } ``` ### 切换状态这里我们使用map对todos原数组进行操作，判断**id是否相等**，如果当前点击todo的id相等，那我们直接改变当前状态不就完事了么，其他的不变给他return回去。 ```js toggleTodo(id) { this.todos = this.todos.map(t => { if (t.id === id) { return { ...t, completed: !t.completed } } return t }) }, ``` ### 效果 ![a2.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/144947e542bf47cabc1d562a98d1796f~tplv-k3u1fbpfcp-watermark.image) # 完整代码这里把代码整理到一起，方便大家进行测试，也可以点击[在线测试](https://codepen.io/zchaoge/pen/xxdOGXE)查看效果。 ```html Document // 引入vue

``` # 结尾今天就先到这里啦！我们下期再见！码字不易，觉得不错的可以动动小指头点点赞啥的哟~ # 系列文章 ## Vue系列 - [Vue配置起步（一）](https://juejin.cn/post/6992750559350489096) - [Vue事件绑定（二）](https://juejin.cn/post/6993108604882518053) - [Vue渲染指令（三）](https://juejin.cn/post/6993580619418566670) - [Vue动画过渡（四）](https://juejin.cn/post/6993866415916711949) - [Vue - Todo案例（五）](https://juejin.cn/post/6994231237023907847) - [Vue组件](https://juejin.cn/post/6981610163509673992) - [Vue插槽&过滤器](https://juejin.cn/post/6981283588696178718Vue组件) - [Vue的反向传值 ($emit事件)](https://juejin.cn/post/6967164077831536648) ## Vue-Router系列 - [Vue-Router安装与使用](https://juejin.cn/post/6975305584392273933) - [Vue-Router的routes配置](https://juejin.cn/post/6975666797575929892) ## Vuex系列 - [Vuex系列(一) -- Vuex的使用](https://juejin.cn/post/6971964011684298782) - [Vuex系列(二) -- 模块化的使用](https://juejin.cn/post/6972334587875688455) - [Vuex系列(三) -- store.commit和store.dispatch的区别及用法](https://juejin.cn/post/6972704942695907358) - [Vuex系列(四) -- 辅助函数mapMutations解析](https://juejin.cn/post/6973080514215280647)