Web前端最全Vue项目实战——实现一个任务清单【基于 Vue3，前端开发进大厂面试必备技能

2301_82243839

于 2024-05-08 22:38:56 发布

阅读量783

点赞数 24

分类专栏：程序员文章标签：前端 vue.js 面试

本文链接：https://blog.csdn.net/2301_82243839/article/details/138588785

版权

程序员专栏收录该内容

93 篇文章 0 订阅

订阅专栏

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

Vue3.x 实现 todoList

1、前言

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

内容	参考链接
Vue2.x全家桶	Vue2.x全家桶参考链接
Vue3.x的基本使用	Vue3.x基本使用参考链接

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

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

Vue3.x_任务清单

在这里插入图片描述

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("");
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。



我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。



以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。



我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

2301_82243839

关注

24
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Web前端最全Vue项目实战——实现一个任务清单【基于 Vue3，前端开发进大厂面试必备技能

如果你对 vue3 的基础知识还很陌生，推荐先去学习一下 vue 基础内容参考链接Vue2.x全家桶Vue2.x全家桶参考链接Vue3.x的基本使用Vue3.x基本使用参考链接如果你刚学完vue3 基础知识，想检查一下自己的学习成果如果你已学完vue3 基础知识，想快速回顾复习如果你已精通vue3 基础知识，想做个小案例那不妨看完这篇文章，我保证你一定会有收获的！
复制链接

扫一扫