Vue项目实战——实现一个任务清单【基于 Vue3_vue3实现任务集成列表,点开不同任务显示不同任务详情-CSDN博客

本文链接：https://blog.csdn.net/2401_85123473/article/details/139710099

3、涉及知识点

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

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

备注：

任意组件间的通信方式有很多种（全局事件总线，消息订阅预发布…），熟练掌握一种即可（推荐自定义事件，配置简单，容易理解）
本文是 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 {


### 最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。



![css源码pdf](https://img-blog.csdnimg.cn/img_convert/84702472a5115466dbe674591abe3a8b.webp?x-oss-process=image/format,png)

![JavaScript知识点](https://img-blog.csdnimg.cn/img_convert/5241b950352cbd504556fc94b27a49f3.webp?x-oss-process=image/format,png)
4px;
    top: 6px;
    display: none;
    z-index: 99;
  }
  &:hover {
    background: #ddd;
    button {


### 最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。



[外链图片转存中...(img-kcM7Ifi3-1718461901932)]

[外链图片转存中...(img-ZHlwMOGO-1718461901932)]