零碎小知识点汇总——记录工作中遇到的问题——基础积累

1.npm install安装包时,常用的-S -D有什么区别?

参考链接:https://blog.csdn.net/sunyctf/article/details/127667543

主要的区别就是依赖配置写入package.json文件的位置不同而已
npm install有一个别名:npm i
-S:写入dependencies,发布到生产环境

这样安装时局部安装的,会写进package.json文件中的dependencies里面。
dependecies:表示生产环境下的依赖管理,就是在实际项目中起作用的,就可以使用-S来安装

-S对应的是dependencies——也就是生产环境依赖——也就是开发喝生产阶段都用到的——比如echarts antd框架
-D对应的是devDependencies——也就是开发环境依赖——也就是说只有开发阶段需要用到,生产时不用使用的,比如sass less,等编译打包后,所有的less scss都会转成了css,因此是在生产环境中不会用到的。

2.vue3中的小知识点——区别vue2

1.vue3使用nextTick

import {nextTick} from 'vue';
async function increment(){
	count.value++;
	await nextTick();
}

2.vue3使用emit

vue3中如果使用emit,浏览器可能会报错说不认识emit

原因其实是vue3.2的一次改动,造成这个问题是因为vue3的一些依赖包版本过低导致的,所以此时需要更新vue版本,或者升级@vue/compiler-sfc

yarn upgrade vue@3.2.36

更新到vue指定版本

yarn upgrade @vue/compiler-sfc@3.2.36

建议更改vue的版本!!!
如果你执行了上面的代码还不管用,可以先删除node_modulespackage.lock.json文件,然后重新安装。

3.vue3中的setup如何使用emit

参考链接:https://blog.csdn.net/qq_39576711/article/details/123480701

<script lang="ts">
export default{
	setup(props,{emit}){//emit从这里拿到
		function change(){
			emit('alertSome',666);//emit的使用
		}
		return {
			change,
		}
	}
}
</script>

4.vue3中的keep-alive使用include不生效

参考链接:https://blog.csdn.net/qq_41839808/article/details/128923264

vue3setup语法糖,导致无法自定义组件name,使用keep-alive是需要name的,所以include不生效,解决这个问题可以通过下面的方式:
通过写两个script标签来解决,一个使用setup,一个不用
使用方式如下:

<template>
	<input type="text" v-model="value">
</template>
<script setup lang="ts">
import {ref} from 'vue';
const value = ref('测试添加name');
</script>
<script lang="ts">
export default{
	name:'test'
}
</script>

5.vue3(ts报错)类型string|undefined的参数不能赋值给类型string的参数,不能将类型undefined分配给类型string

报错原因:在ts中对类型的要求很高,需要转换为对应的类型
解决方法:使用强制转换:String(报错的数据)

6.warining:callback is deprecated,Please return a promise instead

参考链接:http://t.csdn.cn/xMBxl
项目中使用antd,在表单验证中采用了validator方式校验,通常我们的代码是这样的:

const checkPlanRules = (rule,value,callback)=>{
	if(!value){
		callback('请选择定时的时间')
	}else{
		callback();
	}
}

然后就出现了标题中的报错:warning:callback is deprecated,please return a promise instead
解决问题:
原因是因为新版的antd使用了reacthooks,表单中的字段校验方法进行了一些修改,原来的回调方法改成了返回一个promise对象:

const checkPlanRules = (rule,value,callback)=>{
	if(!value){
		return Promise.reject('请选择定时的时间')
	}else{
		return Promise.resolve();
	}
}

7.vue3如何去掉控制台的warn信息

参考链接:http://t.csdn.cn/udaX8
用下面的代码清除了控制台的vue warn:

const app = createApp(App);
app.config.warnHandler = ()=>null;

8.v-viewer组件的三种用法——适合vue3vue2

参考链接:https://blog.csdn.net/WXB_gege/article/details/130986167
在这里插入图片描述

4.CommonJS和ECMAScript的区别

CommonJS标准

使用:
1.导出:module.exports = {}
2.导入:require(‘模块名或路径’)

例如:

module.exports = {
	对外属性名1:'对外属性值1',
	对外属性名2:'对外属性值2',
}

使用上面的文件时,需要用:const obj = require('上面的文件路径')
ECMAScript标准

