Vue项目实战——实现一个任务清单（学以致用，两小时带你巩固和强化Vue知识点）

2023年6月2日下午12:14 • 人工智能 • 阅读 84

Vue2.x 项目实战（一）

内容参考链接Vue2.x全家桶
Vue2.x 全家桶参考链接

Vue2.x项目（一）
Vue2.x 实现一个任务清单

Vue2.x项目（二）
Vue2.x 实现GitHub搜索案例

Vue3.x项目（三）
Vue3.x 实现一个任务清单

文章目录

Vue2.x 项目实战（一）
*
Vue2.x 实现 todoList
–

Vue2.x 实现 todoList

1、前言

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

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

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

todoList 项目演示

Vue项目实战——实现一个任务清单（学以致用，两小时带你巩固和强化Vue知识点）

; 3、涉及知识点

Vue基础：插值语法，常用指令，键盘事件，列表渲染，计算属性，事件监听，生命周期
Vue进阶：props（父传子），自定义事件（任意组件间通信），自定义事件的解绑，$nextTick 异步
[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:20c3182a-e75e-4398-bac9-0537dd6980f0

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:fbbfa127-0b2a-4455-b77c-405bbe8b2cd5
第三方库：nonoid（下载导入即可使用）

备注：

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

4、项目详情（附源码及解析）

该项目有 五个组件 构成：

（1）App.vue 父组件，以上四个子组件 最终归并的地方，并实现很多功能相关方法

（2）MyHeader.vue 子组件：头部，用于用户文本框 输入添加任务事项

（3）MyList.vue 子组件：躯干，用于 呈现任务的列表

（4）MyItem.vue 子中子组件，Mylist.vue 的子组件，用于 呈现每个任务及编辑删除

（5）MyFooter 子组件，用于 显示所选个数和总个数及删除已完成任务

App.vue 父组件

所有子组件的汇集点
里面定义里很多方法，通过 props 父传子，供子组件们去使用
[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:58f0bec7-8610-4192-ae10-d5bd42c7379b

[En]

[TencentCloudSDKException] code:FailedOperation.ServiceIsolate message:service is stopped due to arrears, please recharge your account in Tencent Cloud requestId:9addaec8-4857-47cd-84e3-316250a416f2

<template>  <!-- 最外层容器 -->  <div class="todo-container">    <div class="todo-wrap">      <!-- 头部子组件，子传父，自定义 addTodo事件，添加一个 todo对象 -->      <MyHeader @addTodo="addTodo" />      <!-- 任务列表子组件，父传子，动态绑定对应事件 -->      <MyList :updateTodo="updateTodo" :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />      <!-- 底部子组件，子传父，全选和全清除 -->      <MyFooter        :todos="todos"        @checkAllTodo="checkAllTodo"        @clearAllTodo="clearAllTodo"      />    </div>  </div></template><script>import MyHeader from "./components/MyHeader.vue";import MyList from "./components/MyList.vue";import MyFooter from "./components/MyFooter.vue";export default {  name: "App",  components: { MyHeader, MyList, MyFooter },  data() {    return {      todos: JSON.parse(localStorage.getItem("todos")) || [],    };  },  methods: {    addTodo(todoObj) {      this.todos.unshift(todoObj);    },    checkTodo(id) {      this.todos.forEach((todo) => {        if (todo.id === id) todo.done = !todo.done;      });    },    updateTodo(id, title) {      this.todos.forEach((todo) => {        if (todo.id === id) todo.title = title;      });    },    deleteTodo(id) {      this.todos = this.todos.filter((todo) => todo.id !== id);    },    checkAllTodo(done) {      this.todos.forEach((todo) => {        todo.done = done;      });    },    clearAllTodo() {      this.todos = this.todos.filter((todo) => {        return !todo.done;      });    },  },  watch: {    todos: {      deep: true,      handler(value) {        localStorage.setItem("todos", JSON.stringify(value));      },    },  },  beforeDestroy() {    this.$off(['addTodo', 'checkAllTodo', 'clearAllTodo'])  }};</script><style>body {  background: #fff;}.btn {  display: inline-block;  padding: 4px 12px;  margin-bottom: 0;  font-size: 14px;  line-height: 20px;  text-align: center;  vertical-align: middle;  cursor: pointer;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),    0 1px 2px rgba(0, 0, 0, 0.05);  border-radius: 4px;}.btn-danger {  color: #fff;  background-color: #da4f49;  border: 1px solid #bd362f;}.btn-edit {  margin-right: 5px;  background-color: skyblue;  border: 1px solid rgb(102, 158, 180);}.btn-danger:hover {  color: #fff;  background-color: #bd362f;}.btn:focus {  outline: none;}.todo-container {  width: 600px;  margin: 10px auto;}.todo-container .todo-wrap {  padding: 10px;  border: 1px solid #ddd;  border-radius: 5px;}</style>

MyHeader.vue 组件

终端键入 npm i nanoid，安装 nanoid
<style></code> 标签里的 scoped，表示里面定义的样式 仅在当前组件中生效</li></ul><pre><code class="prism language-javascript"><template> <div class="todo-header">  <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add" /> </div> </template></li> </ul> <script> import { nanoid } from "nanoid"; export default { name: "MyHeader", data() { return { <pre><code> title: "", }; </code></pre> }, methods: { add() { <pre><code> if (!this.title.trim()) return alert("输入不能为空"); const todoObj = { id: nanoid(), title: this.title, done: false }; this.$emit("addTodo", todoObj); this.title = ""; }, </code></pre> }, }; </script> <style scoped> .todo-header input { width: 578px; height: 28px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; padding: 4px 7px; margin-bottom: 10px; } .todo-header input:focus { outline: none; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } </style> </code></pre>MyList.vue 组件<ul><li>该组件即为 ul 标签包裹着 MyItem.vue 组件的果皮</li><li>真正的果肉在 MyItem.vue 组件里面~~</li></ul><pre><code class="prism language-javascript"><template> <ul class="todo-main">   <MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo" :deleteTodo="deleteTodo" @updateTodo="updateTodo" /> </ul> </template> <script> import MyItem from "./MyItem.vue"; export default { name: "MyList", components: { MyItem }, props: ["todos", "checkTodo", "deleteTodo", "updateTodo"], }; </script> <style scoped> .todo-main { margin-left: 0px; border: 1px solid #ddd; border-radius: 2px; padding: 0px; } .todo-empty { height: 40px; line-height: 40px; border: 1px solid #ddd; border-radius: 2px; padding-left: 5px; margin-top: 10px; } </style> </code></pre>MyItem.vue 组件<ul><li>获取焦点的时候要用 <code>$nextTick</code> （等 DOM 节点更新后执行），或者用 setTimeout 异步包裹也能达到同样的效果</li><li>Vue2.x 不能监测 到 对象属性的添加或删除。因为 Vue.js 在 初始化实例时 将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue2.x 转换它，才能让它是响应的。</li><li>所以，当我们想要在 data 中或者 data 中的对象添加新的属性时，我们需要使用 <code>Vue.set()</code> 和 <code>vm.$set()</code>，否则是无法触发视图更新的。</li></ul><pre><code class="prism language-javascript"><template> <li> <label>  <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />  <span v-show="!todo.isEdit">{{ todo.title }}</span>  <input type="text" style="height: 22px" v-show="todo.isEdit" :value="todo.title" @blur="handleBlur(todo, $event)" ref="inputTitle" /> </label>  <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>  <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button> </li> </template> <script> export default { name: "MyItem", props: ["todo", "checkTodo", "deleteTodo"], methods: { <pre><code>handleCheck(id) { this.checkTodo(id); }, handleDelete(id) { if (confirm("确定删除当前任务吗？")) { this.deleteTodo(id); } }, handleEdit(todo) { if (Reflect.has(todo, 'isEdit')) { todo.isEdit = true; } else { this.$set(todo, "isEdit", true); } this.$nextTick(() => { this.$refs.inputTitle.focus() }) }, handleBlur(todo, e) { todo.isEdit = false; if(!e.target.value.trim()) return alert('输入内容不能为空！') this.$emit('updateTodo', todo.id, e.target.value) }, </code></pre> }, }; </script> <style scoped> span { color: orange; } li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } li label { cursor: pointer; } input { margin-right: 5px; } li label li input { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } li button { float: right; display: none; margin-top: 3px; } li:before { content: initial; } li:last-child { border-bottom: none; } li:hover { background-color: #ddd; } li:hover button { display: block; } </style> </code></pre>MyFooter.vue 组件<ul><li>底部的展示，当没有任务时隐藏该组件</li><li>reduce() 是一个高阶函数，接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值 <a href="https://www.runoob.com/jsref/jsref-reduce.html">参考链接</a></li></ul><pre><code class="prism language-javascript"><template>  <div class="todo-footer" v-show="total"> <label>  <input type="checkbox" v-model="isAll" /> </label>  <span class="done">已完成 {{ doneTotal }}</span> / <span class="total">全部 {{ total }}</span> <button class="btn btn-danger" @click="clearAll()">清除已完成任务</button> </div> </template> <script> export default { name: "MyFooter", props: ["todos"], computed: { <pre><code>total() { return this.todos.length; }, doneTotal() { return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0); }, isAll: { get() { return this.doneTotal === this.total && this.total > 0; }, set(value) { this.$emit("checkAllTodo", value); }, }, </code></pre> }, methods: { <pre><code>clearAll() { this.$emit("clearAllTodo"); }, </code></pre> }, }; </script> <style scoped> .done { font-weight: bold; color: skyblue; } .total { font-weight: bold; color: palevioletred; } .todo-footer { height: 40px; line-height: 40px; padding-left: 6px; margin-top: 5px; } .todo-footer label { display: inline-block; margin-right: 20px; cursor: pointer; } .todo-footer label input { position: relative; top: -3px; vertical-align: middle; margin-right: -10px; } .todo-footer button { float: right; margin-top: 5px; } </style> </code></pre><h3><a id="5_532"></a>5、写在最后的话</h3>如果你是 看完全篇 阅读到了这里，我相信你一定是有收获的！那么下面不妨打开自己的电脑，启动自己的编译器，来跟着做 / 自己做一遍吧！好吧，我骗了你，真正学会它可能不止两个小时，但再多花点时间，你对 vue 的理解可能会有质的提升，加油~如果这篇文章对你有些许帮助的话，不妨 三连 + 关注 支持一下~~下一篇是 github 的搜索 demo，也是使用的 vue2.x 实现的，一起期待一下吧~<img src="https://img-blog.csdnimg.cn/45fc82a82c6542bdb2ff4986377d8db3.png"></style>

Original: https://blog.csdn.net/qq_45902692/article/details/126738430
Author: 前端杂货铺
Title: Vue项目实战——实现一个任务清单（学以致用，两小时带你巩固和强化Vue知识点）

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/560868/

转载文章受原作者版权保护。转载请注明原作者出处！

人工智能

【自取】最近整理的，有需要可以领取学习：

Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言刷题答案下载！

lidar_align联合标定激光雷达和IMU外参

lidar_align联合标定激光雷达和IMU外参运行LIO-SAM之前需要联合标定激光雷达和IMU的外参，官方推荐的方案是浙大的开源联合标定方案：lidar_IMU_calib…

人工智能 2023年6月15日
0085
基于mmdetection 旋转目标检测（OBB detection)+DOTA数据集&自定义数据集+配docker

这两周得益于组里的任务需求，肝了一个遥感类的飞机旋转框目标检测，在给定的4096*4096的大尺度分辨率图片上去识别检测飞机。经过模型检测后输出结果图如下图所示：可以看到最终的结…

人工智能 2023年5月28日
0084
【数据挖掘】贝叶斯网络理论及Python实现

1.理论知识 1.1贝叶斯网络概述贝叶斯网络（Bayesian Network，BN）作为一种概率图模型（Probabilistic Graphical Model，PGD）…

人工智能 2023年7月4日
00108
error: Ignore above cudart dlerror if you do not have a GPU set up on your machine.

具体错误描述： W tensorflow/stream_executor/platform/default/dso_loader.cc:64] Could not load dyn…

人工智能 2023年7月4日
0037
YoloV7——配置YOLOV7（一）

yolov7 文章目录 yolov7 前言一、下载源代码二、配置环境 * 1.设置虚拟环境 2.配置环境 3.设置权重文件 4.实验现象总结前言 yolov7已经发布一段时…

人工智能 2023年6月16日
0089
数据分析——从入门到精通(十四)

import numpy as np import pandas as pd from pandas import Series,DataFrame 加载文本数据 pd.read_…

人工智能 2023年7月7日
0059
数字图像处理—第四章频率域图像处理知识点整理

文章目录 * – 4 频域滤波 – + 4.1 背景知识 + 4.3 傅里叶变换理解 + 4.4 一维傅里叶变换及其反变换 + * 4.3.4 图像中的混淆…

人工智能 2023年6月18日
0075
centos下基于Anaconda的ffmpeg和opencv的GPU联合编译

最近需要在python的环境下面使用ffmpeg和opencv的GPU版本，因此基于在conda下面创建了一个虚拟环境，然后进行两者的联合编译。 1.前期准备编译之前需要安装一些…

人工智能 2023年7月19日
0090
NanoDet代码逐行精读与修改（四）动态软标签分配：dynamic soft label assigner

–neozng1@hnu.edu.cn 4. Dynamic Soft Label Assigner 4.1. 初始化和参数 4.2. 筛除不在ground truth…

人工智能 2023年7月9日
0059
Java实现五子棋（附源码）

啊哦~你想找的内容离你而去了哦内容不存在，可能为如下原因导致： ① 内容还在审核中 ② 内容以前存在，但是由于不符合新的规定而被删除 ③ 内容地址错误 ④ 作者删除了内容。可…

人工智能 2023年6月29日
0060
语音指令

语音指令就是通过语音来完成一些常规操作，如启动某个应用，打开或关闭飞行模式等，随着智能助理Cortana的推出，语音操作的重要地位也逐渐显现。若能在应用程序中提供适当的语音操作支持…

人工智能 2023年5月27日
00142
MySQL之char、varchar类型简析

我们都知道，MySQL中关于字符，有char和varchar两种常用的类型，可能在平时的使用过程中，大家不会去关心这两种类型的区别，只是会用就可以了，或者说看到过一些它们的区别，但…

人工智能 2023年7月29日
0046
给BP神经网络设置初始权重(matlab)

关于《老饼讲解-BP神经网络》：本网结构化讲解神经网络的知识，原理和代码。重现matlab神经网络工具箱的算法，是学习神经网络的好助手。 01.问题 02. 思路 03. Demo…

人工智能 2023年6月15日
0079
Anomaly Detection（异常检测）的原理及最新的技术应用（李宏毅视频课整理和总结）

文章目录 0 前言 1 Introduction * 1.1 Problem Formulation 1.2 Base Idea 2 With Classifier * 2.1 B…

人工智能 2023年6月24日
0090
C++11【智能指针详解】

智能指针 * – 🏞️1. 为什么引入智能指针？ – 🌁2. 智能指针的使用及原理 – + 📖2.1 RAII思想 + 📖2.2 智能指针的原理…

人工智能 2023年6月29日
0065
windows环境下neo4j安装教程

一、什么是neo4j？ neo4j是先进的图数据库，简单来说，图数据库主要用于存储更多的连接数据。二、下载neo4j的zip压缩包下载地址：https://neo4j.com/…

人工智能 2023年6月5日
00112

2024 年 4 月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30