任务清单案例(纯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. 关于javascript中this

    ------------恢复内容开始------------ 1 var number = 5; 2 var obj = { 3 number: 3, 4 fn1: (function () { 5 ...

  2. 技术分享|sysbench 压测工具用法浅析

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 介绍 新业务上线的时候通常需要对数据库性能进行压力测试,以确认是否满足需要,今天简单介绍下sysbench的用法: 1.s ...

  3. vue2与vue3实现响应式的原理区别和提升

    区别: vue2.x: 实现原理: 对象类型:Object.defineProperty()对属性的读取,修改进行拦截(数据劫持): 数组类型:通过重写更新数组的一系列方法来进行拦截(对数组的变更方法 ...

  4. Apache DolphinScheduler 1.2.0 task 任务存储结构说明

    本文章经授权转载 Table of Contents 任务总体存储 Shell节点 SQL节点 存储过程节点 SPARK节点 MapReduce(MR)节点 Python节点 Flink节点 HTTP ...

  5. 一文带你弄懂 JVM 三色标记算法!

    大家好,我是树哥. 最近和一个朋友聊天,他问了我 JVM 的三色标记算法.我脑袋一愣发现竟然完全不知道!于是我带着疑问去网上看了几天的资料,终于搞清楚啥事三色标记算法,它是用来干嘛的,以及它和 CMS ...

  6. CSP-S 2020 T4 贪吃蛇 (双队列模拟)

    题面 题解 先看数据,T<=10,用平衡树或优先队列是可以拿70分的,大体思路和正解思路是一样的,每次直接修改,然后模拟. 我们模拟的时候,主要是在过程中算出最终被吃的有选择权的蛇的最后选择时刻 ...

  7. PHP一句话简单免杀

    PHP一句话简单免杀 原型 几种已经开源的免杀思路 拆解合并 <?php $ch = explode(".","hello.ev.world.a.l"); ...

  8. 【java】学习路径17-StringBuffer、StringBuilder的使用与区别

    本文讲解StringBuffer和StringBuilder的使用与区别. 1-- String String类型我们已经很熟悉了,String一旦被赋值,其在堆中的数据便无法修改. 平时我们的&qu ...

  9. 【java】学习路线11-四种权限修饰的测试

    package com.remoo.test;public class Learn09_Test{    private static String welcomeWord1 = "你好,p ...

  10. 一种比css_scoped和css_module更优雅的避免css命名冲突小妙招

    css_scoped 与 css_module 我们知道,简单的class名称容易造成css命名重复,比如你定义一个class: <style> .main { float: left; ...