- 博客(124)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Vue2 常见知识点（二）
模板编译过程中，判断元素节点是否有@click,@change…事件属性，有则addEventListener添加对应事件，当触发addEventListener的时候，执行绑定方法，一般方法在methods中会定义。
2024-12-02 20:31:55
1401
原创 vue2 虚拟DOM 和 真实DOM （概念、作用、Diff 算法）
它的主要作用是比较新数据与旧数据虚拟 DOM 树的差异，从而找出需要更新的部分，以便将这些最小化的变更应用到真实 DOM上，减少不必要的 DOM 操作，提高性能。
2024-12-02 10:00:50
872
原创 Vue2 常见知识点（一）
组件已经挂载到 DOM 中，真实 DOM 已经渲染完成。这是最常用的生命周期之一，通常用于操作 DOM 元素，比如获取 DOM 节点的高度、宽度等例如，在一个图表组件中，挂载完成后可以获取图表容器的尺寸，然后初始化图表库
2024-11-25 22:04:05
1152
原创 Vue2与Vue3 一些区别(持续更新)
后添加的属性无法走到Object.defineProperty 这一步，所有无法更新视图直接添加新属性，添加age属性后，视图不会自动更新。必须使用$set(target,index,val)来改变数据和视图，但是在vue3中不存在$set。通过索引修改数组元素视图也不会更新，因为 Vue 2 没有对这种操作进行响应式跟踪，使用push、pop、splice $set(target,index,val)来改变数据和视图。
2024-11-23 21:20:37
532
原创 TCP连接（三次握手）（四次挥手）
例如，在网络不稳定的情况下，如果只有两次握手，当客户端发送的第一个 SYN 包在网络中延迟，而客户端又重新发送了一个 SYN 包，服务器收到两个 SYN 包后会分别回应两个 SYN/ACK 包，这样就可能导致建立了两个连接，浪费资源。例如，如果只有三次挥手，当服务器还在发送剩余数据时，连接就被强制关闭了，那么这些剩余的数据就会丢失。四次挥手的过程就保证了在关闭连接时，双方的数据都能完整地发送和接收，避免数据丢失。B说：我可以听到你说话，我可以和你聊天，你能听到我说话吗。还可以继续发送剩余的数据给客户端。
2024-11-22 17:00:46
769
原创 小程序授权登录大概路程
小程序授权登录大概（前端）在小程序内调用wx.login()获取临时登录凭证code，并通过后端接口回传到开发者服务器。(临时登录凭证 code 只能使用一次）
2024-05-22 16:00:29
986
1
原创 electron-vue 台称串口对接 SerialPort
1.首先找一个串口工具（）试试读取串口是否成功连上；2.创建；3.安装，调整版本，启动项目；4.学习工具；5.开发入口文件，测试是否成功获取串口信息6.成功获取串口后，接收台称数据7.根据台称说明书与协议，解析台称数据（数值，单位，正负，精度...）8.完成称重需求9.完成打印需求10.完成自动更新11.防止开启多个应用。
2023-07-11 17:17:55
5063
2
原创 ant-design实现树的穿梭框，穿梭后右侧是已选树（一）
/ 处理树的内部自定义内容return (});generateTree的四个参数：treeNodes （树数据）, checkedKeys （已选值）, searchValue（搜索值）, disabled（是否禁止）左边的treeNodes ：原本的树/通过搜索后的树return (
2023-05-12 10:37:01
5013
7
原创 vue3 effect 实现思路
首先了解这张图const state = reactive({ name: 'cld', age: 26, arr: [1, 2, 3], obj: { attr1: 'attr1', attr2: 'attr2' } });effect(()=>{ console.log('effect内执行:',state.obj.attr1)})state.obj.attr1='cld2'大概思路清楚了 开始分析代码创建effect函数传入一个函数与options对象export
2022-03-27 13:06:39
1786
3
原创 node开发crud字典模版
node开发模版自动生成pc端表格数据的增删查改相关功能；开发者通过工具填写文件夹名称、字段名称、字段类型等必要的配置后，在项目中运行工具；项目自动生成开发者命名的文件夹，里面包含表格数据增删查改相关功能的列表页，详情页、编辑页和api文件，并且在与后端字段和接口的严格约束下，基本无需更改生成的文件，即可得到符合预期的页面与数据，也一定程度上减少了bug的产生。1.核心逻辑图步骤1：以react模板为例，创建rcloud文件；步骤2：使用nunjucks.configure初始化模板目录
2022-02-25 21:34:33
601
原创 css3 :not([class]) css3 :not([style])
css3 :not([class]) css3 :not([style])
2022-02-15 15:01:14
4240
原创 Vue3.0 常用api
Vue3.0 reactive()、ref()、unref()、isref()、toRefs()、computed()，watch(),watchEffect()
2022-01-20 11:34:56
1397
原创 antdesign 高级表单 自定义columns 搜索
const [start, setStart] = useState<Moment | null>(); const [end, setEnd] = useState<Moment | null>(); { title: '时间', ellipsis: true, align: 'center', valueType: 'dateRange', width: 180, dataIndex:...
2021-12-31 15:21:46
1279
1
原创 es6的扩展运算符“...”动态增加属性
只是举了一个案例，但是开发任何地方，如果不确定参数是否应该传入都可以使用例如 formItem ????️根据 数值 判断是否需要传入 name属性{...(boolean? { name: value } : {})}如果“真” 则扩展{ name: value } 得到=》name : value 相当于增加了 name属性如果“假 ”则扩展 { } 得到=》空 相当于增加了 空属性<Form.Item wrapperCol={{ span: 24 }}.
2021-12-21 17:34:34
458
原创 react 多级路由 子路由切换
需求案例：1.当我们在后台管理页面 左侧菜单栏的情况下2.点击左侧菜单栏 路由变化 右侧内容区域变化如图： 点击分布式表单出现右侧内容 分布式表单步骤条3.第一步的路由 为 "form/step-form/step1"4.当我们输入完成验证通过 点击下一步 路由为 "form/step-form/step2"4.当我们 点击继续路由为 "form/step-form/step3"需求简化就是一个 第三级菜单的跳转文件目录如下...
2021-12-09 14:51:49
2936
原创 dumi主题包开发
dumi主题开发创建@group/dumi-theme-或dumi-theme-开头的 npm 包 ，通常用于研发完整的主题包，便于共享给其他项目使用新建项目必须以dumi-theme-开头 不然dumi 将不会自动挂载该主题
2021-12-01 10:54:19
1093
原创 浅显的Monaco Editor 与codemirror 选型
Monaco Editor codemirror 支持语言 支持Java，JavaScript，sql，vb,c,c++,python等多种语言(30+) HTML、XHTML、XML、CSS、Python、PHP、c#、Java (130+) 支持浏览器 IE8+, Firefox4+, Chrome, IE8+, Firefox4+, Chrome,Safari3+,Opera9+ 最新更新 2017/4/20,开源 2017/3/3，开源...
2021-11-29 22:20:15
5138
原创 react 详情页面路由 拼接id useParams取值
react 详情页面路由 拼接id useParams取值路由拼接id routes: [ { name: '酒店订单详情', path: '/hotel-orders/detail/:uid', locale: 'hotelOrdersDetail', component: lazy(() => import('@/pages/hotel-orders/details')), }, ...
2021-09-23 16:23:45
1016
原创 react 父组建 调用/获取 子组建函数/参数
import { useImperativeHandle, forwardRef,} from 'react'const Component = (props: any, ref: any) => { useImperativeHandle(ref, () => ({ func1: handleChangeName , })) const handleChangeName = async () => { console.log('name.
2021-07-30 14:32:28
257
原创 react hooks 路由拦截
// 引入useHistory import { useHistory } from 'react-router-dom'const history = useHistory()useEffect(() => { const block = history.block(() => { // 离开当前页面的时候 打印出拦截到了 console.log('拦截到了') //todo // 离开之前做什么操作 // 确定返回离...
2021-07-30 14:21:16
866
原创 useCallback 作用，useMemo ，memo作用 浅显理解
项目中看到别人代码基本上每个函数都写了useCallback 于是去查了查到底有什么作用快看睡着了还是没太明白，直接同事请教了一下qian xia ni
2021-06-22 15:21:40
544
原创 你应该知道的某些css属性
阴影的效果：https://codepen.io/embrace924/pen/wvJWRNB filter: drop-shadow(2px 4px 8px #585858);设置容器长宽比：aspect-ratio//宽3高1aspect-ratio: 3/1;控制一个元素的可调整大小resizeCSShttps://developer.mozilla.org/zh-CN/docs/Web/CSS/resizenone：元素不能被用户缩放...
2021-05-17 11:17:17
152
原创 iview 动态增减表单项
需求中经常会遇到 表单新增栏目的情况一般是填写一个或者一组信息，并且会进行输入的验证列举一个iviwe组件库的 只填写一个信息的验证方法form 是整个表单的数据data(){ return { form: { hostList: [''] } }}我们这里是地址栏的验证 随便列举的验证方法首先我们看到循环 是循环form 的hostList数组 prop字段 这里和验证至关重要props 的值要要和数组...
2021-05-14 10:01:14
805
原创 URLSearchParams解决列表页与详情页跳转带参数
react hooks列表页跳转详情页 带上id 等参数详情页获取参数判断是否有值 有值的情况下 请求数据列表页 发起1.跳转的地方<a key='info' onClick={() => { history.push({ pathname: '/list/list-detail', search: `?id=${id}&type=view` }) }}> 查看详情&..
2021-03-24 10:49:34
1010
easy mock 本地部署所有资源
2019-01-03
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
2018-08-29
Taro2.* 小程序配置分享微信朋友圈
2022-11-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人