vue2 src_Todolist编辑($nextTick)

 main.js

//引入Vue
import Vue from "vue";
//引入App
import App from './App';//关闭Vue的生产提示
Vue.config.productionTip = false;new Vue({el: '#app',render: h => h(App),beforeCreate() {//事件总线Vue.prototype.$bus = this;}
});

App.vue

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader @addTodo="addTodo"/><List:todos="todos"/><MyFooter:todos="todos"@checkAllTodo="checkAllTodo"@clearAllDoneTodo="clearAllDoneTodo"/></div></div></div>
</template><script>
import MyHeader from "@/components/MyHeader";
import List from "@/components/List";
import MyFooter from '@/components/MyFooter';
import pubsub from "pubsub-js";
export default {name: "App",components:{List,MyFooter,MyHeader},data() {return {// todos: [//   {id: '001', title: '吃饭', done: false},//   {id: '002', title: "睡觉", done: true},//   {id: '003', title: '打代码', done: false}// ]todos:JSON.parse(localStorage.getItem('todos')) || []}},methods:{//添加的todoaddTodo(todo){console.log('我是app组件,我收到了数据');this.todos.unshift(todo);},checkTodo(id){const todo = this.todos.find(todo => todo.id === id);todo.done = !todo.done;},deleteTodo(_, id){this.todos = this.todos.filter(todo => todo.id !== id);},checkAllTodo(done){this.todos.forEach(todo => todo.done = done);},clearAllDoneTodo(){this.todos = this.todos.filter(todo => !todo.done)},updateTodo(id, title){this.todos.forEach(todo => {if(todo.id === id) todo.title = title;})}},watch:{//深度监视todos:{deep: true, //深度监视当我监视数组中的对象的某个属性的变化它也会产生反应handler(newValue) {//本地存储存的是key和value都是字符串//数据存放在本地存储中localStorage.setItem("todos", JSON.stringify(newValue))}},},//已挂在绑定事件总线mounted() {this.$bus.$on('checkTodo', this.checkTodo);this.$bus.$on('updateTodo', this.updateTodo);this.pubId = pubsub.subscribe('deleteTodo', this.deleteTodo);},//被卸载注意解绑beforeMount() {this.$bus.$off('checkTodo');this.$bus.$off('updateTodo');pubsub.unsubscribe(this.pubId); //取消订阅的方式与取消定时器的方式是类似的,记住}
}
</script><style>
/*base*/
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-danger:hover {color: #fff;background-color: #bd362f;
}.btn-edit{color: #fff;background-color: skyblue;border: 1px solid rgb(103, 159, 180);margin-right: 5px;
}.btn:focus {outline: none;
}.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}</style>

MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称,按回车键确认" v-model="title" @keyup.enter="add"/></div>
</template><script>
import { nanoid } from 'nanoid';
export default {//注意不管是你写的data也还还是methods也好,甚至是computed计算属性也好都会出现在组件事例对象vc身上//属性值不能重名name: "MyHeader",data(){return {title: ''}},methods:{add(){//将用户的输入包装成一个todo对象console.log(this.title)if(!this.title.trim()) {alert('代办事项不能为空')return; //输入的代办事项为空则不走下面流程}const todoObj = {id: nanoid(),title: this.title,done:false}// console.log(todoObj);// this.addTodo(todoObj);//采用自定义事件来修改this.$emit('addTodo',todoObj);this.title = '';}},
}
</script><style scoped>
/*header*/
.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;
}.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>

MyFooter.vue

<template><!--隐式类型转换--><div class="todo-footer" v-show="total"><label><!--这里也可用v-model来替代,此时不需要计算属性了--><!--<input type="checkbox" :checked="isAll" @change="checkAll"/>--><input type="checkbox" v-model="isAll"/></label><span><span>已完成{{ doneTotal }}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任务</button></div>
</template>
<script>
export default {name: "MyFooter",props: ['todos'],computed:{total(){return this.todos.length;},doneTotal(){return this.todos.reduce((todoTotal, todo) => {//隐士类型转换return todoTotal + todo.done;}, 0);// return this.todos.filter(todo => todo.done).length;},isAll:{get(){return this.total === this.doneTotal && this.doneTotal > 0; //计算属性可以通过其他的计算属性接着进行计算得到结果},set(value){//value注意要么为true,要么为false,因为你是把它应用在了checkbox上//this.checkAllTodo(value);//采用自定义事件来修改this.$emit('checkAllTodo', value);}}},methods:{// checkAll(e){//   // console.log(e.target.checked); //判断这个checkbox到底是不是全选 true全选 false全不选//   this.checkAllTodo(e.target.checked);// }clearAll(){// this.clearAllDoneTodo();//修改为自定义事件this.$emit('clearAllDoneTodo');}}
}
</script><style scoped>
/*footer*/
.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: -1px;vertical-align: middle;margin-right: 5px;
}.todo-footer button {float: right;margin-top: 5px;
}
</style>

List.vue

<template><ul class="todo-main"><Itemv-for="todoObj in todos":key="todoObj.id":todo="todoObj"/></ul>
</template><script>
import Item from "@/components/Item";export default {name: "List",components: {Item,},props:['todos']
}
</script><style scoped>
/*main*/
.todo-main {margin-left: 0;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>

Item.vue

<template><li><label><!--这里勾选和取消勾选可以使用change和click作为事件处理--><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!--v-model数据的双向绑定,checkbox使用v-model来双向绑定其是否被勾选,也可以实现效果但不推荐(因为其实修改了props中的数据)--><!--这里修改了从List修改过来的props,这里的不允许改是浅层次,就是如果props是一个对象则这个修改这个对象的某一个属性vue是放行的--><!-- <input type="checkbox" v-model="todo.done"/>--><span v-show="!todo.isEdit">{{  todo.title }}</span><inputtype="text":value="todo.title"v-show="todo.isEdit"@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>
import pubsub from "pubsub-js";
export default {name: "Item",//声明接收todoprops: ['todo'],methods:{handleCheck(id){//事件总线this.$bus.$emit('checkTodo',id);},handleDelete(id){if(confirm(`确定删除编号为${id}的todo吗`)){// console.log(id);//事件总线// this.$bus.$emit('deleteTodo',id);//消息订阅改写pubsub.publish('deleteTodo', id);}},//编辑handleEdit(todo){// todo.isEdit = true; //注意这里添加的数据并不是响应式的 一定清楚if(Object.prototype.hasOwnProperty.call(todo, 'isEdit')){todo.isEdit = true;}else{this.$set(todo, 'isEdit', true); //保证初次加入的时候存在响应式的数据}//自动获取焦点//this.$refs.inputTitle.focus(); //此时你这行代码执行了,但是注意vue并没有重新解析模版(input并没有出现在页面上,dom节点并没有被更新),它一定要等这个回调函数执行完之后才会去重新渲染模版//使用nextTick来解决this.$nextTick(() => {//这里的回调函数注意是在dom节点被更新之后才会运行的this.$refs.inputTitle.focus();})console.log(todo);},//失去焦点回调handleBlur(todo, e){todo.isEdit = false; //注意我在这里确保你身上一定存在isEdit属性if(!e.target.value.trim()) {alert('输入不能为空');return;}this.$bus.$emit('updateTodo', todo.id, e.target.value);}}
}
</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: #ddd;
}li:hover button{display: block;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/887320.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

package.json中^1.x.x、~1.x.x、1.x.x有什么区别

目录 包版本号的语义化 包版本号的符号 举例 包版本号的语义化 在开始回答这个问题之前&#xff0c;先简单介绍一下包版本号的语义化。 在npm中&#xff0c;包的版本号通常遵循语义化版本规范&#xff08;Semantic Versioning&#xff09;&#xff0c;即采用 major.minor.p…

el-table :span-method 合并单元格(2.0)

2024.11.23今天我学习了如何使用el-table组件的合并单元格方法&#xff0c;效果如下&#xff1a; 代码如下&#xff1a; <template><div class"container"><el-table :data"table_data" :span-method"object_merge" border>&…

CWT-CNN-SABO-LSSVM | Matlab实现基于CWT-CNN-SABO-LSSVM对滚动轴承的故障诊断

CWT-CNN-SABO-LSSVM | Matlab实现基于CWT-CNN-SABO-LSSVM对滚动轴承的故障诊断 目录 CWT-CNN-SABO-LSSVM | Matlab实现基于CWT-CNN-SABO-LSSVM对滚动轴承的故障诊断分类效果基本描述程序设计参考资料 分类效果 基本描述 基于CWT-CNN-SABO-LSSVM对滚动轴承的故障诊断 matlab代码…

Java基于SSM框架的校园综合服务小程序【附源码、文档】

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…

WPF——ICON按钮制作

前言 首先ICON按钮&#xff0c;即带图标按钮&#xff0c;即图标按钮。 图标按钮在开发时&#xff0c;主要是有两种方式来进行。一是在Button的Content内添加Image&#xff0c;然后设置Image的属性Source来实现&#xff0c;这种方式主要是简单易操作&#xff0c;对于初学者来说…

LlamaIndex ollama 搭建本地RAG应用,建立本地知识库

目录 简介安装前的准备下载ollama创建llamaindex conda环境&#xff0c;为后面编码作准备 环境变量迁移ollama到其他盘运行ollama方式一方式二禁止ollama开机自启动运行第一个模型 Chatbox聊天下载Chatbox配置ollama地址和模型验证 建立自身特定知识数据搭配大语言模型创建项目…

[RabbitMQ] 重试机制+TTL+死信队列

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

ChatGPT 桌面版发布了,如何安装?

本章教程教大家如何进行安装。 一、下载安装包 官网地址地址&#xff1a;https://openai.com/chatgpt/desktop/ 支持Windows和MacOS操作系统 二、安装步骤 Windows用户下载之后&#xff0c;会有一个exe安装包&#xff0c;点击运行安装即可。 注意事项&#xff0c;如果Windows操…

uniapp vue2项目迁移vue3项目

uniapp vue2项目迁移vue3项目&#xff0c;必须适配的部分 一、main.js 创建应用实例 // 之前 - Vue 2 import Vue from vue import App from ./App Vue.config.productionTip false // vue3 不再需要 App.mpType app // vue3 不再需要 const app new Vue({ ...App }) …

Brain.js 用于浏览器的 GPU 加速神经网络

Brain.js 是一个强大的 JavaScript 库&#xff0c;它允许开发者在浏览器和 Node.js 环境中构建和训练神经网络 。这个库的目的是简化机器学习模型的集成过程&#xff0c;使得即使是没有深厚机器学习背景的开发者也能快速上手 。 概述 Brain.js 提供了易于使用的 API&#xff…

群核科技首次公开“双核技术引擎”,发布多模态CAD大模型

11月20日&#xff0c;群核科技在杭州举办了第九届酷科技峰会。现场&#xff0c;群核科技首次正式介绍其技术底层核心&#xff1a;基于GPU高性能计算的物理世界模拟器。并对外公开了两大技术引擎&#xff1a;群核启真&#xff08;渲染&#xff09;引擎和群核矩阵&#xff08;CAD…

oracle会话追踪

一 跟踪当前会话 1.1 查看当前会话的SID,SERIAL# #在当前会话里执行 示例&#xff1a; SQL> select distinct userenv(sid) from v$mystat; USERENV(SID) -------------- 1945 SQL> select distinct sid,serial# from v$session where sid1945; SID SERIAL# …

算法-快速排序-Python版详解

原题如下&#xff1a; 给定你一个长度为 n 的整数数列。请你使用快速排序对这个数列按照从小到大进行排序。并将排好序的数列按顺序输出。 输入格式 输入共两行&#xff0c;第一行包含整数 n。 第二行包含 n 个整数&#xff08;所有整数均在 1∼10^9 范围内&#xff09;&am…

strlwr(arr);的模拟实现(c基础)

hi , I am 36 适合对象c语言初学者 strlwr(arr)&#xff1b;函数是把arr数组变为小写字母,并返回arr 链接介绍一下strlwr(arr)&#xff1b;(c基础)-CSDN博客 下面进行My__strlwr(arr);模拟实现 #include<stdio.h> //返回值为arr(地址),于是用指针变量,原数组为字符型…

Hadoop分布式文件系统(一)——HDFS简介

目录 1. HDFS设计目标2. HDFS组件3. HDFS数据复制4. HDFS健壮性4.1 磁盘数据错误&#xff0c;心跳检测和重新复制4.2 集群均衡4.3 数据完整性4.4 元数据磁盘错误4.5 快照 5. HDFS数据组织5.1 数据块存储5.2 流水线复制5.3 文件的删除和恢复 参考 1. HDFS设计目标 1.错误检测和快…

基于UDP和TCP实现回显服务器

目录 一. UDP 回显服务器 1. UDP Echo Server 2. UDP Echo Client 二. TCP 回显服务器 1. TCP Echo Server 2. TCP Echo Client 回显服务器 (Echo Server) 就是客户端发送什么样的请求, 服务器就返回什么样的响应, 没有任何的计算和处理逻辑. 一. UDP 回显服务器 1. UD…

STM32完全学习——使用标准库完成PWM输出

一、TIM2初始化 我这里使用的是STM32F407ZGT6这个芯片&#xff0c;我这里使用的是定时器TIM2来完成PWM输出&#xff0c;由于这里没有使用中断&#xff0c;因此不需要初始化NVIC&#xff0c;下面先来进行定时器的相关初始化 TIM_TimeBaseInitTypeDef TIM_TimeBaseInitStruct;R…

Qt Qt::UniqueConnection 底层调用

在这里插入图片描述 步骤1&#xff1a; 1&#xff1a;判断槽函数连接方式&#xff0c; 以及信号对象是否有效2&#xff1a; 信号计算格式是否 大于 signal_index 目前调试 signal_index 不太清楚怎末计算的&#xff08;有清楚的帮忙街道&#xff09;3&#xff1a;获取槽函数对…

7-10 解一元二次方程

7-10 解一元二次方程 分数 20 全屏浏览 切换布局 作者 李祥 单位 湖北经济学院 请编写程序&#xff0c;解一元一次方程 ax2bxc0 。 已知一元二次方程的求根公式为&#xff1a; 要求&#xff1a; 若 a0&#xff0c;则为一元一次方程。 若 b0&#xff0c;则方程有唯一解&…

Oracle - 多区间按权重取值逻辑 ,分时区-多层级-取配置方案(三)

本篇紧跟第一篇&#xff0c; 和 第二篇无关 Oracle - 多区间按权重取值逻辑 &#xff0c;分时区-多层级-取配置方案 Oracle - 多区间按权重取值逻辑 &#xff0c;分时区-多层级-取配置方案(二) 先说需求&#xff1a; 某业务配置表&#xff0c;按配置的时间区间及组织层级取方…