前端
文章平均质量分 54
忽胖忽瘦
生活不止有诗和远方,还有眼前的苟且
展开
-
总结基于VUE2.x的wach属性监听数组、对象的行为总结
由于vue3.x发布后,watch属性的行为模式有所变化。在日常使用中会经常搞混或搞不清楚watch是否会监听到事件的变化。这里记录VUE2.x中watch监听数组/对象的行为模式。作为日后迷糊时的提醒。总结普通数组数组push时,可以监听到数组变化,页面内容即时刷新。通过splice删除数组元素时,可以监听到数组变化,页面内容即时刷新。直接修改数组元素的值时,不能监听到数组变化,页面内容不会刷新。对象数组数组push时,可以监听到数组变化,页面内容即时刷新。通过splice删除数组元原创 2021-07-14 17:16:35 · 903 阅读 · 0 评论 -
输入框组合输入时input事件处理
需求用户要求input框仅能输入数字,不允许失焦时才处理非数字字符。初次方案: v-modl绑定数据。onkeypress禁止键盘非数字按键,input处理半角全角和非数字字符。问题问题1.日语输入法下,按下数字字符可以组合出非数字字符。问题2.日语输入法下,tab键切换/↑↓频繁切换时。会导致input事件处理异常。例如:input中重复赋值、input框中的值异常清理。原因:输入法待选文字切换时会频繁触发input事件,并且在框中显示的待选文字,也会在value中出现。解决方案c原创 2021-07-08 15:39:39 · 521 阅读 · 1 评论 -
Javascript之String类型
字符串定义方式单引号’’双引号""反引号``let str = '单引号'let str2 = "双引号"let str3 = `反引号,反引号中可以插入表达式${str1}`字符串遍历可以使用for···of来遍历字符串中的每个字符。字符串可以直接使用[]访问字符,str[1]字符串使用charAt()反问字符。str.charAt(2)。与[]的区别,[]返回undefined,charAt返回空字符串字符串API查找字符str.indexOf(substr,inde原创 2020-12-29 08:42:03 · 287 阅读 · 0 评论 -
Javascript之Number类型
分类Number类型BigInt类型:大数不会丢失精度,不支持IElet a = 9999999999999999; //a=10000000000000000 此处精度丢失 普通Number类型let b = 9999999999999999n; //b=9999999999999999n 精度不会丢失 BigInt类型原创 2020-12-28 13:59:31 · 218 阅读 · 0 评论 -
JavascripObject
Object对象对象中属性的顺序删除属性多词key静态对象使用参数为key对象的简单声明对象是否包含属性判断对象的比较浅拷贝与深拷贝构造器可选链Symbol类型 对象中属性的顺序对象中的属性,如果数字类型的key,顺序则是按照数字排序。如果是,字符类型的key,则按照创建的顺序排序。 删除属性let test = { name: 'test', age: 30}//删除对象中的属性delete test.age;//也可以删除不存在的属性,不会报错delet原创 2020-11-28 13:46:47 · 176 阅读 · 0 评论 -
JAVASCRIPT记录
基础类型基础数据类型Number、Bigint、String、Boolean、Object、null、undefined、symboltypeof 1 //"number"typeof 10n // "bigint"typeof '1' //"string"typeof true //"boolean"typeof null //"object"typeof undefined //"undefined"typeof null //"object"typeof Symbol('i.原创 2020-10-30 18:45:25 · 167 阅读 · 0 评论 -
基于docker搭建私有cnpm
上传vue作成的插件,插件中涉及业务逻辑,基于安全考虑,所以搭建cnpm,将搭建cnpm的流水账记录一下,防止遗忘。1. 下载cnpm源码cnpm源码地址 通过git克隆到本地2. 修改基本配置配置前,需要有一个数据库可用。2.1 修改Dockerfile项目根目录下修改Dockerfile文件2.2 修改config文件修改config/index.js文件2.3 在数据库中增加相应的库执行sql脚本,docs/db.sql3. 启动//项目根目录下docker-comps原创 2020-05-26 15:57:49 · 1006 阅读 · 0 评论 -
ES6中var const let globalThis区别
ES6学习记录(2020):基于阮一峰阮老师的ES6入门变量分为var、let、const三种。var①存在变量提升现象,即不声明即可使用。②变量可以重复声明。③作用域是包括所有的子类{}。④var声明的全局变量是顶层对象(window)的属性,可直接window.x访问。let①不存在变量提升现象。②变量不可以重复声明。③作用是当前块区域。④let声明的全局变量与顶层对象(window)无关。const声明只读唱常量,声明时必须初始化,声明之后不允许修改值。//数组变量const原创 2020-05-20 14:41:18 · 469 阅读 · 0 评论 -
bootstrap-multiselect使用记录
官方文档初始化//简单初始化//初始化时可以添加样式或者过滤或者提示等,参考官网$('#demo').multiselect();取值//id为select标签的id$('#demo').val();js赋值$('#demo').multiselect('select', 'value');$('#demo').multiselect('select', ['val1','...原创 2020-03-24 15:53:13 · 231 阅读 · 0 评论 -
bootstrap treeview
官方文档地址:https://www.npmjs.com/package/bootstrap-treeview/v/1.2.0原创 2019-07-24 07:32:56 · 205 阅读 · 0 评论 -
webix透视图
使用webix创建数据透视图官网文档地址:https://docs.webix.com/api__refs__ui.pivot_props.htmlhttps://docs.webix.com/desktop__pivot.html数据源有多种方式:本地数据源:即从后端获取数据到js中再初始化外联数据源:通过属性url加载文本数据源(csv、json、xml等)或者初始化的同时从后端加...原创 2019-07-11 20:36:52 · 418 阅读 · 0 评论 -
echarts多图多轴
使用echarts插件制作多x轴多y轴图、自定义悬浮窗内容渲染之后的样子是:echarts的option设置option = { tooltip: { //鼠标划入的指示器样式 trigger: 'item', axisPointer: { type: 'cross', crossStyle...原创 2019-01-09 15:14:00 · 2345 阅读 · 3 评论 -
datagrid组合表头、行/列单元格融合、垂直滚动条留白取消
datagrid组合表头、行/列单元格融合一直做java后台开发,最近开始接触前端开发。将开发中碰见的问题整理在这里,方便以后查阅。碰见的需求是这样的:$('#table').datagrid({ //table为html页面定义的table标签的id data:json,//本地数据 fitColumns:false, //需要冻结列的话,使用该属性 /...原创 2019-01-09 15:57:31 · 809 阅读 · 0 评论 -
Handsontable
1、行列太多导致页面显示不全当行或者列太多的时候,handsontable为了加载速度。会只渲染部分数据。当页面有动作的时候才会再次渲染剩余数据。控制的相关属性为: viewportColumnRenderingOffset: 200,//渲染列数 viewportRowRenderingOffset: 200//渲染行数...原创 2019-02-11 13:53:35 · 1979 阅读 · 0 评论 -
datagrid小技巧
标题居左标题与内容位置错位:使用属性:halign;其中align是控制内容的位置。halign是控制标题栏中内容的位置。{ field: 'name', title: '标题错位', width: 80, align: 'left', halign: 'center'}取消datagrid为垂直滚动条预留的空白使用属性:scrollbarSize :0...原创 2019-02-13 15:54:37 · 317 阅读 · 0 评论 -
datatable使用记录
最近公司要求以后都使用datatable插件作为项目的表格插件。此帖记录使用中碰见的问题及知识点,方便查询。js初始化$('#example').DataTable({ data: data,//数据:可以是数组[[],[],[]],数组长度跟列一样即可 searching: false,//是否启用查询功能 paging: false,//是否分页 ordering: true,//...原创 2019-03-22 17:40:20 · 594 阅读 · 0 评论 -
SELECT2使用
这个帖子记录使用select2时碰见的问题select2位置错位当有滚动条时,select2出现的下拉框出现错位问题。是因为添加的span标签的position: 'absolute’这个样式导致的问题。修改selects的js源码,将absolute修改为fixed即可解决...原创 2019-03-26 16:50:06 · 544 阅读 · 0 评论 -
Flex布局
Flex布局整理:替代传统的margin+padding+border布局;待整理原创 2019-04-30 08:16:26 · 110 阅读 · 0 评论 -
前端常用JS方法
JS数组深层次复制var newArr = $.extend(true, [], arr);原创 2019-05-08 17:03:18 · 360 阅读 · 0 评论 -
css选择器
css选择器---------------------------------20190108更新:期待后续新的技能---------------兄弟选择器:#id + div{ //id为id的的标签的兄弟div标签 //相邻的第一个兄弟标签}#id ~ p{//所有id="id"之后的同级p元素执行该样式//不包含子级}子类选择器:#id .class{ //子类...原创 2019-01-18 09:07:49 · 186 阅读 · 0 评论