当前位置: 首页 > news >正文

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>

相关文章:

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

复习!!!

前言&#xff1a; 今天好像没有复习什么&#xff0c;对了&#xff0c;老师让我们写作业来着 那个乌云漏洞网站真的好啊&#xff0c;虽然很老&#xff0c;但是有思路啊 乌云(WooYun.org)历史漏洞查询---http://WY.ZONE.CI 复习&#xff1a; 今天主要复习了nuclei工具的用法…...

面试题---深入源码理解MQ长轮询优化机制

引言 在分布式系统中&#xff0c;消息队列&#xff08;MQ&#xff09;作为一种重要的中间件&#xff0c;广泛应用于解耦、异步处理、流量削峰等场景。其中&#xff0c;延时消息和定时消息作为MQ的高级功能&#xff0c;能够进一步满足复杂的业务需求。为了实现这些功能&#xf…...

使用 PyTorch TunableOp 加速 ROCm 上的模型

Accelerating models on ROCm using PyTorch TunableOp — ROCm Blogs (amd.com) 在这篇博客中&#xff0c;我们将展示如何利用 PyTorch TunableOp 在 AMD GPU 上使用 ROCm 加速模型。我们将讨论通用矩阵乘法&#xff08;GEMM&#xff09;的基础知识&#xff0c;展示调优单个 G…...

配置Springboot+vue项目在ubuntu20.04

一、jdk1.8环境配置 (1) 安装jdk8&#xff1a; sudo apt-get install openjdk-8-jdk (2) 检查jdk是否安装成功&#xff1a; java -version(3) 设置JAVA_HOME&#xff1a; echo export JAVA_HOME/usr/lib/jvm/java-17-openjdk-amd64 >> ~/.bashrc echo export PATH$J…...

基于SpringBoot的在线教育系统【附源码】

基于SpringBoot的在线教育系统 效果如下&#xff1a; 系统登录页面 系统管理员主页面 课程管理页面 课程分类管理页面 用户主页面 系统主页面 研究背景 随着互联网技术的飞速发展&#xff0c;线上教育已成为现代教育的重要组成部分。在线教育系统以其灵活的学习时间和地点&a…...

国土安全部发布关键基础设施安全人工智能框架

美国国土安全部 (DHS) 发布建议&#xff0c;概述如何在关键基础设施中安全开发和部署人工智能 (AI)。 https://www.dhs.gov/news/2024/11/14/groundbreaking-framework-safe-and-secure-deployment-ai-critical-infrastructure 关键基础设施中人工智能的角色和职责框架 https:/…...

散户持股增厚工具:智能T0算法交易

最近市场很多都说牛市&#xff0c;但是大多数朋友怎么来的又怎么吐出去了。这会儿我们用T0的智能算法交易又可以增厚我们的持仓收益。简单来说&#xff0c;就是基于用户原有的股票持仓&#xff0c;针对同一标的&#xff0c;配合智能T0算法&#xff0c;每天全自动操作&#xff0…...

28、js基本数据类型

<!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title></title> </head> <body> </body> <script> //JS是弱语言类型,只有一种var,由隐藏类型 //基本数据类型…...

MacOS下的Opencv3.4.16的编译

前言 MacOS下编译opencv还是有点麻烦的。 1、Opencv3.4.16的下载 注意&#xff0c;我们使用的是Mac&#xff0c;所以ios pack并不能使用。 如何嫌官网上下载比较慢的话&#xff0c;可以考虑在csdn网站上下载&#xff0c;应该也是可以找到的。 2、cmake的下载 官网的链接&…...

[免费]SpringBoot+Vue毕业设计论文管理系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue毕业设计论文管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue毕业设计论文管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 现代经济快节奏发展以及不断完善升级的信…...

科研深度学习:如何精选GPU以优化服务器性能

GPU在科研深度学习中的核心价值 在科研深度学习的范畴内&#xff0c;模型训练是核心环节。面对大规模参数的模型训练&#xff0c;这往往是科研过程中最具挑战性的部分。传统CPU的计算模式在处理复杂模型时&#xff0c;训练时间会随着模型复杂度的增加而急剧增长&#xff0c;这…...

嵌入式系统与OpenCV

目录 一、OpenCV 简介 二、嵌入式 OpenCV 的安装方法 1. Ubuntu 系统下的安装 2. 嵌入式 ARM 系统中的安装 3. Windows10 和树莓派系统下的安装 三、嵌入式 OpenCV 的性能优化 1. 介绍嵌入式平台上对 OpenCV 进行优化的必要性。 2. 利用嵌入式开发工具&#xff0c;如优…...

C++学习——编译的过程

