Vue框架Todo-list案例

Todo-list案例

课程推荐——尚硅谷Vue技术 链接地址

https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=71&spm_id_from=333.880.my_history.page.click&vd_source=11d0d9eb116c0fa98aed800bd67787a6

在开始着手做项目之前，首先对整个项目进行分析，规划出需要组件，对组件进行命名，组件化处理项目。此次项目，主要将组件分为4个部分，分别是：

1. HeaderComponent代表搜索框

2. ListComponent代表整个需要做的事情

3. ItemComponent代表每个需要做的事情

4. FooterComponent代表计算已完成/全部个数

制作静态页面

这一步不需要考虑具体功能的实现，只需要使用样式和Html将组件内部的内容显示出来即可。（ps：我做的有点简陋，学习为主嘛） 这里忽略点击回车键结束——我决定通过按钮添加

实现效果如下：

实现代码如下：

​

​

​

​

显示动态数据

接下来需要考虑到，清单事情的数据类型是什么？名称是什么？以及数据保存在哪个组件当中

考虑到事件可能会重名，这里使用的是数组嵌套对象的方式存储数据。对象中包含数据的id；name；done；

每个数据名称是含义是:
1. id:事情的编号
2. name：存储事情的名字，是什么
3. done：bool值，代表事情是否完成

数据名称是todos，数据存放在ListComponent组件中——在做的过程中会出现问题，之后会修改位置

将List组件中已有的数据，通过props传递到Item组件中，进行动态展示。

数据
data(){
        return {
            todos:[
                {id:'01',name:'吃饭',done:true},
                {id:'02',name:'睡觉',done:true},
                {id:'01',name:'打豆豆',done:false},
            ]
        }
    }

    

    
        
        {{todo.name}}
    
    删除
    

​

​

实现效果如下：

添加数据

通过输入，动态添加数据

在用户输入一个事情之后，使用v-model获取数据，点击添加按钮，将数据存放在todoobj中。

需要注意的是，数据的id是唯一标识，在没有服务器和数据库的情况下，可以使用uuid生成一个序列号，uuid根据电脑地理位置+内存条等等生成唯一的编码，但是生成的数据很大，真内存的很哈哈哈哈。所以使用nanoid库进行实现。

生成对象之后需要将数据传送到todos数组中，如果数据存放在List组件中，会发现，无法实现兄弟组件之间数据的相互传递，所以这里修改todos数组的存放位置，将数组存放在App根组件中。

通过props像子组件List传递数据，使用$emit实现子组件Head向App传递数据。

接收数据之后，使用unshift将数据增加大todos数组中。

 methods:{
    getHandle(data){
      this.todos.unshift(data)
    }
  }

​

实现效果如下：

数据状态的切换

在勾选框时，实现数据完成和为完成状态的切换，实现这个功能可以使用@click事件（点击事件）或者change事件（点击之后状态发生改变）

依旧是使用$emit进行子组件向父组件传递被选中数据的id，在App组件中对特定id数据的done进行取反，实现修改事情状态的转换

​
 checkHandel(id){
            //通知App组件，将对应的done值取反——改变数据的状态
            this.$emit('checkID', id)
        }

​
​
checkHandel(data){
            this.$emit("checkID",data)
        },

​
//改变数据的状态
    changeHandel(id){
      this.todos.forEach((todo)=>{
        if(todo.id == id) todo.done = !todo,done
      })
    },

删除数据

同上述步骤传递数据之后，改变App.vue中的实现方法，实现删除功能

confirm()可以和用户产生交互，根据用户的反馈，返回bool值

//删除数据
    deleteHandel(id){
      if(confirm("确定要删除吗？")){
        this.todos = this.todos.filter(todo => todo.id !== id);
      }
    }

统计数据

使用props方法将todos数据传给Foot组件，通过计算属性和模板语法相结合实现数据的统计

done Total(){
    let i = 0
    this.todos.forEach((todo)=>{
        if(todo.done) i++
    })
}
computed:{
        doneTotal(){
            return this.todos.reduce((pre, current)=>{
                return pre + (current.done ? 1:0)
            }, 0)
            
        }
    }

！！！reduce(, 0)后面的0代表的是pre——需要理解一下

在统计数据前面增加复选框，如果事情全部被选择，则自动勾选，同样使用计算属性进行实现

 
isall(){
            return this.doneTotal === this.total && this.total > 0
        }

如果没有任何事情，则不显示统计信息,使用v-show属性进行实现

全选或全不选数据

通过得到统计数据的复选框的checked值，改变todo.done的值

methods:{
        checkall(e){
            this.$emit("checkall", e.target.checked)
        }
    }
checkall(data){
        this.todos.forEach((todo)=>{
          todo.done = data
        })
    }

清除所有已完成的数据

（这个功能的实现我一直有问题，不做详细解释）

源码

效果展示

想放视频，但是好像不能直接插入视频。over

综上就是这个项目的所有内容！欢迎大家提出建议！祝好运