位置: IT常识 - 正文

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

编辑:rootadmin
Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】 Vue3.x 项目实战(一)内容参考链接Vue2.x全家桶Vue2.x 全家桶参考链接Vue2.x项目(一)Vue2.x 实现一个任务清单Vue2.x项目(二)Vue2.x 实现GitHub搜索案例Vue3.x项目(三)Vue3.x 实现一个任务清单文章目录Vue3.x 项目实战(一)Vue3.x 实现 todoList1、前言2、项目演示(一睹为快)3、涉及知识点4、项目详情5、写在最后的话6、附源码Vue3.x 实现 todoList1、前言

推荐整理分享Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】(最全vue项目实战),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:最全vue项目实战,vue做项目的流程,vue项目实战教程,vue实例完整项目源码,vue项目实例,vuecli项目实战,vue做项目的流程,vue项目实例,内容如对您有帮助,希望把文章链接给更多的朋友!

如果你对 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 routerVue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】(最全vue项目实战)

./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、附源码

本文链接地址:https://www.jiuchutong.com/zhishi/298299.html 转载请保留说明!

上一篇:Chrome插件开发教程(chrome 浏览器插件开发)

下一篇:GPS启动方式、定位速度、定位精度介绍(gps定位器怎么开启)

  • 卸载软件神器(卸载软件)(卸载软件神器下载)

    卸载软件神器(卸载软件)(卸载软件神器下载)

  • iqoo8pro手机丢了怎么定位找回(iqooz1手机丢了怎么办)

    iqoo8pro手机丢了怎么定位找回(iqooz1手机丢了怎么办)

  • 香山体脂秤怎么连接手机(香山体脂秤怎么开机)

    香山体脂秤怎么连接手机(香山体脂秤怎么开机)

  • 快手不知道名字和id怎么找人(快手不知道名字怎么改)

    快手不知道名字和id怎么找人(快手不知道名字怎么改)

  • 快手怎么充值(快手怎么充值推广)

    快手怎么充值(快手怎么充值推广)

  • pbdmoo是oppo什么型号手机(pbem00是oppo什么型号,要多少钱)

    pbdmoo是oppo什么型号手机(pbem00是oppo什么型号,要多少钱)

  • vivo手机怎么强制安装软件(vivo手机怎么强制刷机)

    vivo手机怎么强制安装软件(vivo手机怎么强制刷机)

  • 斗鱼app怎么私信主播(斗鱼app怎么私信对方)

    斗鱼app怎么私信主播(斗鱼app怎么私信对方)

  • 荣耀30屏幕尺寸是多少(荣耀30屏幕尺寸是多少寸)

    荣耀30屏幕尺寸是多少(荣耀30屏幕尺寸是多少寸)

  • 苹果手机提示音怎么改(苹果手机提示音没有了怎么回事)

    苹果手机提示音怎么改(苹果手机提示音没有了怎么回事)

  • 小米8安全模式怎么解除(小米8安全模式怎么退出来啊手机)

    小米8安全模式怎么解除(小米8安全模式怎么退出来啊手机)

  • 为什么苹果国际版便宜(为什么苹果国际价格高)

    为什么苹果国际版便宜(为什么苹果国际价格高)

  • 冬天锂电池续航能力下降多少(冬天锂电池续航多少公里)

    冬天锂电池续航能力下降多少(冬天锂电池续航多少公里)

  • 荣耀手机安装未知应用权限在哪里(荣耀手机安装未知)

    荣耀手机安装未知应用权限在哪里(荣耀手机安装未知)

  • 微信收款为什么要输入名字(微信收款为什么没有积分)

    微信收款为什么要输入名字(微信收款为什么没有积分)

  • 电脑装完系统后还是不能进入windows(电脑装完系统后重启就进不了系统)

    电脑装完系统后还是不能进入windows(电脑装完系统后重启就进不了系统)

  • 微信封面的图片怎么保存下来(微信封面的图片能保存吗)

    微信封面的图片怎么保存下来(微信封面的图片能保存吗)

  • 红米k304g和5g区别(红米k305g和4g有什么区别)

    红米k304g和5g区别(红米k305g和4g有什么区别)

  • 手机怎么关闭电脑qq(手机怎么关闭电脑微信)

    手机怎么关闭电脑qq(手机怎么关闭电脑微信)

  • 苹果怎么群删短信(苹果电话怎么群删短信)

    苹果怎么群删短信(苹果电话怎么群删短信)

  • 淘宝集福鱼在哪找(淘宝集福在哪里找)

    淘宝集福鱼在哪找(淘宝集福在哪里找)

  • 怎么看电话卡的号码(怎么看电话卡的免流应用)

    怎么看电话卡的号码(怎么看电话卡的免流应用)

  • 抖音用蓝牙怎么拍摄(抖音用蓝牙怎么拍摄视频教程)

    抖音用蓝牙怎么拍摄(抖音用蓝牙怎么拍摄视频教程)

  • 微信视频太长发不出去怎么办(微信发视频太长了怎么办?)

    微信视频太长发不出去怎么办(微信发视频太长了怎么办?)

  • 苹果补充更新macOS Catalina10.15.7版本(mac更新内容)

    苹果补充更新macOS Catalina10.15.7版本(mac更新内容)

  • 自己动手搭网站(六):javaweb搭建一个简单的个人博客系统(自己搭建网站怎么赚钱)

    自己动手搭网站(六):javaweb搭建一个简单的个人博客系统(自己搭建网站怎么赚钱)

  • 应纳税额与应纳税所得额的比率
  • 印花税应交税费
  • 出口退税退的税是用进项税抵扣吗
  • 农机合作社项目复核报告
  • 销售费用包括啥
  • 购入固定资产一次性扣除
  • 车间报销办公费计入什么科目
  • 城市维护建设税减免税优惠政策
  • 商业汇票贴现怎么做
  • 施工企业所得税税率是多少
  • 企业所得税分公司先报还是总部先报
  • 有限合伙企业注册资金要求
  • 帮客人清关的费用如何做会计核算合适呢?
  • 资产减值损失转回的账务处理
  • 未认缴出资的股东退股
  • 金融工具包括哪些及其法律特征
  • 企业破产清算怎么做账务处理实务工作
  • 小规模商业企业税率
  • 印花税申报表如何填写
  • 企业相互之间借款合法吗
  • 已经计提的增值税怎么退
  • 待转销项税额结转分录
  • 企业年金个税如何计提
  • 建筑企业预收的工程款会计分录
  • 银行转账取得的收据
  • 汇算清缴时
  • 增值税增量留抵退税政策解读
  • mac上安装homebrew
  • 预提费用支付是指什么
  • 企业纳税申报的流程
  • 单位向员工出租房屋要交增值税吗
  • 委托外单位加工发出的材料会影响账面价值吗
  • createrectrgn
  • win7旗舰版叫啥
  • 工程项目会计怎么样
  • 金融机构通过
  • 薄雾笼罩着整个森林
  • 一次补发工资怎么算
  • 古罗马广场意大利
  • vue错误处理
  • video.js教程
  • auto.js 逆向
  • vue内置指令实验总结
  • php限制
  • md5 linux
  • ps卸载没反应
  • 其他权益工具投资公允价值变动怎么计算
  • 民间非盈利组织会计要素组成
  • 所得税汇算清缴怎么操作
  • 应付账款坏账损失的会计分录
  • 先弥补亏损还是先分配利润
  • 工资以现金形式发放英文
  • short int、long、float、double使用问题说明
  • 主营业务收入和销售费用的区别
  • 核定征收的情况包括
  • 罚款支出算费用吗
  • 土地使用税如何计算缴纳
  • 应付账款与实际付款有差异如何分录
  • 租入的房子再出租用交房产税吗?
  • 委托生产的会计分录
  • 支付补偿款计入什么会计科目
  • 个人垫付社保会计分录
  • 劳务派遣中谁给劳动者发工资
  • 什么是固定资产的后续支出
  • 现金日记账月末怎么结账图片
  • mysql 5.7.12 winx64手动安装教程
  • win8系统安装软件在桌面找不到
  • windows10怎么隐藏工具栏
  • centos如何下载
  • win7电脑频繁自动重启是什么原因造成的
  • explore.exe进程占用cpu99%
  • WINDOWS操作系统属于什么操作系统
  • linux 系统监控
  • linux windows转linux
  • 如何解决android兼容问题
  • unity快速接入第三方sdk
  • jquery mobile 加载页面
  • 税务局的经济类型
  • 车船税可以异地补办吗
  • 工会代扣代缴个税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设