任务清单案例(纯Vue)
实现的功能:增加、删除、修改、查看任务
数据存储:数据存储在浏览器中
组件间通信的方式:全局事件总线、消息的订阅和发布

1、实现的效果(视频演示)

任务清单小功能

2、重点讲解(编辑的实现)



2.1 提示(官网介绍nextTick的用法)

3、编辑功能的核心代码

<template>
<li>
<label>
<input
type="checkbox"
:checked="todo.done"
@change="handleCheck(todo.id)"
/>
<span v-show="!todo.isEdit">{{ todo.title }}</span>
<input
type="text"
v-show="todo.isEdit"
:value="todo.title"
@blur="handleBlur(todo, $event)"
ref="inputTitle"
/>
</label>
<button
v-show="!todo.isEdit"
class="btn btn-edit"
@click="handleEdit(todo)"
>
编辑
</button>
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
</li>
</template> <script>
import pubsub from "pubsub-js";
export default {
name: "MyItem",
//声明接收todo、checkTodo、deleteTodo
props: ["todo"], methods: {
//编辑
handleEdit(todo) {
if (todo.hasOwnProperty("isEdit")) {
todo.isEdit = true;
} else {
this.$set(todo, "isEdit", true);
}
this.$nextTick(function () {
this.$refs.inputTitle.focus();
});
},
//输入框失去焦点
handleBlur(todo, e) {
todo.isEdit = false;
if (!e.target.value.trim()) return alert("输入不能为空");
this.$bus.$emit("updateTodo", todo.id, e.target.value);
},
//勾选or取消勾选
handleCheck(id) {
//通知App组件将对应的todo对象的done值取反
// this.checkTodo(id);
this.$bus.$emit("checkTodo", id);
},
//删除
handleDelete(id) {
if (confirm("确定删除吗?")) {
//通知App组件将对应的todo对象删除
// this.deleteTodo(id);
// this.$bus.$emit('deleteTodo',id)
// 消息发布
pubsub.publish("deleteTodo", id);
}
},
},
};
</script>
<style scoped>
/*item*/
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
} li label {
float: left;
cursor: pointer;
} 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>

4、完整的代码

地址链接:https://download.csdn.net/download/weixin_43304253/86501842

5、以往练习

1、Vue中组件化编码使用:练习一
2、Vue中组件化编码使用、实现组件之间的参数传递:练习二
3、Vue中组件化编码 完成任务的添加、删除、统计、勾选需求:练习三
4、纯Vue实现网页日常任务清单小功能(数据存储在浏览器):存储

任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现的更多相关文章

  1. 纯Vue实现网页日常任务清单小功能(数据存储在浏览器)

    任务清单可以极大提高我们的工作效率.哪些事情办了.哪些事情代办.哪些是紧急需要办的事情等等. 在组件化编码实战3的基础上进一步改进.将原先的数据保存的浏览器中.就可以做到关闭网页也不会丢失数据的情况 ...

  2. python实现简单的循环购物车小功能

    python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...

  3. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  4. iOS--知识综合应用成就时髦小功能点

    iOS--知识综合应用成就时髦小功能点

  5. Java实现点击一个Jlabel增加一个Jlabel的小功能

    当界面生成以后,自己想做一个点击一个Jlabel增加一个Jlabel,即类似于QQ的添加好友以后可以及时的加进一个好友.自己做了好久,发现不能及时刷新.在网上查了一下,然后自己研究了一小会.发现需要v ...

  6. Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据

    用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> <html> <head> <meta ...

  7. android 常用小功能(第二版)

    经历过一段岁月,转眼2013的半年都过去了,第二版整理好的小功能,答应大家发布的,直到今日,终于和大家相见了,第二版没有第一版多,大家也可以去参考第一版的内容,希望大家使用愉快! 目录: 1.获取当前 ...

  8. NSFileManager文件操作的十个小功能

    NSFileManager文件操作的十个小功能 NSFileManager是一个单列类,也是一个文件管理器.可以通过NSFileManager创建文件夹.创建文件.写文件.读文件内容等等基本功能. 下 ...

  9. javascript实现的一个信息提示的小功能/

    //什么状况.CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好.最后一遍了-- 最近由于公司业务问题.须要做一些面向公众的平台,于是对UI要求会高一点, 对于传统的alert的这样的方式来 ...

随机推荐

  1. 使用 CSS 构建强大且酷炫的粒子动画

    粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画.传统的粒子动画主要由 Canvas.WebGL 实现. 当然,不使用 HTML + CSS 的主要原因在于,粒子动画通常需要较多的粒子,而如 ...

  2. HDFS核心原理

    HDFS 读写解析 HDFS 读数据流程 客户端通过 FileSystem 向 NameNode 发起请求下载文件,NameNode 通过查询元数据找到文件所在的 DataNode 地址 挑选一台 D ...

  3. Selenium 4 有哪些不一样?

    转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/d59b986c.html 你好,我是测试蔡坨坨. 众所周知,Selenium在2021年10月13号发布了Selenium4 ...

  4. 一些有用的数学知识(Updating)

    文章目录 拉格朗日插值公式 微分中值定理 费马引理 拉格朗日中值定理 柯西中值定理 洛必达法则 连分数(NOI2021 D2T2 考点) 定义 结论 定理1 定理2 定理3 定理4 定理5 欧拉公式 ...

  5. UE 实现镜头平移,旋转和缩放

    0x00 引 在数字孪生三维场景中,通过键盘和鼠标来控制镜头的移动,缩放是很常见的行为,也是很必要的行为,用户正是通过这些操作,达到对整个三维场景的观看和控制. 0x01 键盘控制镜头前后左右移动 通 ...

  6. KingbaseES V8R6C5集群部署启动securecmdd服务配置案例

    案例说明: 对于KingbaseES V8R6C5版本在部集群时,需要建立kingbase.root用户在节点间的ssh互信,如果在生产环境禁用root用户ssh登录,则通过ssh部署会失败:在图形化 ...

  7. Java中的引用概念

    Java对对象和基本的数据类型的处理是不一样的.和C语言一样,当把Java的基本数据类型(如int,char,double等)作为入口参数传给函数体的时候,传入的参数在函数体内部变成了局部变量,这个局 ...

  8. 华南理工大学 Python第4章课后小测-2

    1.(单选)下面程序的输出结果是: for c in "ComputerScience": if c=="S": continue print(c,end=&q ...

  9. STL堆排序&时间复杂度分析

    1. 逻辑&时间复杂度分析 pop 和 initialize 的时间复杂度请参考: [DSAAinC++] 大根堆的pop&remove&initialize 将数组初始化为一 ...

  10. Java安全之freemaker模版注入

    Java安全之freemaker模版注入 freemaker简介 FreeMarker 是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等 ...