默认标准使用:
1.导出:export default{}
2.导入:import 变量名 from ‘路径’
例如:

export default {
	对外属性名1:'对外属性值1',
	对外属性名2:'对外属性值2'
}

使用上面的文件时,需要用import obj from '上面的文件路径'

注意:node.js默认支持CommoJS标准语法。如需使用ECMAScript标准语法,在运行模块所在的文件夹新建package.json文件,并设置{type:‘module’}

5.input类型为number时,禁止鼠标滚珠改变值

参考链接:https://www.ngui.cc/el/2710363.html?action=onClick

去除input为number时,右边的上下箭头

<style>
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input[type="number"] {
	-moz-appearance: textfield;
}
</style>

禁止鼠标滚珠改变值

<input id="input1" type="number" onmousewheel="return false;"> //我用这个方式解决了。。。
这个有可能会有兼容性问题,火狐浏览器可能不支持,如果不支持的话,可以在js中添加:

$("#input1")[0].addEventListener('DOMMouseScroll', MouseWheel, false);

function MouseWheel(event) {
	event = event || window.event;event.preventDefault();
}

6.textarea组件实现文字换行展示

textarea内部换行实现
如果直接在textarea中加入含有\n的内容,则不会识别成换行,此时可以通过:
var str='5456455d4fgdfgdgdg \n dsfafdadfadfafa'; document.getElementById("textareaid").value=str;
来实现换行。
还可以将\n替换为&#10;此时直接在textarea中写入内容即可实现换行。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt 中引入ffmpeg 动态库

1、前期准备 在qt引入ffmpeg动态库的时候&#xff0c;需要准备ffmpeg的动态库和头文件。 2、打开qt项目 在qt项目的.pro文件中添加以下几行代码 INCLUDEPATH $$PWD/thirtLib/ffmpeg4.2/include win32: LIBS -L$$PWD/thirtLib/ffmpeg4.2/lib/ -lavcodec -lavdevice -lavf…

Java的代理模式

java有三种代理模式 静态代理 jdk动态代理 cglib实现动态代理 代理模式的定义&#xff1a; 为其他对象提供一种代理以控制对这个对象的访问。在某些情况下&#xff0c;一个对象不适合或者不能直接引用另一个对象&#xff0c;而代理对象可以在客户端和目标对象之间起到中介的…

TCP三次握手与四次断开

TCP三次握手机制 三次握手是指建立一个TCP连接时&#xff0c;需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。 1、客户端发送建立TCP连接的请求报文&#xff0c;其…

小研究 - 基于解析树的 Java Web 灰盒模糊测试(二)

由于 Java Web 应用业务场景复杂, 且对输入数据的结构有效性要求较高, 现有的测试方法和工具在测试Java Web 时存在测试用例的有效率较低的问题. 为了解决上述问题, 本文提出了基于解析树的 Java Web 应用灰盒模糊测试方法. 首先为 Java Web 应用程序的输入数据包进行语法建模创…

《零基础入门学习Python》第077讲:Tkinter 模块:标准对话框

Tkinter 为了提供了三种标准对话框模块&#xff0c;它们分别是&#xff1a; messageboxfiledialogcolorchooser 注&#xff1a;这三个模块原来是独立的&#xff0c;分别是 tkMessageBox、tkFileDialog 和 tkColorChooser&#xff0c;需要导入才能使用。在 Python3 之后&#…

HCIP OSPF链路状态类型总结

OSPF的LSA OSPF是典型的链路状态路由协议&#xff0c;使用LAS&#xff08;链路状态通告&#xff09;来承载链路状态信息。LSA是OSPF的一个核心内容&#xff0c;如果没有LSA&#xff0c;OSPF 是无法描述网络的拓扑结构及网段信息的&#xff0c;也无法传递路由信息&#xff0c;更…

2023年信息系统项目管理师-粗略了解整体主要知识脉络

1. 五大过程组 2.十大知识领域 3. 十大知识领域与五大过程组的关系 4. 十大知识领域的关系图 5. 十大知识域与五大过程组的记忆方法 6. 仅开展一次或仅在项目预定义的时候开展 7.需要定期开展的过程

【方法】PDF可以转换成Word文档吗?如何操作?