编译的过程——预处理 引言预处理包含头文件宏定义指令条件编译 编译、链接 引言 C程序编译的过程&#xff1a;预处理 -> 编译&#xff08;优化、汇编&#xff09;-> 链接 编译和链接的内容可以查阅这篇文章&#xff08;点击查看&#xff09; 预处理 编译预处理是指&a…...

接口测试和单元测试

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 接口测试的本质&#xff1a;就是通过数据驱动&#xff0c;测试类里面的函数。 单元测试的本质&#xff1a;通过代码级别&#xff0c;测试函数。 单元测试的框架…...

redis工程实战介绍(含面试题)

文章目录 redis单线程VS多线程面试题**redis是多线程还是单线程,为什么是单线程****聊聊redis的多线程特性和IO多路复用****io多路复用模型****redis如此快的原因** BigKey大批量插入数据测试数据key面试题海量数据里查询某一固定前缀的key如果生产上限值keys * &#xff0c;fl…...

深度学习:GPT-1的MindSpore实践

GPT-1简介 GPT-1&#xff08;Generative Pre-trained Transformer&#xff09;是2018年由Open AI提出的一个结合预训练和微调的用于解决文本理解和文本生成任务的模型。它的基础是Transformer架构&#xff0c;具有如下创新点&#xff1a; NLP领域的迁移学习&#xff1a;通过最…...

内嵌编辑器+AI助手,Wave Terminal打造终端新体验

作为新一代终端工具的佼佼者&#xff0c;Wave Terminal 突破性地将传统命令行与现代图形界面相结合&#xff0c;为开发者带来全新的操作体验。这款创新的开源终端工具跨越了操作系统的界限&#xff0c;完美支持 macOS、Windows 和 Linux 平台&#xff0c;特别适合需要频繁处理远…...

《Object类》

目录 一、Object类 1.1 定义与地位 1.2 toString()方法 1.3 equals()方法 1.4 hashcode()方法 一、Object类 1.1 定义与地位 Object类是Java语言中的根类&#xff0c;所有的类&#xff08;除了Object类&#xff09;都直接或间接继承自Object。这就意味着在Java中&#xf…...

GPTZero:高效识别AI生成文本,保障学术诚信与内容原创性

产品描述 GPTZero 是一款先进的AI文本检测工具&#xff0c;专为识别由大型语言模型&#xff08;如ChatGPT、GPT-4、Bard等&#xff09;生成的文本而设计。它通过分析文本的复杂性和一致性&#xff0c;判断文本是否可能由人类编写。GPTZero 已经得到了超过100家媒体机构的报道&…...

2024 APMCM亚太数学建模C题 - 宠物行业及相关产业的发展分析和策略 完整参考论文(1)

摘要 近年来,中国宠物食品行业迅速增长,但面临复杂的国际形势和多变的市场环境,因此科学地分析和预测该行业的发展趋势至关重要。本研究通过构建多个机器学习与统计回归模型,量化分析中国宠物食品行业的关键驱动因素,预测未来宠物食品总产值和出口值。 在数据处理部分,…...

深入实践 Shell 脚本编程:高效自动化操作指南

一、什么是 Shell 脚本&#xff1f; Shell 脚本是一种用 Shell 编写的脚本程序&#xff0c;用于执行一系列的命令。它是 Linux/Unix 系统中自动化管理任务的利器&#xff0c;能够显著提升工作效率&#xff0c;特别适合批量处理文件、监控系统状态、自动部署等任务。 二、Shell…...

用代码如何创建Python代理池

1. 导入所需库 这里使用requests库来发送HTTP请求获取网页内容和测试代理是否可用&#xff0c;BeautifulSoup用于解析网页&#xff08;比如从提供代理列表的网页提取代理信息&#xff09;&#xff0c;random用于随机选择代理&#xff0c;time用于设置请求间隔等操作。 2. 获取…...

python蓝桥杯刷题2

1.最短路 题解&#xff1a;这个采用暴力枚举&#xff0c;自己数一下就好了 2.门牌制作 题解&#xff1a;门牌号从1到2020&#xff0c;使用for循环遍历一遍&#xff0c;因为range函数无法调用最后一个数字&#xff0c;所以设置成1到2021即可&#xff0c;然后每一次for循环&…...

跨境出海安全:如何防止PayPal账户被风控?

今天咱们聊聊那些让人头疼的事儿——PayPal账户被风控。不少跨境电商商家反馈&#xff0c;我们只是想要安安静静地在网上做个小生意&#xff0c;结果不知道为什么&#xff0c;莫名其妙账户就被冻结了。 但其实每个封禁都是有原因的&#xff0c;今天就来给大家分享分享可能的原…...

