使用v3+ts实现记事本功能

准备

首先,要先准备好用v3写好的记事本项目

然后创建一个新的v3+ts项目

npm create vite@latest 使用最新版本的vite创建项目

创建好项目之后, 把不用的文件删除, 然后再把准备的项目内的组件cv过来

解决报错

此时打开todos.ts 文件 会发现有很多报错, 不要着急  一步步往下看

首先看第一个

因为这个v3+ts项目没有使用pinia包, 但是之前写的使用过,所以这里把这一行删除掉

 把这两段代码也删除掉

再看第二个 

删除之后  发现之前不报错的代码报错了

这个时候就需要重新导出这些方法

 

 第三个

三个组件内因为引用了这个 但是我们把pinia删除了 所以这里会报错 

解决办法就是把三个组件的这个也给删除掉 

 第四个

删除掉后  会发现 又有新的代码报错 

这里我们 把todoStore 换成 useTodos

 

 

使用组件

在App.vue中去引入并使用组件

 

没样式?怎么解决?

引入后 网页内显示出来的没有样式

需要在App.vue内引入相对应的css文件

 此刻不出意外  整体样式就出来了

数据渲染

因为这里不需要去发请求去获取数据, 所以需要自己定义一下数据 

在App.vue中 定义一个固定数据

传递给子组件

 

子组件内接收数据

 把数据循环渲染到 li 中

 页面上显示出来是这样的 就代表了渲染成功

添加功能

添加是通过在头部组件内的输入框 输入内容后回车添加到list列表内

所以在组件间内的input 输入框 添加事件 获取输入内容 并把内容传递给App.vue中

添加事件

 使用emit 传递给父组件

 在方法内 把获取到的内容传递过去

 父组件内的子组件接收

 在方法内用 push 向列表最后添加数据

 

 这样就可以向列表里添加内容了

删除功能

在列表的最后 鼠标靠近会显示出一个 X  点击会删除这一列的内容

为了实现这个效果 我们需要在中间的子组件上绑定点击事件

 在事件内向父组件传递要删除的数据的索引值

 父组件内接收

 并在方法内用 splice 数组的方法去删除指定的值

修改状态

我们可以发现 在事件名之前  有一个勾选和非勾选的状态 

我们想实现 点击切换选中或者非选中

而这个选中和非选中 是通过 list 列表里面的 isDone 属性去控制

 在子组件内input框内  定义点击事件

 在事件内去修改对应的isDone  并传递给父组件

 父组件接收

去修改对应项的值

 

 剩余数量

把list传递给底部组件  并渲染list的length长度

 

清除已完成功能

点击子组件的按钮 触发事件 然后去通知父组件

父组件接收到方法后 在方法内去做计算属性  在计算属性内返回item内isDone为false 的情况

并把返回的值给list  也就是覆盖掉原来的list  达到清除的效果

子组件点击事件

 

 父组件接收方法

 在方法内用计算属性处理数据

已完成/未完成切换

在这个最底部 有一个可以去切换状态的按钮  

所以给三个按钮都添加相同事件 但是传入不同的参数 方便后面进行判断

 

父组件接收

 方法内判断类型

 然后再进行数据的处理

需要注意的是  这里应该是需要存储数据list到本地   不然使用fliter修改后 再去赋值会污染list 

list使用本地存储的不会出现这种情况