很多人喜欢在工作中使用PDF&#xff0c;因为PDF格式可以准确地保留文档的原始格式&#xff0c;比如字体、图像、布局和颜色等。 但如果编辑文档的话&#xff0c;PDF还是没有Word文档方便。那可以将PDF转换成Word格式&#xff0c;再来编辑吗&#xff1f;如何操作呢&#xff1f;…

网络安全进阶学习第十一课——MySQL手工注入(2)

文章目录 一、UA注入1、原理2、靶场演示&#xff1a;1&#xff09;一旦页面出现如下现状&#xff0c;就可以使用UA注入2&#xff09;BP抓包3&#xff09;修改User-Agent 二、referer注入1、原理2、靶场演示&#xff1a;1&#xff09;使用BP抓包2&#xff09;修改Referer 三、DN…

Express中间件

1.创建最基本的中间件 const express require(express); const send require(send);const app express()const mw function (req, res, next) {console.log(middleware);// 一定要调用next() 把流转关系交给下一个中间件或路由next() }app.listen(80, () > {console.l…

CRM系统如何进行公海池线索分配自动化?

在销售过程中&#xff0c;线索分配是一个非常重要的环节。传统的线索分配方式往往是由销售主管手动进行&#xff0c;不仅效率低下&#xff0c;还存在着不公平、不灵活的问题。因此&#xff0c;许多企业通过CRM来实现公海池线索分配自动化。 1、基于规则的分配 CRM可以让用户设…

Vivado常见critical warning 、error

综合 Designutils 20-1281 如下图所示 可能原因 在复制Vivado工程时&#xff0c;IP文件缺少导致 解决方法 重新生成IP即可

arcgis字段计算器

1、两字段叠加。要求待叠加的字段类型为文本或字符串类型。如下&#xff1a; 2、字符串部分提取。

VBA技术资料MF35:VBA_在Excel中过滤数据

【分享成果&#xff0c;随喜正能量】好马好在腿&#xff0c;好人好在嘴。不会烧香得罪神&#xff0c;不会讲话得罪人。慢慢的你就会发现&#xff0c;一颗好心&#xff0c;永远比不上一张好嘴。。 我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#…

带头循环双向链表详解

目录 一、什么是带头循环双向链表&#xff1f; 1.特点&#xff1a; 2.优点&#xff1a; 二、实现接口 1.前置准备 1.1需要的三个文件 1.2结构体的创建和头文件的引用 2.接口实现 2.1函数创建新节点 2.2打印链表内容 2.3尾插新节点 2.4头插新节点 2.5头删节点 2.6尾删…

使用mysql容器创建主从同步

1、主数据库设置 创建主数据库容器&#xff1a; docker run -d --restartalways --name mysql-master -p 3306:3306 -v /home/apps/mysql-master/conf:/etc/mysql/conf.d -v /home/apps/mysql-master/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD123456 mysql:8.0.16 --lower…

elasticsearch 配置用户名和密码

无密码的其他配置项在&#xff1a;https://blog.csdn.net/Xeon_CC/article/details/132064295 elasticsearch.yml配置文件&#xff1a; xpack.security.enabled: true xpack.security.http.ssl.enabled: true xpack.security.http.ssl.keystore.path: /path/to/elastic-certi…

eNSP interface g0/0/0 报错解决办法

文章目录 1 报错截图2 解决办法2.1 排查设备是否有 GM 接口2.2 更换适合的路由器&#xff0c;并验证 1 报错截图 2 解决办法 2.1 排查设备是否有 GM 接口 查看下设备是否支持 GM 接口&#xff08;GigabitEthernet&#xff09; 方式一&#xff1a;右键路由器设备 - 设置 - 查看…

Redis数据库 | 事务、持久化

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Redis事务操作 Redis事务是一组命令的集合&#xff0c;这些命令会作为一个整体被执行&#xff0c;要么全部执行成功&#xff0c;要么全部执行失败&#xff1b;Redis事…

DASCTF 2023 0X401七月暑期挑战赛web复现

目录 <1> Web (1) EzFlask(python原型链污染&flask-pin) (2) MyPicDisk(xpath注入&文件名注入) (3) ez_cms(pearcmd文件包含) (4) ez_py(django框架 session处pickle反序列化) <1> Web (1) EzFlask(python原型链污染&flask-pin) 进入题目 得到源…