学习与理解LabVIEW中多列列表框项名和项首字符串属性

多列列表框控件在如下的位置&#xff1a; 可以对该控件右击&#xff0c;如下位置&#xff0c;即可设置该控件的显示项&#xff1a; 垂直线和水平线指的是上图中组成单元格的竖线和横线&#xff08;不包括行首列首&#xff09; 现在介绍该多列列表框的两个属性&#xff0c;分别…...

多摩川编码器协议及单片机使用

参考&#xff1a; https://blog.csdn.net/qq_28149763/article/details/132718177 https://mp.weixin.qq.com/s/H4XoR1LZSMH6AxsjZuOw6g 1、多摩川编码器协议 多摩川数据通讯是基于485 硬件接口标准NRZ 协议&#xff0c;通讯波特率为2.5Mbps 的串行通讯&#xff0c;采用差分两…...

小雪时节,阴盛阳衰,注意禁忌

宋张嵲《小雪作》 霜风一夜落寒林&#xff0c;莽苍云烟结岁阴。 把镜渐无勋业念&#xff0c;爱山唯驻隐沦心。 冰花散落衡门静&#xff0c;黄叶飘零一迳深。 世乱身穷无可奈&#xff0c;强将悲慨事微吟。 网络图片&#xff1a;小雪时节 笔者禁不住喟然而叹&#xff1a;“冰…...

shell脚本

一.要求 1.接收用户部署的服务名称 2.判断服务是否安装 ​ 已安装&#xff1b;自定义网站配置路径为/www&#xff1b;并创建共享目录和网页文件&#xff1b;重启服务 ​ 没有安装&#xff1b;安装对应的软件包 3.测试 判断服务是否成功运行&#xff1b; ​ 已运行&#…...

[371]基于springboot的高校实习管理系统

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统高校实习管理系统信息管理难度大&#xff0c;容错率低&am…...

NVR管理平台EasyNVR多个NVR同时管理:全方位安防监控视频融合云平台方案

EasyNVR是基于端-边-云一体化架构的安防监控视频融合云平台&#xff0c;具有简单轻量的部署方式与多样的功能&#xff0c;支持多种协议&#xff08;如GB28181、RTSP、Onvif、RTMP&#xff09;和设备类型&#xff08;IPC、NVR等&#xff09;&#xff0c;提供视频直播、录像、回放…...

Trains-04练习-函数

#基础练习 练习目标 01.计算车费 题目描述 小红打车&#xff0c;起步价8元(3公里), 每公里收费 2 元&#xff0c;她打车行驶了 n 公里&#xff0c;通过函数封装并计算车费 输入描述 输入一个公里数 输出描述 输出应付车费 示例 输入&#xff1a; 5 输出&#xff1a; 1…...

常用docker应用部署,wordpress、mysql、tomcat、nginx、redis

案例一、 wordpress 创建网络 docker network create wordpress-network创建容器 docker volume create --name mariadb_data docker run -d --name mariadb --restartalways \-p 3306:3306 \--env MARIADB_ALLOW_EMPTY_ROOT_PASSWORDyes \--env ALLOW_EMPTY_PASSWORDyes \--…...

设计模式之 模板方法模式

模板方法模式是行为型设计模式的一种。它定义了一个算法的骨架&#xff0c;并将某些步骤的实现延迟到子类中。模板方法模式允许子类在不改变算法结构的情况下重新定义算法的某些特定步骤。 模板方法模式的核心在于&#xff1a; 封装算法的骨架&#xff1a;通过父类中的模板方…...

GitLab|数据迁移

注意&#xff1a;新服务器GitLab版本需和旧版本一致 在旧服务器执行命令进行数据备份 gitlab-rake gitlab:backup:create 备份数据存储在 /var/opt/gitlab/backups/ 将备份数据传输到新服务器的/var/opt/gitlab/backups/下&#xff0c;并修改文件权限&#xff08;下载前和上传…...

[CISCN 2019初赛]Love Math 详细题解

知识点: 数学函数转换字符串 GET传参外部赋值 eval()函数解析执行命令 PHP动态调用函数名 源码: <?php error_reporting(0); //听说你很喜欢数学,不知道你是否爱它胜过爱flag if(!isset($_GET[c])){show_source(__FILE__); }else{//例子 c20-1$content $_GET[c];if (…...

第N8周:使用Word2vec实现文本分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 本周任务&#xff1a; 结合Word2Vec文本内容预测文本标签 加载数据 import torch import torch.nn as nn import torchvision from torchvision import tra…...

SQL,力扣题目1635,Hopper 公司查询 I

