- 博客(85)
- 收藏
- 关注

原创 Vue拖拽组件vuedraggable
之前负责用 vue 写一个可视化项目,主要负责echarts图表配置和数据建模部分.可视化的需求是根据客户喜好自由拖拽生成一个可预览的大屏,拖拽的话我们用的是vue的draggable组件。注意:vuedraggable新版本废弃了options属性,建议使用v-bind属性作为配置项。来双向绑定本地 data,如果需要更新或者是触发父组件监听的事件,可以在。是标准的组件式封装,并且将可拖动元素放进了。上面,过渡动画都比较好。在使用的时候,可以通过。
2022-09-23 09:27:53
16685
1
原创 vue - 路由守卫
Vue路由守卫是一种机制,用于在导航过程中对路由进行监控和控制。Vue Router提供了三种类型的路由守卫:1. 全局前置守卫:router.beforeEach2. 全局解析守卫:router.beforeResolve3. 全局后置守卫:router.afterEach这些守卫可以用来进行权限验证、页面加载前的处理、页面切换时的逻辑等操作。
2024-04-24 14:07:35
432
2
原创 vue - 为什么Data为一个函数
当我们组件中的data写成一个函数时,数据是以函数返回值形式定义的,这样每复用一次data,都会返回一份新的data,拥有自己的作用域,不会产生数据污染。当我们组件中的data写成一个对象时,对象是引用数据类型,它就会共用一个内存地址,在多次使用该组件时,改变其中一个组件的值会影响全部使用该组件的值。2.理解组件中的 data 必须是一个函数:在vue中一个组件可能会被其他的组件引用,为了防止多个组件实例对象之间共用一个data,产生数据污染。
2024-04-24 13:47:51
748
3
原创 CSS - 定位详解
是 CSS 中的一种定位属性,用于创建一个相对定位的元素,当滚动到特定位置时会固定在屏幕上。可以在需要元素在滚动时保持固定位置的情况下使用,提供了一种简单而有效的方法来实现这种效果。2. 指定 top、bottom、left 或 right 中的至少一个值来定义元素固定时的位置。CSS 定位是一种控制元素在页面中的位置的方法。通过这些定位属性,可以精确控制元素在页面中的位置和布局。1. 将元素设置为 position: sticky;
2024-04-23 12:04:11
334
原创 js - 计算精度问题
JavaScript 中的浮点数丢失精度问题是由底层表示方式引起的,因此在进行重要的精确计算时需要格外小心。选择合适的方法,如整数计算、使用专门的库或小数点后截断,可以帮助我们在实际应用中处理这些问题,确保得到精确的结果。在不同场景中选择适当的方法,是程序员需要谨慎考虑的问题,以避免潜在的错误。
2024-04-22 22:38:14
929
1
原创 前端 -- Flex布局
Flex布局(Flexible Box Layout)是一种CSS布局方式,旨在提供一种更有效的方式来布局、对齐和分配容器内项目的空间,即使它们的大小未知或是动态变化的。Flex布局能够让容器的子元素能够灵活地增长和缩小以最佳地填充可用空间。
2024-04-21 21:34:22
582
原创 前端 WebSocket通信
在前端中,可以使用 JavaScript 的 WebSocket 对象来创建 WebSocket 连接。WebSocket 是一种在 Web 应用程序中实现双向通信的技术。通过 WebSocket,客户端和服务器之间可以建立持久的连接,实现实时数据传输。通过 WebSocket 技术,前端和后端可以实现实时的双向通信,适用于需要实时更新数据的应用场景,如聊天应用、实时数据展示等。// 接收数据在 onmessage 事件中处理。
2024-04-20 19:22:30
476
原创 前端this指向问题
在前端开发中,this 的指向取决于函数的调用方式。在全局作用域中,this 指向 window 对象。在对象方法中,this 指向调用该方法的对象。箭头函数中的 this 指向定义时的上下文,而不是调用时的上下文。总的来说,在 Vue 中,大部分情况下 this 指向 Vue 实例或组件实例,但在箭头函数中,this 不会指向 Vue 实例,而是指向定义时的上下文。
2024-04-19 21:59:26
414
原创 Node - 引用和暴露规则
在Node.js中,模块系统是构建应用程序的基础。Node.js使用CommonJS模块系统,它定义了模块的引用(import)和暴露(export)规则。
2024-04-02 10:42:14
1128
原创 Node - 搭建一个服务器
搭建一个使用Node.js连接本地数据库的简单服务器,可以选择多种数据库系统,例如MongoDB、MySQL、PostgreSQL等。以下是使用Node.js连接MongoDB和MySQL的两个基本示例。
2024-04-02 10:33:54
474
原创 Vue - 全局状态管理解决方案
在 Vue 应用中,管理全局状态是非常重要的,它涉及到跨组件通信、状态共享以及应用状态的一致性维护。在 Vue 中,我们有多种选择来进行全局变量管理,其中包括 Vuex、Pinia 和 Mitt。本文将对这三种方法进行比较,并介绍它们的使用和原理。
2024-03-29 14:50:17
481
原创 yarn 和 npm 如何选择
2. 默认安装工具:npm 是 Node.js 的默认包管理工具,与 Node.js 集成度高,对于一些特定的项目或团队来说,使用 npm 可能更为方便。1. 性能优化:Yarn 在包管理和依赖安装方面相对于 npm 有更快的速度和性能,通过并行安装依赖项和缓存机制提高了包的安装速度。3. 实际测试:可以在项目的小范围内进行实际测试,比较 Yarn 和 npm 在项目中的表现,选择最适合项目的包管理工具。3. 社区支持:npm 有庞大的社区支持,有大量的插件和工具可供选择,能够满足各种项目需求。
2024-03-27 11:59:43
334
原创 JS - 存储机制
在JavaScript中,有几种不同的内存存储方式,每种方式都有其特点和用途。在JavaScript中,存在多种内存存储之间的联系。
2024-03-26 10:54:06
472
原创 JS - 继承
在JavaScript中,继承是一种机制,允许一个对象(子类)获取另一个对象(父类)的属性和方法。JavaScript使用原型链来实现继承。
2024-03-26 10:36:30
928
原创 console不开控制台占不占内存?
在浏览器中,如果不打开开发者工具的控制台(Console),控制台本身不会占用额外的内存。当开发者工具中的控制台被打开时,浏览器会为控制台分配一定的内存空间来存储日志、警告、错误信息等。这些信息会占用一定的内存,但通常不会对整体性能产生显著影响。因此,如果不打开控制台,控制台本身不会占用内存。然而,在实际开发中,控制台输出的大量信息可能会影响性能,因此建议在生产环境中避免在代码中留下大量的控制台输出。
2024-03-26 10:29:34
367
原创 JS - 函数函数柯里化
在上面的示例中,curry函数接受一个函数作为参数,并返回一个柯里化后的函数。函数柯里化是一种将接受多个参数的函数转换为一系列接受一个参数的函数的过程。通过柯里化,可以将一个接受多个参数的函数转换为一系列嵌套的单参数函数。数柯里化是一种将接受多个参数的函数转换为一系列接受一个参数的函数的技术。这种技术使得函数更加灵活和可复用。通过这种方式,我们可以将接受多个参数的函数转换为接受一个参数的函数链,从而更容易地进行函数组合和复。3. 函数组合:柯里化可以使函数更容易组合,通过将多个函数组合在一起创建新的函数。
2024-03-25 19:20:51
336
原创 node.js常用命令
ode.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许在服务器端运行JavaScript代码。
2024-03-25 19:09:22
388
原创 iframe标签常见问题和解决方法(持续更新)
问题描述:当尝试从父页面访问或操作<iframe>中的内容时,如果<iframe>加载的页面与父页面不同源,则会遇到跨域安全限制。问题描述:<iframe>可能会增加页面的加载时间,特别是当嵌入多个<iframe>或内容较重的页面时。问题描述:搜索引擎可能不会抓取或索引<iframe>中的内容,这可能影响父页面的SEO表现。问题描述:在<iframe>与父页面之间进行数据传递或调用函数时遇到困难。问题描述:调整<iframe>的大小和样式以适应不同的布局需求。
2024-03-25 16:14:51
1780
原创 浏览器http协议和https协议的区别
HTTP(超文本传输协议)和HTTPS(安全超文本传输协议)是互联网上用于数据传输的两种主要协议。它们之间的主要区别在于HTTPS提供了数据传输过程中的安全保护,而HTTP没有。
2024-03-25 15:55:29
716
原创 JS - 闭包中的基础数据类型和引用类型
闭包允许函数访问并操作其外部作用域中的变量。基础数据类型(按值传递)和复杂数据类型(按引用传递)在闭包中的主要区别在于,对复杂数据类型的修改会影响到闭包外部的原始对象,而基础数据类型的修改则不会。这种行为对于理解和使用闭包来维护和操作状态非常重要。
2024-03-18 13:53:38
320
原创 前端(vue)js在线预览PDF、Word、Excel、ppt等office文件
mtime=文件修改时间戳(如:1633093801,精确到秒)或修改时间(如:2021-10-01 21:10:01),值改变刷新缓存。&limit=,限制页数,如:“5”表示只显示前5页,“2,5”表示从第2页开始的5页,对pdf/doc/docx/ppt/pptx有效。&pdf=true,word文档尝试以pdf方式显示,默认false。&toolbar=false,是否显示底部工具条,默认true。&expire=30,预览链接有效期,单位分钟,默认永久有效。&title=自定义标题。
2023-05-29 15:27:58
3330
1
转载 Promise构造函数是同步还是异步执行
Promise采用了回调函数延迟绑定技术,在执行resolve函数的时候,回调函数还没有绑定,那么只能推迟回调函数的执行.
2022-11-26 02:00:45
2447
转载 Vue3中v-if和v-for优先级实例详解
2.如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。这种方法也不是最好的,官方推荐的写法是这样的, 把 v-for 移动到容器元素上,例如ul,ol 或者外面包裹一层 template。1.永远不要把 v-if 和 v-for 同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)因此哪怕我们只渲染出一小部分的元素,也得在每次重渲染的时候遍历整个列表,不论是否发生了变化。它实际经过的运算是这样的。
2022-11-19 12:58:40
1304
原创 Vue中的Object.defineProperty全面理解
这篇文章主要介绍了Vue中的Object.defineProperty全面理解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教。
2022-11-17 14:16:58
253
原创 小程序一些功能(二)
页面布局 页面样式 逻辑代码 后期会将其抽离成组件进行使用,实际效果请参考小程序组件库, Sign in · GitLab 设置系统剪贴板的内容属性类型默认值必填说明一键复制 在微信小程序内的文字无法长按复制,除了text节点以外。但是要在text标签内加一个“selectable”属性。
2022-09-29 10:14:47
390
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人