用Vue3.0写出一个简单的TodoList案例

由于工作需要，以后可能会敲vue代码了，所以今天开始会零散的记录一下自己学Vue3.0的一些案例。就从经典的TodoList案例开始吧～也算补上之前react的todolist案例的坑吧🎁

简单的在草稿纸上写出页面的整体设计思路为3层div包裹，希望刚开始学习的时候，一定要自己去实际动手去画出大概的效果图。再简单不过的页面设计了。

一.在vue的template标签中编写html文件

根据上面的草图来写出简单的结构，非常简单的代码。三个<div>来完成草稿的大概实现。

设计静态页面为下图所示。

二.最首先的功能就是，如何获取用户输入框的值

在vue里是用v-model这样的绑定方式来双向绑定一个变量的，我这里用的是vue3中<script>标签的setup语法糖编写的代码，书写风格和react非常相似，也是我比较喜欢的写法。

这里我们需要用到vue里的的ref方法，先引入在说吧。

看一下Vue官方对ref的解释

在我看来，这个和react的useRef返回一个带有current属性的对象很类似。

经过了解，在vue中，定义一个基本类型，要用ref，定义一个引用类型要用reactive,本质上使用ref(hhh)其实就是调用了reactive({value:"hhh"})。

（补充说明一下:vue在<template>标签中可以自动获取ref变量对象的value，但是在<script>标签中使用时，要带上.value才可以。）

回到正题

了解了ref的使用，我们就先定义一个变量叫做newTodo来绑定input框来获取用户的输入。

此时newTodo.value就和input框的value绑定了。

三.设计添加button功能的实现

在这个按钮之前，我们要设定一个空的数组，来接收用户的输入数据，并且在里面再添加一些默认的数据来显示。

接下来先渲染出我们默认的数据。在template标签中写

这里我在<ul>标签里加了v-if判断语句，判断这个doLists数组是否为空数组，如果为空，则不渲染。<li>标签就是简单的v-for遍历。

别忘了绑定一个key

按钮的逻辑其实很简单，就是往这个todoLists数组里面添加数据,然后将用户输入的值清空。

（再提醒一下，在<script>标签里通过ref返回对象需要自己去调用value属性才可以使用）

试一下效果

可以正常添加并且显示。

四.设置一下添加按钮的逻辑判断

现在有一个情况就是我点击添加的时候，如果用户输入的值是空值，依旧能添加，现在设计不允许这种情况发生。实现的方式有很多，我个人想设计为:当用户输入值为空，按钮禁止使用。

刚开始非常不习惯，因为在react里写js代码很明确需要在{}里写，但是vue全是引号里编写，在这里先暂且这样理解吧，当你使用v-指令语法时候，是个属性的=后面的""里就是要写js代码了。

所以这里我们不能写原生的disabled属性，这样vue会把后面的三元表达式认为是字符串。

效果如下：

五.实现item的删除功能

我们希望在每个item的后面出现一个删除按钮，当我们不喜欢这个事件的时候，可以直接删除。

页面效果如下

这时候开始思考删除按钮的逻辑。我这里有两种设计思路;1.用filter去筛选出不等于当前index索引值的数组重新渲染2.用slice去组合当前item之前和之后的数据重新渲染。

方法一.

我们需要拿到当前项目的index值，很简单，去拿v-for指令的第二个参数，同时将该值传入给我们的del函数

(如果之前你了解过react，那么这里你一定会有疑惑，因为react这种场景是需要使用高阶函数返回这个del函数的，不然就会造成组件刚挂载就执行的效果,但是vue不会，但是其实vue背后帮你写成了这样的代码)

我也更习惯这样的写法。

接下来就是方法的逻辑了。因为我点击的时候，拿到的index是当前我要在todoLists里删除的那个选项索引，那么我们反向思考，我把那些索引不等于这个值的那些item重新渲染不就好了吗？

这样就可以实现我们要的效果了

点击睡觉后面的按钮完成需求。

方法二.

其实思路是一样的，都是反响思考，避开我们拿到的这个index。

slice这个方法我之前的文章中细讲了很多了，不再过多赘述了,效果也是可以正常实现的。

方法三

这个方法是我临时想到的，试一试可以不，用splice去处理。

事实证明是可以的

让我们删除谢谢

我这里多点了几个，没发现bug。大致功能就这样，后续还会更新样式和更加细节的功能。