vue – Vue脚手架/TodoList案例

  • vue – Vue脚手架/TodoList案例已关闭评论
  • 10 次浏览
  • A+
所属分类:Web前端
摘要

今天做了一个案例,可以好好做做能够将之前的内容结合起来,最主要的是能对组件化编码流程有一个大概的清晰认知,这一套做下来,明天自己再做一遍复习一下,其实组件化流程倒是基本上没什么问题了,主要是很多vue的方法需要多熟悉一下,毕竟打破了之前的一些对于传统js的认知,还需要多熟悉一下。
这两天可能内容不是很多,因为有点感冒了,状态不是很好,不想学多了怕接受的是不是很好。

今天做了一个案例,可以好好做做能够将之前的内容结合起来,最主要的是能对组件化编码流程有一个大概的清晰认知,这一套做下来,明天自己再做一遍复习一下,其实组件化流程倒是基本上没什么问题了,主要是很多vue的方法需要多熟悉一下,毕竟打破了之前的一些对于传统js的认知,还需要多熟悉一下。
这两天可能内容不是很多,因为有点感冒了,状态不是很好,不想学多了怕接受的是不是很好。

六.TODOList案例

做这个案例主要是为了能够熟悉组件化编码流程,刚开始学做一个项目最好按照以下三个步骤来

1.实现静态组件

先把一个项目抽取组件,使用组件实现静态页面

vue - Vue脚手架/TodoList案例

比如这个案例App的子组件就可以拆分为三个上面输入框,中间列表展示,下面总结栏,其实组件的划分就是按照他的功能点来划分的,

