Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶（简易版）】

深藏阁楼爱情的钟 2023-09-27 11:17 87阅读 0赞

## Vue3.x 项目实战（一） ##

<table> 
 <thead> 
  <tr> 
   <th>内容</th> 
   <th>参考链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Vue2.x全家桶</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/category_11798606.html?spm=1001.2014.3001.5482" rel="nofollow">Vue2.x 全家桶参考链接</a></td> 
  </tr> 
  <tr> 
   <td>Vue2.x项目（一）</td> 
   <td><a href="https://zahuopu.blog.csdn.net/article/details/126738430" rel="nofollow">Vue2.x 实现一个任务清单</a></td> 
  </tr> 
  <tr> 
   <td>Vue2.x项目（二）</td> 
   <td><a href="https://zahuopu.blog.csdn.net/article/details/126751629" rel="nofollow">Vue2.x 实现GitHub搜索案例</a></td> 
  </tr> 
  <tr> 
   <td>Vue3.x项目（三）</td> 
   <td><a href="https://zahuopu.blog.csdn.net/article/details/127018571" rel="nofollow">Vue3.x 实现一个任务清单</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 文章目录 ####

*  Vue3.x 项目实战（一）
 *   *  Vue3.x 实现 todoList
     *   *  1、前言
         *  2、项目演示（一睹为快）
         *  3、涉及知识点
         *  4、项目详情
         *  5、写在最后的话
         *  6、附源码

--------------------

### Vue3.x 实现 todoList ###

#### 1、前言 ####

如果你对 vue3 的基础知识还很陌生，推荐先去学习一下 vue 基础

*  如果你 **刚学完** vue3 基础知识，**想检查一下自己的学习成果**
 *  如果你 **已学完** vue3 基础知识，**想快速回顾复习**
 *  如果你 **已精通** vue3 基础知识，**想做个小案例**
 *  那不妨看完这篇文章，**我保证你一定会有收获的！**

#### 2、项目演示（一睹为快） ####

Vue3.x\_任务清单

![在这里插入图片描述][463dbc509eaf4140b19b5167b55f5a33.png]

![在这里插入图片描述][fa409f31482248b29dd7417bf4c22599.png]

#### 3、涉及知识点 ####

**麻雀虽小，五脏俱全，接下来开始我们的项目之旅吧~~**

*  Vue3.x基础：插值语法，常用指令，键盘事件，列表渲染，计算属性，生命周期
 *  Vue3.x进阶：props（父传子），自定义事件（任意组件间通信）
 *  Vuex4.x：状态管理库的使用
 *  Vue-router4.x：使用路由进行页面跳转

备注：

1.  任意组件间的通信方式有很多种（全局事件总线，消息订阅预发布…），**熟练掌握一种即可**（推荐自定义事件，配置简单，容易理解）
2.  本文是 vue 基础的练习项目，**也涉及 vue 周边（Vuex，Vue-Router）**

#### 4、项目详情 ####

main.js

*  导入 store 和 router，并且使用