一、力扣链接 LeetCode_1635 二、题目描述 表: Drivers ---------------------- | Column Name | Type | ---------------------- | driver_id | int | | join_date | date | ---------------------- driver_id 是该表的主键(具有唯一值的列)。 该表的每一行…...

【Apache Paimon】-- 6 -- 清理过期数据

目录 1、简要介绍 2、操作方式和步骤 2.1、调整快照文件过期时间 2.2、设置分区过期时间 2.2.1、举例1 2.2.2、举例2 2.3、清理废弃文件 3、参考 1、简要介绍 清理 paimon (表)过期数据可以释放存储空间,优化资源利用并提升系统运行效率等。本文将介绍如何清理 Paim…...

nginx 配置lua执行shell脚本

1.需要nginx安装lua_nginx_module模块,这一步安装时&#xff0c;遇到一个坑&#xff0c;nginx执行configure时&#xff0c;一直提示./configure: error: unsupported LuaJIT version&#xff1b; ngx_http_lua_module requires LuaJIT 2.x。 网上一堆方法都试了&#xff0c;都…...

C++:设计模式-单例模式

单例模式&#xff08;Singleton Pattern&#xff09;是一种设计模式&#xff0c;确保一个类只有一个实例&#xff0c;并且提供全局访问点。实现单例模式的关键是防止类被多次实例化&#xff0c;且能够保证实例的唯一性。常见的实现手法包括懒汉式、饿汉式、线程安全的懒汉式等。…...

优先级队列

概述 优先级队列&#xff08;Priority Queue&#xff09;是一种抽象数据类型&#xff08;ADT&#xff09;&#xff0c;类似于普通的队列&#xff0c;不同之处在于每个元素都有一个与之相关的优先级。在优先级队列中&#xff0c;元素的出队顺序不是按照它们被入队的顺序&#x…...

一、Docker 安装集

一、Docker CentOS https://docs.docker.com/engine/install/centos/ 在 CentOS 上安装 Docker Engine # Docker要求CentOS系统的内核版本高于3.10&#xff1a;# Docker从1.13版本之后&#xff0c;采用时间线的方式作为版本号&#xff1a; 1. 分为社区版CE和企业版EE。 2. 社…...

软件测试——自动化测试常见函数

在上一篇文章软件测试——自动化测试概念篇-CSDN博客中&#xff0c;给大家演示了一下自动化程序&#xff0c;而本篇文章会带大家详细学习selenium库。 selenium库是python官方的库&#xff0c;里面包含了很多操控浏览器的函数。 本节重点 元素定位操作测试对象窗口等待导航弹…...

SEO网站都用哪里的服务器

在当今这个信息爆炸的时代&#xff0c;网站的加载速度已经成为衡量其质量的重要指标之一。对于SEO网站来说&#xff0c;速度不仅关乎用户体验&#xff0c;更是影响搜索引擎排名的重要因素。在众多服务器提供商中&#xff0c;鼎峰新匯凭借其卓越的性能和优质的服务&#xff0c;成…...

【从零开始的LeetCode-算法】3233. 统计不是特殊数字的数字数量

给你两个 正整数 l 和 r。对于任何数字 x&#xff0c;x 的所有正因数&#xff08;除了 x 本身&#xff09;被称为 x 的 真因数。 如果一个数字恰好仅有两个 真因数&#xff0c;则称该数字为 特殊数字。例如&#xff1a; 数字 4 是 特殊数字&#xff0c;因为它的真因数为 1 和…...

shell脚本(五)

声明&#xff01; 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&#…...

Windows中指定路径安装DockerDesktop

Windows中指定路径安装DockerDesktop 文章目录 Windows中指定路径安装DockerDesktop1. 先卸载干净(如果已安装过的话)2. 指定路径安装1. 新建需要安装的文件目录2. 指定路径安装 3. WSL子系统下载1. GitHub下载地址2. 指定版本直接下载 Widnows中直接安装docker desktop&#x…...

阿里云私服地址

1.解压apache-maven-3.6.1-bin 2.配置本地仓库&#xff1a;修改conf/dettings.xml中的<localReoisitory>为一个指定目录。56行 <localRepository>D:\apache-maven-3.6.1-bin\apache-maven-3.6.1\mvn_repo</localRepository> 3.配置阿里云私服&#xff1a;…...

深入探究 Vue 实例挂载过程与场景 —— 代码实例详解

Vue 实例挂载过程及使用场景分析 Vue 实例的挂载过程是 Vue 应用启动的核心,它决定了 Vue 组件如何与 DOM 进行绑定。在理解 Vue 实例挂载的过程后,我们可以根据不同的使用场景来选择合适的挂载方式。下面详细讲解 Vue 实例的挂载过程、常见使用场景,并通过实际项目示例进行…...