前端开发
文章平均质量分 70
vue等前端技术
JEECG低代码平台
这个作者很懒,什么都没留下…
展开
-
jeecgboot-vue3 查询区 label 文字居左实现
以系统管理中的系统角色界面为例。原创 2023-08-17 13:44:02 · 422 阅读 · 3 评论 -
当我尝试着把老项目 Webpack 迁移到 Vite 时,发现并没有这么香
global 是 Node里面的变量, 会在客户端报错?一层层看下去, 原来是引入的第三方包使用了global。看 vite 文档里提到了 Client Types:然后, 并没有什么乱用。。。没办法, 只得祭出 window 大法。刷新, 好了。使用 Vite 能大幅缩短项目构建时间,提升开发效率。不过也要结合项目的实际情况,合理取舍。对于我的这个项目而言,把 Vite 作为辅助开发的一种方式,还是挺有用的。期待 Vite 能继续完善,为研发提效。转载 2023-07-28 10:43:36 · 483 阅读 · 0 评论 -
Vite 再提速
说起来其实冷启动跟首次加载就算慢一点问题也不大,还能让大脑放空一会😂,毕竟后面真正开发时增量更新的体验是很棒的。但是既然迁移到Vite的主要诉求就是提供更爽快的开发体验,能让冷启动跟首次加载更快也就更完美了是不?转载 2023-07-27 14:05:01 · 329 阅读 · 0 评论 -
pnpm 是凭什么对 npm 和 yarn 降维打击的
pnpm 最近经常会听到,可以说是爆火。本文我们梳理了下它爆火的原因:npm2 是通过嵌套的方式管理 node_modules 的,会有同样的依赖复制多次的问题。npm3+ 和 yarn 是通过铺平的扁平化的方式来管理 node_modules,解决了嵌套方式的部分问题,但是引入了幽灵依赖的问题,并且同名的包只会提升一个版本的,其余的版本依然会复制多次。转载 2023-07-27 10:45:03 · 193 阅读 · 0 评论 -
新一代包管理工具 pnpm 使用心得
最近将几个项目的包管理器都由 npm 切换为了 pnpm,迁移体验非常棒,算得上是个人体验最好的一次工具迁移。以下是我本人使用 pnpm 的直观感受:体验优良,依赖安装速度极快,占用磁盘空间小。上手简单,绝大部分 npm / yarn 项目可以低成本完成迁移,官方也有较详尽的中文文档。pnpm 组织 node_modules 目录的方式兼容原生 Node,与打包工具配合良好,可以放心应用于生产环境。转载 2023-07-26 10:47:16 · 659 阅读 · 0 评论 -
vite首次启动加载慢
随着vue3的到来,vite开始被各大vue3组件库使用,公司开始一个新项目,准备尝试用vite试一波。转载 2023-06-20 15:01:07 · 1083 阅读 · 1 评论 -
Vue3 设置全局变量
如果需要变量是响应式的,就需要在 provide 的时候使用 ref 或者 reactive 包装变量。vue3新的 provide/inject 功能可以穿透多层组件,实现数据从父组件传递到子组件。可以将全局变量放在根组件的 provide 中,这样所有的组件都能使用到这个变量。转载 2023-06-16 13:50:26 · 4716 阅读 · 0 评论 -
vue3.x 使用 globalProperties 全局变量
Vue3.x 用 Composition API中是没有this的,所以不能直接使用 this 调用 globalProperties 全局变量。转载 2023-06-13 16:59:28 · 478 阅读 · 0 评论 -
前端之vue3的setup和setup的2个的形参、响应式页面
async 修饰的函数返回值被Promise包裹住async 与 await 配合数据可以用data对象data对象内有n个对象。转载 2023-05-30 15:09:45 · 342 阅读 · 0 评论 -
vue3:setup语法糖
直接在script标签中添加setup属性就可以直接使用setup语法糖了。使用setup语法糖后,。转载 2023-05-26 18:07:11 · 288 阅读 · 0 评论 -
数组方法find、filter、findIndex简介
ES6提供了很多新的API,数组对象的尤为实用,但是如果我们没有在相对应的开发环境下,很难对这些API有深入的了解,毕竟实践出真知。这三个方法都是对于数组的查找,其中返回的值略微相关,所以在这里做一个介绍。这三个方法,都是对数组元素的查找,find返回第一个符合的元素的值,findIndex返回第一个符合的元素的下标,filter返回符合的元素的集合。这三个方法都不会改变原数组的值,具有很大的相同点,所以在这里统一介绍。相关链接。转载 2023-05-25 19:01:36 · 323 阅读 · 0 评论 -
向着Vue3进发,Vue2.7升级指南
北京时间7月1号,Vue2.7正式发布,Vue2.7支持你的项目在不升级Vue3的情况下使用Vue3的特性,例如Composition Api、setup、Css v-bind等。与此同时,Vue2.7也是Vue2.X的最终次要版本,在这个版本之后,Vue2将进入LTS(长期支持),即从现在开始持续18个月,Vue2将不再接收新功能。转载 2023-04-23 17:54:10 · 1294 阅读 · 0 评论 -
Vue2.7正式发布,终于可以在Vue2项目中使用Vue3的特性了,真香~
Vue2.7发布,可以在vue2项目中使用vue3的特性了转载 2022-10-25 13:58:27 · 2194 阅读 · 0 评论 -
Vue 2.7 正式发布,代号为 Naruto
终于可以在Vue2项目中使用Vue3的特性了...转载 2022-10-20 15:45:18 · 444 阅读 · 0 评论 -
Vue2.7升级指南,享受Vue3新特性
Vue2.7正式发布,终于可以在Vue2项目中使用Vue3的特性了,真香~转载 2022-10-20 15:42:33 · 4017 阅读 · 0 评论 -
前端Chrome调试技巧汇总
保持鼠标放上去的效果Ctrl+F 搜文字定位dom节点复制日志对象 先右键保存全局对象 console输入 copy(temp1)不同网速测试定位,通过键盘上下可以修改大小按住Ctrl,可以10为单位修改大小样式级别(由上到下)样式最终计算值...原创 2020-05-04 12:27:10 · 671 阅读 · 1 评论 -
JavaScript 解析 JSON 数据
JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。JSON的规则很简单: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);转载 2010-04-22 19:51:00 · 2296 阅读 · 0 评论 -
关于H5工程师那些日常必需工具
1,HBuilder一个不错的web前端IDE(代码编辑器)Web前端开发,2000之后基本就是三剑客的天下。到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下。但是DW对于JS方面就弱爆了。DW虽然支持JS语法高亮也支持JQuery JqueryMobile 甚至还支持Phonegap。但是对于JS的支持到了有的程度而已,语法高亮、语法提示仅此而已了。我们需要的是什么呢?这个...转载 2016-09-25 12:36:05 · 2239 阅读 · 0 评论 -
前端工作流程自动化——Grunt/Gulp 自动化
前端工作流程自动化——Grunt/Gulp 自动化 Grunt/Gulp 都是node.js下的模块,简单来说是自动化任务运行器,两者都有社区及大量的插件支撑,在所有的自动化工具领域里,这两者是最好的前端自动化构建工具。 那么问题来了,Grunt和Gulp到底哪家强?在回答这个问题前,先给大家看一组下面的数据: 再看看实现同样功能的配置代码: 作者本人之前一直使用Grunt来做自动化构建的...转载 2017-08-25 11:39:32 · 893 阅读 · 0 评论 -
在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
摘要: 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建刚开始打算进行前后端分离开发,后来发现在使用JSP或者Freemarker做动态页面时,想发挥这些自动化构建工具牛逼闪闪的livereload功能并不是那么的轻易,因为我们必须还得调教它们去调用Java容器。现在全球社区似乎还没有成熟的插件可以自动帮我们调教Java容器,百度Fis的Jello也只是做了一下vel...转载 2017-08-25 11:38:13 · 881 阅读 · 0 评论 -
Grunt 新手指南
导言作为一个正在准备从java 后端转大前端,一直都有想着,在js 的世界里面有没有类似于maven或者gradle 的东西..然后,就找到了grunt 这玩意Grunt是用来干什么的诸如ant,maven,gradle,make 之流的,那么我们为什么要学这么一个工具了,我们用IDE编程不是好好的吗,要让人去学这么一个工具,那么必然要有这个工具能够为我们搞定什么的原因.选择Grunt原因管理我们...转载 2017-08-25 11:36:09 · 687 阅读 · 0 评论 -
前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的。通过工具自动化运行大量单调乏味、重复性的任务,比如图像压缩、文件合并、代码压缩、单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的、有意义的工作,比如设计业务逻辑,编写代码等等。对很多前端开发人员而言,Grunt 无疑是这方面的首选。基本上,如果你会用 JavaScript ,那么在一个名为 Gruntfile.js (或者 Gr...转载 2017-08-25 11:56:55 · 962 阅读 · 0 评论 -
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者,经常会搞不清楚margin,background-color,bac...转载 2017-11-14 10:35:36 · 807 阅读 · 0 评论 -
CSS中margin和padding的区别
本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距.在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。 下面讲解 padding和margin常用的用法 一...转载 2017-11-14 10:33:11 · 580 阅读 · 0 评论 -
vue中的指令
vue中的指令一、声明式渲染有两种:1.插值用两个花括号如:{{内容}}例子:html<div id="app1"> <p>{{message}}</p></div>js:var nv = new Vue({ el:'#app1', data:{ message:'哈喽!', }})2.绑定数据如:v-bind:...转载 2018-04-23 20:23:34 · 647 阅读 · 0 评论 -
vue.js语法和常用指令
如果已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。当然了,在使用Vue.js时,也可以结合其他库一起使用,比如jQuery。1、使用使用Vue的过程就是定义MVVM(Model-...转载 2018-04-23 20:24:42 · 1094 阅读 · 0 评论 -
iframe父子级页面传值支持跨域访问javascript
今天在使用parent.fn()调用父页面方法时发现并没有成功调用到父级iframe中的方法,后来发现是两个iframe并不在同一域名下,在网上查过后,发现H5中message方法恰好支持,闲话不多说了,上代码父界面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...转载 2019-03-21 14:01:06 · 1141 阅读 · 0 评论 -
@Cacheable 指定缓存位置
@Cacheable 可以自动生成缓存,一次在开发中使用使用该注解,本来以为重启后缓存就消失了,可是重启后,原来缓存的值还在,后来查找redis,发现缓存到redis中,如果我们不想持久化,仅仅缓存到内存,可以通过实现CacheManager,指定缓存的位置,指定ConcurrentMapCache@Cacheable(value = "sampleCacheTest", unless = ...转载 2019-03-21 14:14:18 · 6296 阅读 · 0 评论 -
vue.js 使用axios实现下载功能
本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦只好回答一下axios如何拦截get请求并下载文件的了。Ajax无法下载文件的原因浏览器的GET(frame、a)和POST(form)请求具有如下特点:response会交由浏览器处理 response内容可以为二进制文件、字符串等Ajax请求具有如下特点:response会...转载 2019-03-21 14:21:07 · 922 阅读 · 0 评论 -
vue+axios实现文件下载
功能:点击导出按钮,提交请求,下载excel文件;第一步:跟后端童鞋确认交付的接口的response header设置了以及返回了文件流。第二步:修改axios请求的responseType为blob,以post请求为例:axios({ method: 'post', url: 'api/user/', data: { fi...转载 2019-03-21 14:25:53 · 928 阅读 · 0 评论 -
package-lock.json 文件的作用
package-lock.json 文件的作用npm5之后安装文件之后会多出一个package-lock.json的文件,它的作用是:1. 安装之后锁定包的版本,手动更改package.json文件安装将不会更新包,想要更新只能使用 npm install xxx@1.0.0 --save 这种方式来进行版本更新package-lock.json 文件才可以2. 加快了npm inst...转载 2019-03-22 14:04:55 · 4230 阅读 · 0 评论 -
package.json和package-lock.json的区别
发现我的node项目下面只有一个package-lock.json文件,不存在package.json文件,顺便扒一扒这两个的区别,其实package-lock就是锁定安装时的包版本号,需要上传到git上,以保证其他人在install时候,大家的依赖版本相同。官方文档:这个package-lock.json 是在 `npm install`时候生成一份文件,用以记录当前状态下实际安装的各个np...转载 2019-03-22 14:05:44 · 1525 阅读 · 0 评论 -
JeecgBoot版本4月份新版即将发布,抢先体验。。
JeecgBoot版本4月份新版即将发布,抢先体验。。即将发布版本-更新日志:1.代码生成器GUI工具2.支持一对多代码生成器3.支持按钮权限4.支持数据权限5.Excel导入导出工具集成(支持单表,一对多)6.查询过滤器实现(简化查询条件封装)7.高级查询器(弹窗自动组合查询条件)8.页面代码mixin简化方案9.online表单开发(初版)...原创 2019-04-02 17:17:15 · 2199 阅读 · 2 评论 -
七步从Angular.JS菜鸟到专家(2):Scopes
这是"AngularJS - 七步从菜鸟到专家"系列的第二篇。在第一篇我们展示了如何开始搭建一个Angular应用。在这一篇里,我们要讨论一个理解AngularJS运作原理所必须的基本概念,以及你如何更好地运用它。在这个系列教程里,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放。完成版的Demo可...转载 2016-03-29 11:36:06 · 2021 阅读 · 0 评论 -
七步从AngularJS菜鸟到专家(7):Routing
这是"AngularJS – 七步从菜鸟到专家"系列的第七篇。在第一篇,我们展示了如何开始搭建一个AngularaJS应用。在第四、五篇我们讨论了Angular内建的directives,上一篇了解了services的强大。在这一章,我们来看几个前面没有机会细说的关键点,文章的最后会列举一些特别棒的学习资源链接和工具。通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放...转载 2016-03-29 11:48:26 · 2459 阅读 · 0 评论 -
Easyui validatebox修改——1.当text发生变化时在校验,2.取消校验,3扩展自定义验证
1.当text发生变化时在校验: Easyui validatebox个人感觉还是比较好用的,但是发现他不是只有text改变并离开编辑框的时候才验证,而是不停的做验证;如果是js脚本的本地验证还好,如果是远程验证(如:调用数据库检测信息是否已存在)那就不停的向服务器发送请求,这就比较麻烦啦;通过查看Easyui validatebox的js脚本文件,发现Easyui valida转载 2012-11-22 13:05:50 · 8785 阅读 · 2 评论 -
Combo 组合
扩展自 $.fn.validatebox.defaults 。 用 $.fn.combo.defaults 重写了 defaults 。 依赖validateboxpanel用法1. id="cc" value="001"> 2. id="cc"> 1. $('#cc').combo({ 2. required:转载 2012-11-19 20:53:34 · 2165 阅读 · 1 评论 -
js动态调用方法
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } //这个方法做了一些操作、然转载 2012-11-17 20:53:14 · 4175 阅读 · 1 评论 -
easyui form 提交
命令: 描述: 类型: <input id="type" style="wi转载 2012-09-11 20:23:10 · 7014 阅读 · 1 评论 -
jQuery动态增加表格一行和删除一行
今天在处理表格的动态增加一行,和删除一行,一开始用js,但是写起来有点复杂,而且不好控制,最后还是用了jQuery,很轻松的就搞定了,代码如下:$(document).ready(function() { $("#newBtn").bind("click", function(){ //alert($("input:checked")); $("#myTable").appen转载 2012-09-08 16:59:14 · 29198 阅读 · 3 评论