基于webpack+vue实现的待办VUE-TODOLIST前端项目简单总结

159 阅读 0 评论 105 点赞

我是靠谱客的博主愤怒摩托，这篇文章主要介绍基于webpack+vue实现的待办VUE-TODOLIST前端项目简单总结，现在分享给大家，希望可以做个参考。

一、手动配置对webpack进行相关的配置
参考我的上一篇文章：
https://editor.csdn.net/md/?articleId=110011301

1.实现页面
在这里插入图片描述

2.实现技术：

组件模块化思想
父组组件之间的数据双向传递（porps、this.$emit)

同理：
使用stylus语法对css样式进行编译（实现css样式的模块化、优化代码结构，将具有共同样式的css代码组装起来，组装成函数，需要时直接引入调用即可）
-
使用watch实现对数据的监听

复制代码

1
2
3
4
5
6
7
8
9
  watch: {
      todoData: {
        deep: true,
        handler() {
          this.total = this.todoData.filter((v) => v.complete == false).length
        },
      },
    },`

使用computed实现对数据的计算，实现过滤显示效果

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  computed: {
      filterData() {
        switch (this.filter) {
          case "all":
            return this.todoData
            break
          case "active":
            return this.todoData.filter((v) => v.complete == false)
            break
          case "completed":
            return this.todoData.filter((v) => v.complete == true)
            break
        }
      },
    },

显示：（todoData-----> filterData）

复制代码

1
2
3
4
5
6
7
  <main-item
      v-for="(item, index) in filterData"
      :key="index"
      :todo="item"
      @del="deleteItem"
    ></main-item>

js部分

1）.使用.unshift()实现向数组中添加元素（这里添加向数组添加的元素为对象类型）

复制代码

1
2
3
4
5
6
7
   this.todoData.unshift({
          id: id++,
          content: this.content,
          complete: false,
        })

2）使用.filter(v=>条件)实现对数组过滤，即筛选出符合条件的元素

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  computed: {
      filterData() {
        switch (this.filter) {
          case "all":
            return this.todoData
            break
          case "active":
            return this.todoData.filter((v) => v.complete == false)
            break
          case "completed":
            return this.todoData.filter((v) => v.complete == true)
            break
        }
      },
    },

3）使用.findIndex((v,i)=>条件)实现数组查找，返回的时满足条件元素的数组下标
使用.splice(index,n)实现删除数组中满足条件的元素

复制代码

1
2
3
4
5
6
7
8
deleteItem(id) {
        this.todoData.splice(
          this.todoData.findIndex((i, v) => {
            i === id
          }),
          1
        )