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,一经查实,立即删除!

相关文章

bash笔记

0 $0 是脚本的名称&#xff0c;$# 是传入的参数数量&#xff0c;$1 是第一个参数&#xff0c;$BOOK_ID 是变量BOOK_ID的内容 1 -echo用于在命令窗口输出信息 -$()&#xff1a;是命令替换的语法。$(...) 会执行括号内的命令&#xff0c;并将其输出捕获为一个字符串&#xff…

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

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

Linux 下的 AWK 命令详细指南与示例

目录 简介AWK 的主要特性基本语法示例1. 打印文件的所有行2. 打印特定字段3. 打印匹配模式的行4. 基于条件过滤并打印5. 使用内置变量6. 执行算术运算7. 字符串操作8. 使用 BEGIN 和 END 块9. 处理分隔符文件 高级功能自定义脚本使用外部变量 总结 简介 AWK 是 Linux 中功能强…

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>&…

Shell 脚本基础(7):重定向详解

内容预览 ≧∀≦ゞ Shell 脚本基础&#xff08;7&#xff09;&#xff1a;重定向详解声明1. 重定向基础概念1.1 输出重定向&#xff08;> 和 >>&#xff09;覆盖写入&#xff08;>&#xff09;追加写入&#xff08;>>&#xff09;输出到终端和文件&#xff0…

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操…

真实网络安全面试场景题

1.公司内部搭建了2台DNS服务器做主辅同步&#xff0c;公司的业务官网地址为 www.chinaddic.com。小明作为网络管理员把域名添加至DNS服务器进行测试。 问题1:使用自己电脑可以正常访问刚添加的域名&#xff0c;但处于同样网络环境同事电脑却访问不了。 出现此问题原因…

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# …

操作系统加码主动防护:数智化有了“安全底座”

开发者圈子里流行着一个有意思的观点&#xff1a;操作系统每过20年左右&#xff0c;就会出现一次跨越式发展机遇。 上世纪六十年代开始的大型机&#xff0c;到上世纪八十年代的个人计算机&#xff0c;再到本世纪初互联网的崛起&#xff0c;无不和上述观点相吻合&#xff1a;操…

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

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

【Apache paimon】-- 7 -- tag 创建与管理

目录 1、前言 2、操作说明 2.1、自动创建与删除 Tag 2.2、手动创建和删除 tag 2.3、回退到指定Tag 2.4、查询 tag 元数据和数据 2.4.1、查询 tag 元数据 2.4.2、查询 tag 数据 2.4.3、情景1:读取指定 tag 的数据 2.4.4、情景2:读取两个 tag 间的增量数据 3、其他配…

C++笔记之函数入参传递std::unique_ptr 时使用 std::move的场景

C++笔记之函数入参传递std::unique_ptr 时使用 std::move的场景 code review! 参考笔记 C++笔记之unique_ptr转移堆内空间的所有权 文章目录 C++笔记之函数入参传递std::unique_ptr 时使用 std::move的场景一.使用 std::unique_ptr 作为函数参数时的主要场景二.一个完整示例一…