网络日志

用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。大致功能就这样,后续还会更新样式和更加细节的功能。