import {
         createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    createApp(App).use(store).use(router).mount('#app')

./router/index.js

*  配置路由
 *  直接导入 VS 按需导入（节约性能）
 *  使用了 history 路由模式

import {
         createRouter, createWebHistory } from 'vue-router'
    // 直接引入
    import Start from '../views/Start.vue'
    
    const routes = [
      {
        
        path: '/',
        name: 'Start',
        component: Start
      },
      {
        
        path: '/home',
        name: 'Home',
        // 按需引入，节约性能
        component: () => import('../views/Home.vue')
      }
    ]
    
    // 创建路由对象
    const router = createRouter({
        
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router

./store/index.js

*  state 中定义初始化数据
 *  mutations 中定义方法

import {
        
      createStore
    } from 'vuex'
    
    export default createStore({
        
      // 定义初始化状态
      state: {
        
        list: [
          {
        
            title: "吃饭",
            complete: false,
          },
          {
        
            title: "睡觉",
            complete: false,
          },
          {
        
            title: "敲代码",
            complete: true,
          },
        ]
      },
      
      // 同步修改 state 都是方法
      // 第一个参数 state 第二个参数是需要修改的值
      mutations: {
        
        // 添加任务
        addTodo(state, payload) {
        
          state.list.push(payload)
        },
        // 删除任务
        delTodo(state, payload) {
        
          state.list.splice(payload, 1)
        },
        // 清除已完成
        clear(state, payload) {
        
          // 把过滤之后的数组传进来
          state.list = payload
        }
      },
      // 异步提交 mutation
      // 第一个参数是 store 第二个参数是修改的值
      actions: {
        
    
      },
      // 模块化
      modules: {
        }
    })

App.vue 组件

*  做呈现的组件
 *  `<router-view />` 呈现内容

<template>
      <router-view/>
    </template>
    
    <style lang="scss">
      * {
        
        margin: 0;
        padding: 0;
      }
    </style>

Start.vue 组件

*  初始化页面
 *  点击开启任务，跳转到任务页面

<template>
      <div class="title">
        <h1>欢迎来到前端杂货铺</h1>
        <button @click="start">开始任务</button>
      </div>
    </template>
      
    <script>
    import {
         ref } from "vue";
    import {
         useRouter } from "vue-router";
    export default {
        
      name: "Start",
      setup() {
        
        // router 是全局路由对象
        let router = useRouter();
        let name = ref(10);
        // 点击进行路由跳转
        let start = () => {
        
          router.push({
        
            name: "Home",
            params: {
        
              name: name.value,
            },
          });
        };
        return {
        
          start,
        };
      },
    };
    </script>
      
    <style lang="scss" scoped>
    .title {
        
      color: orange;
      text-align: center;
      margin-top: 20%;
    }
    button {
        
      margin-top: 20px;
      width: 100px;
      height: 50px;
      background: skyblue;
      color: white;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
    }
    button:hover {
        
      font-weight: bold;
      background: white;
      color: skyblue;
      cursor: pointer;
    }
    </style>

Home.vue 组件

*  其他组件 **表演的舞台**
 *  传递数据
 *  自定义事件，进行组件间通信

<template>
      <div class="container">
        <nav-header @add="add"></nav-header>
        <nav-main :list="list" @del="del"></nav-main>
        <nav-footer :list="list" @clear="clear"></nav-footer>
      </div>
    </template>
    
    <script>
    import NavHeader from "@/components/navHeader/NavHeader";
    import NavMain from "@/components/navMain/NavMain";
    import NavFooter from "@/components/navFooter/NavFooter";
    import {
         ref, computed } from "vue";
    import {
         useStore } from "vuex";
    export default {
        
      name: "Home",
      // 接收父组件的数据
      props: {
        },
      // 定义子组件
      components: {
        
        NavHeader,
        NavMain,
        NavFooter,
      },
    
      // 接收的数据，上下文
      setup(props, ctx) {
        
        let store = useStore();
        let list = computed(() => {
        
          return store.state.list;
        });
        let value = ref("");
        // 添加任务
        let add = (val) => {
        
          value.value = val;
          // 任务存在 不能重复添加
          let flag = true;
          list.value.map((item) => {
        
            if (item.title === value.value) {
        
              // 有重复任务
              flag = false;
              alert("任务已存在");
            }
          });
          // 没有重复任务
          if (flag == true) {
        
            // 调用 mutation
            store.commit("addTodo", {
        
              title: value.value,
              complete: false,
            });
          }
        };
    
        // 删除任务
        let del = (val) => {
        
          // 调用删除的 mutation
          store.commit('delTodo', val)
          console.log(val);
        }
    
        // 清除已完成
        let clear = (val) => {
        
          store.commit('clear', val)
        }
        
        return {
        
          add,
          list,
          del,
          clear
        };
      },
    };
    </script>

NavHeader.vue 组件

*  头部组件（输入框）
 *  输入任务按下回车进行任务的添加
 *  `emit`，使用分发的事务

<template>
      <div>
        <div class="container">
          <input
            type="text"
            placeholder="请输入任务名称"
            v-model="value"
            @keyup.enter="enter"
          />
        </div>
      </div>
    </template>
    
    <script>
    import {
         ref } from "vue";
    export default {
        
      name: "navHeader",
      // 接收的数据，上下文
      setup(props, ctx) {
        
        let value = ref("");
        // 按回车键确认
        let enter = () => {
        
          // 把输入框的内容传递给父组件
          ctx.emit("add", value.value);
          // 清空输入框
          value.value = "";
        };
        return {
        
          value,
          enter,
        };
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .container {
        
      text-align: center;
      margin-top: 220px;
    }
    .container input {
        
      height: 25px;
      width: 200px;
      margin-bottom: 10px;
    }
    </style>

NavMain.vue 组件

*  `props` 接收 list 数据
 *  `v-for` 遍历出来内容
 *  使用条件判断做呈现

<template>
      <div class="container">
        <div v-if="list.length > 0">
          <div v-for="(item, index) in list" :key="index">
            <div class="item">
              <input type="checkbox" v-model="item.complete" />
              {
        {
         item.title }}
              <button class="del" @click="del(item, index)">删除</button>
            </div>
          </div>
        </div>
        <div v-else>
          暂无任务
        </div>
      </div>
    </template>
    
    <script>
    export default {
        
      name: "navMain",
      props: {
        
        list: {
        
          type: Array,
          required: true,
        },
      },
      // 分发事件的属性名
      emits: ["del"],
      setup(props, ctx) {
        
        // 删除任务
        let del = (item, index) => {
        
          ctx.emit("del", index);
          console.log(index, item);
        };
        return {
        
          del,
        };
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .container {
        
      margin: auto;
      border: 2px solid #ccc;
      width: 200px;
      margin-bottom: 20px;
      
    }
    .item {
        
      height: 35px;
      line-height: 35px;
      position: relative;
      width: 200px;
      button {
        
        cursor: pointer;
        position: absolute;
        right: 4px;
        top: 6px;
        display: none;
        z-index: 99;
      }
      &:hover {
        
        background: #ddd;
        button {
        
          display: block;
        }
      }
    }
    </style>

NavFooter.vue 组件

*  过滤出已完成的任务，获取到已完成任务的个数
 *  过滤出未完成的任务，清除的时候保留未完成的任务

<template>
      <div class="container">
          已完成 {
        {
         isCompelete }} / 全部 {
        {
         list.length }}
          <span v-if="isCompelete" class="btn">
            <button @click="clear">清除已完成</button>
          </span>
      </div>
    </template>
    
    <script>
    import {
         computed } from "vue";
    export default {
        
      name: "navFooter",
      props: {
        
        list: {
        
          type: Array,
          required: true,
        },
      },
      setup(props, ctx) {
        
        let isCompelete = computed(() => {
        
          // 过滤已完成
          let arr = props.list.filter((item) => {
        
            return item.complete;
          });
          return arr.length;
        });
        // 清除已完成
        let clear = () => {
        
          // 过滤未完成的
          let arr = props.list.filter((item) => {
        
            return item.complete === false;
          });
          ctx.emit("clear", arr);
          console.log("clear");
        };
    
        return {
        
          isCompelete,
          clear,
        };
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .container {
        
      text-align: center;
    }
    </style>

**至此，此项目就实现了，如果什么问题，欢迎评论区或私信留言，看到定会第一时间解决！**

#### 5、写在最后的话 ####

如果你是 **看完全篇** 阅读到了这里，我相信你一定是有收获的！

那么下面不妨打开自己的电脑，启动自己的编译器，**来跟着做 / 自己做一遍吧！**

**有机会的话，在不久的将来还会对这个小案例进行升级（功能以及样式的升级）敬请期待吧~~**

#### 6、附源码 ####

--------------------

![在这里插入图片描述][45fc82a82c6542bdb2ff4986377d8db3.png]

--------------------

[463dbc509eaf4140b19b5167b55f5a33.png]: https://img-blog.csdnimg.cn/463dbc509eaf4140b19b5167b55f5a33.png
[fa409f31482248b29dd7417bf4c22599.png]: https://img-blog.csdnimg.cn/fa409f31482248b29dd7417bf4c22599.png
[45fc82a82c6542bdb2ff4986377d8db3.png]: https://img-blog.csdnimg.cn/45fc82a82c6542bdb2ff4986377d8db3.png