比如子组件按照功能划分了三个组件,list里每一个item是不是有自己的功能可以勾选,可以删除,所以又可以进一步细分组件(如果你拆完一个组件发现很难起名字,说明你拆的不是很合理

  • 既然已经拆分好组件了,就可以去vue项目里面写我们的组件了,创建、导入、注册三步曲完成

vue - Vue脚手架/TodoList案例

  • 接下来应该有我们的静态模板了,是这样的,一般情况下我们的一个项目大多数已经完成了一些了,所以不会从零开始,这个时候老板派给你个任务叫你把这个实现组件化开发,你就直接把html先一股脑的塞到 App.vue里面,可以启动服务器看到整体的一个效果,然后再去一步一步把代码拆分进我们的组件里面去

    注意:有很多问题是语法报错,将那个lintonsave关闭即可

vue - Vue脚手架/TodoList案例

  • 然后就可以开始拆分了,其他不说这个list里面每一条数据看出了拆分组件的重要性,我直接在list组件复用item就可以了

    vue - Vue脚手架/TodoList案例

  • css拆分时要注意:base等公共样式放在App.vue,其他各自的样式各回各家但是要注意添加scoped

2.展示动态数据

将我们项目中需要动态真实的数据存起来 一般是数组加对象的的形式,一个对象一条数据里面有id、name等等

那么数据一般保存在哪里? 回顾一下之前props的案例,我们的数据是不是写在父组件里面的,通过子组件标签传给了他,子组件才能用props来接受外部传来的数据,所以我们的数据要定义在每条数据这个组件的父组件

vue - Vue脚手架/TodoList案例

在我们定义数据这里几个注意点:

  • id为什么用字符串,因为数值型会有上限,字符串没有
  • 既然数据都有了,所以这里就不用一个一个去写子组件标签了直接v-for列表渲染
  • 最关键的:我们要将数据传到子组件里面去吧,这里不再是像以前那样,一个一个传,这里直接是传的一个对象,而且还是遍历出来的每一条对象,还必须要动态绑定,不动态绑定这里就是一个字符串

子组件这边,注意一下props接受参数要用引号包裹,然后就是怎么来让我们的复选框动态的获取到有没有勾选,让其动态绑定值为我们数据里面的值即可

vue - Vue脚手架/TodoList案例

3.添加

首先我们实现回车添加数据的逻辑,肯定是要生成一个对象然后添加进那个数组里面,这里的id由于灭有数据库支持,就采用了一个包,uuid可以生成全球唯一id,但是他体积表较大,这里用的是另一个体积小一点的 nanoid

vue - Vue脚手架/TodoList案例

接下来问题就来了,我们这个数据是在header里面添加的,而我们的数据是在list,我们学过父组件给子组件传数据(props),但是没有学过兄弟关系来传数据吧,这里才去最基础的方法来实现

vue - Vue脚手架/TodoList案例

我们吧list里面定义的数据data放到app组件里面去,然后app通过动态绑定将数据传到list的组件标签,这个时候list用props来接受传过来的值

最主要的是怎么把子组件header传到父组件app里面去:我们在app定义一个函数然后接受形参,将这个函数动态绑定给到header,header通过props就能够得到这个函数,然后重要的一步 我将这个函数写在键盘事件里面,同时参数是我们的创建的数据,就相当于调用了这个函数,调用不要紧,关键是这个函数式app送给你用的,你调用(送给你用的所以拿过来是存在于vc实例对象上)拿我app不就拿到了这个参数吗所以,app现在又有参数,又定义了数据,那么添加的逻辑就开始了

vue - Vue脚手架/TodoList案例

vue - Vue脚手架/TodoList案例

4.勾选

我们要在item里面来勾选,从而影响到数据里面的completed这个选项,我们的数据是定义在App里面的,有一句话叫做 数据在哪里,那么处理数据的方法就写在哪里,所以这里好像又要用到子组件给父组件东西了,给什么?我勾选的状态实在item里进行的,我必须拿到勾选的这一个id,才能在处理数据的方法里面以id为参数对数据记性遍历找到对应的那一个将他的completed的值改为非值

vue - Vue脚手架/TodoList案例

vue - Vue脚手架/TodoList案例

这里有一个注意点,把我们之前这个勾选的所有逻辑推翻,直接在item的input标签里面写一个v-model,我们说复选框v-model默认收集的是checked的值,如果我把v-model设置为todo.completed是不是就让我们的checked动态绑定了,他为true,checked就为true,第一步初始化数据的勾选完成了,这里还有一个更重要的,你该数据也同样可以改到data里面的数据,因为v-model本身就是双向绑定,但是我们前面也说过,props接收到的数据不能改,这里很明显是通过props传过来的数据改到的,为什么这里没报错呢,因为vue对于对象改动的检测有点类似于 const,一般数据确实数据变了就是改动了,但是数组和对象通过属性名或者下标去改某一个值并不叫改动,要变动整个数组和对象才叫改动,所以这里没有报错,这个方法是简单但是,官方定义的props传过来的数据不能改,最好还是不要改,万一哪天这个数据不是对象里的值了,就麻烦了,最好还是按照语法规则来

vue - Vue脚手架/TodoList案例

5.删除

主题逻辑刚上面差不多,点击删除返回id,app传过来一个函数接受这个id,然后数组的筛选方法filter让我们的数据等于筛选出来的新数组,这里就不考虑性能问题了,假装是个标记删除吧,删除了虽然还在但是也永远不会给你显示出来了,所以可以直接把他赋值给这个原数据,还有一个点confirm确认框,会弹出一个对话框内容为你传进去的参数,配合if来使用可以达到只有你点击确定了才会执行后面的逻辑

vue - Vue脚手架/TodoList案例

vue - Vue脚手架/TodoList案例

6.底部统计

既然是统计,那肯定要用计算节点来做,这里用到了数组的reduce方法,要注意的是,prev每次返回要等于他自己

vue - Vue脚手架/TodoList案例

7.底部交互

先完成我们点击了所有的勾选框,下面全选会勾上,但凡少勾选一个都不会钩上的逻辑,其实很简单,将我们全部的这个数量也弄成一个计算属性,然后将我们全选动态绑定,且返回值也由计算属性来决定,直接去比较已完成和全部是否相等

vue - Vue脚手架/TodoList案例

探后就是我们的全选功能,逻辑是这样,点击一下,通过e获取他的checked的值,然后又要动到数据了,需要app里面对数组做一个循环对所有的数据的completed的值都等于这个checked的值

vue - Vue脚手架/TodoList案例

但是这样有一个bug,当我们删完后,会是勾选状态,应该为不勾选并且隐藏掉

vue - Vue脚手架/TodoList案例

在我们刚才完成点击点击上面,下面全选也会对应去勾选上那里的逻辑完善一下,因为原来的写法,就是当已完成和总数一样的时候就会勾选上,那么最后删完了,也是一样的所以不行

vue - Vue脚手架/TodoList案例

通过v-if添加在footer即可

vue - Vue脚手架/TodoList案例

好了,可以忘掉这一章节实现的功能了,简便方法他来了

我们这里的全选框有些啥子东西,一个管初始化读取数据的,一个改数据的,又是input,读写,想到他没有v-model

vue - Vue脚手架/TodoList案例

我们用v-model去绑定isAll的值也就是判断有没有全选的值,即可完成读的操作,仔细想想是不是

vue - Vue脚手架/TodoList案例

vue - Vue脚手架/TodoList案例

但是这里改的话会报错,为什么?

因为我们的isAll是计算属性,你改动他的值,你setter都没有怎么改,所以这里要这么做,定义一个setter,并且把这个值给到我们刚才定义的循环让所有值都等于这个checked的App组件上的函数

vue - Vue脚手架/TodoList案例

为什么这里可以使用v-model前面是因为那个值时props传过来的值肯定不能改,而这里是我们写在这个组件的计算属性属于自己的

8.清除已完成的任务

最后一个功能,很简单直接一个点击事件,在app这边做一个数组筛选,筛选的是completed没被选中的

9.总结

组件化编码流程

  • 拆分静态组件,按照功能拆分
  • 实现动态组件,考虑好数据的位置,如果数据是一个组件在用就放到这个组件,如果数据是一些组件在用,就放到他们的共同的父组件(这种方法也叫做状态提升)
  • 实现交互(从绑定事件开始)
  • props不仅适合父给子传数据,还可以子给父传数据(父会给子一个函数)
  • v-model注意修改的值是不是props过来的,不是他过来的还是可以用的还是很方便的
  • 修改对象里面的值跟const一样改单个值不会被发现,要修改整个对象