- 博客(34)
- 收藏
- 关注
RSS订阅转载 vue table跨行，一步步实现
首先要明白什么循环时{{index}}与{{!index}}，前者输出序号，后者输出的是boolean<template> <div class="sss"> <a>准备：先外层循环，查看数据格式及{{!index}}和{{index}}的区别</a> <table border="1px solid red;" width="600px"> <tr><th>项目</th><th..
2020-09-16 11:23:21
656
原创 vuex学习中
一、vuex概述1、组件之间共享数据的方式父向子传值：v-bind属性绑定 子向父传值：v-on事件绑定 兄弟组件之间共享数据：EventBud $on：接收数据的组件 $emit：发送数据的组件2、vuex是什么？vuex是实现组件全局状态（数据）管理的机制，可以方便的实现组件之间数据的共享。3、使用vuex统一管理状态的好处能够在vuex中集中管理共享数据，易于开发和后期维护 能够高效地实现组件之间的数据共享，提高开发效率 存储在vuex中的数据都是响应式的，能够实时保持数据
2020-08-06 15:27:48
172
转载 大量数据情况下前端分页处理
前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到select中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣. 当时想到的方案大致如下: 采用懒加载+分页(前端维护懒加载的数据分发和分页) 使用虚拟滚动技术(目前react的antd4.0已支持虚拟滚动的select长列表) 懒加
2020-07-30 16:51:44
7126
原创 vue页面table导出excel
页面中显示的table表格，经常会要求实现导出Excel的需求，项目中刚好遇到，实现起来也比较简单，记录一下。1.这里主要需要两个依赖：xlsxfile-saver： 1 npm install xlsx --save 1 npm install file-saver --save 2.组件中引入 12 import FileSaver from 'file-s.
2020-07-24 10:58:48
1771
3
转载 java.net.BindException: Address already in use: JVM_Bind解决方案
在开发的时候我们开启了服务器（tomcat or jetty）。然后我们没有关闭服务器，而直接关闭了eclipse或者idea，这时当你再启动容器的时候就可能出现下面这个异常：java.net.BindException: Address already in use: JVM_Bind解决方法，首先查看端口被那个进程占用netstat -p tcp -ano | findstr :811...
2019-05-27 10:59:17
1834
转载 CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子1.长方形#Rectangle{width: 200px;height: 50px;background-color: red;color: white;text-align: cente
2017-06-05 17:48:26
1145
转载 Android实用View:炫酷的进度条
Android实用View:炫酷的进度条码个蛋源码地址https://github.com/lygttpod/AndroidCustomView/blob/master/app/src/main/java/com/allen/androidcustomview/widget/HorizontalProgressBar.java文章目录
2017-06-05 09:41:17
1863
原创 js冒泡排序
var examplearr=[8,94,15,88,55,76,21,39];function sortarr(arr){ for(i=0;i<arr.length-1;i++){ for(j=0;j<arr.length-1-i;j++){ if(arr[j]>arr[j+1]){ var temp=a
2017-06-05 09:24:53
370
转载 提高页面性能的方法
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。 （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 （4）
2017-05-24 11:17:42
349
转载 ajax基本语法
1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的
2017-05-24 11:02:16
304
转载 二维数组
方法一：直接定义并且初始化，这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]]方法二：未知长度的二维数组12345678910var tArray = new Array(); //先声明一维for(v
2017-05-22 09:57:23
275
转载 逻辑 生日
小明和小强猜生日小明和小强都是张老师的学生，张老师的生日是M月N日，2人都知道张老师的生日 是下列10组中的一天，张老师把M值告诉了小明，把N值告诉了小强，张老师问他们知道他的生日是那一天吗？ 3月4日 3月5日 3月8日 6月4日 6月7日 9月1日 9月5日 12月1日 12月2日 12月8日 小明说：如果我不知道的话，小强肯定也不知道 小强说：本来我也不知道，
2017-05-19 17:02:19
338
转载 浏览器拦截跨域
如： Response.Headers.Add("Access-Control-Allow-Origin", "*");// JSON{ 'Access-Control-Allow-Origin': '*', }// HTMLmeta http-equiv="Access-Control-Allow-Origin" content="*">// PHPheader("Access
2017-05-19 16:35:52
455
原创 全选反选
$(function(){ //全选 $("#one").click(function(){ //所有checkbox跟着全选的checkbox走。 $('[name=items]:checkbox').prop("checked", this.checked ); }); $('[name=items
2017-05-02 21:11:51
205
原创 文本框字数限制 keyup
charset="UTF-8"> type="text/javascript" src="jq源代码/jquery-3.1.0.min.js"> id="van" value="" style="height:200px"> 还能输入<spanclass="number">20
2017-05-02 21:06:56
530
原创 弹出层
xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=gb2312" /> 弹出层 .pop-body{display:none;background:#000;position
2017-05-02 21:04:59
393
原创 jquery打赏功能
xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=gb2312" /> 无标题文档 .pop-body { display: none; ba
2017-05-02 21:04:09
681
原创 jquery事件
.bind()是直接绑定在元素上 bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”，点击它是没有反应的，必须再bind一次才行。要想不这么麻烦，我们可以使用live。也就是简单的绑定事件，而非事件委托事件委托：.live()则是通过冒泡的方式来绑定到元素上的。和.bind()的优势是支持动
2017-05-02 21:02:50
326
原创 js闭包
当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们.闭包的概念上一节代码中的f2函数，就是闭包。各种专业文献上的“闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascr
2017-05-02 20:59:11
214
原创 css的定位方式
What：CSS 有三种基本的定位机制：普通流、浮动和绝对定位。position 属性值的含义：static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute元素框从文档流完全删除，并相对于其包含块定位。包
2017-05-02 20:54:41
342
原创 文档类型声明的意义
What：DOCTYPE声明文档类型，以便验证文档是否符合文档类型定义（DTD），同时指定了浏览器关于页面使用哪个HTML版本进行编写的指令。When：当指定了浏览器关于页面使用哪个HTML版本进行编写的指令。Why:DOCTYPE声明不是html标签，必须放在html文档的第一行，而且绝不能在它之前添加xml声明语句，否则在IE6会触发怪异模式。在HTML 4.0中，DO
2017-05-02 20:53:40
810
原创 html5有哪些新特性？
拖拽释放(Drag and drop) 语义化更好的内容标签（header,nav,footer,aside,article,section） 音频、视频API(audio,video) 画布(Canvas) 地理(Geolocation) 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage
2017-05-02 20:50:12
719
原创 bfc有那些特性，如何触发？
what：bfc格式化上下文，指一个独立的渲染区域。 bfc的特性： 内部的Box会在垂直方向上一个接一个的放置。 垂直方向上的距离由margin决定 bfc的区域不会与float的元素区域重叠。 计算bfc的高度时，浮动元素也参与计算 bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。触发bfc的元素：
2017-05-02 20:45:20
4467
原创 this
this what:用this来指向当前对象 在全局范围内，this指向全局对象（浏览器下指window） 对象函数调用时，this指向当前对象 使用new实例化对象时，this指向新创建的对象 when: var x function my(){ alert
2017-05-02 20:43:50
241
原创 jquery方法：text()、val()、html()区别
text()what:获取某个元素的文本内容。how:var text=$("p").text()获取文本内容 $("p").text("你好")设置p元素的文本内容html()what:修改某个元素中的html内容how:var html=$("p").html()获取p元素的html代码 $("p").html("你好")设置p元素的html代码va
2017-05-02 20:42:19
513
原创 end()
end()what:end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。end() 会将对象还原为调用 find() 之前的状态，how:$('.radio tr').click(function () {$(this).addClass('select').find(':radio').prop('checked',true).end().siblings
2017-05-02 20:41:29
279
原创 display:table-cell的应用
display:table-cell属性指让标签元素以表格单元格的形式呈现，与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度
2017-05-02 20:39:38
351
原创 css中单位px和em,rem的区别
PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺
2017-05-02 20:21:26
242
原创 position跟display、margin collapse、overflow、float这些特性相互叠加
一、'display'、'position' 和 'float' 的相互关系1. 'display' 的值为 'none'如果 'display' 的值为 'none'，那么 'position' 和 'float' 不起作用。在这种情况下，元素不产生框。因此浮动和定位无效。2. 'position' 的值是 'absolute' 或 'fixed'否则，如果 'positio
2017-05-02 20:07:52
1786
原创 css的行高Line Height属性
1.line-height可以被定义为：body{line-height:normal;}2.line-height可以被定义为：body{line-height:inherit;}3.line-height可以使用一个百分比的值body{line-height:120%;}4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}
2017-05-02 13:22:56
342
原创 用纯css创建三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}
2017-05-02 13:19:07
250
原创 对HTML语义化的理解
在做前端开发的时候要记住：HTML 告诉我们一块内容是什么（或其意义），而不是它长的什么样子，它的样子应该由CSS来决定。写语义化的 HTML 结构其实很简单，首先掌握 HTML 中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。~ ，作为标题使用，并且依据重要性递减， 是最高的等级。段落标记，知道了 作为段落，你就不会再使用 来换行了，而且不需要
2017-05-02 13:14:08
428
原创 页面导入样式时，使用link和@import有什么区别？
外部样式表另一种写法： @import url（“a.css”）；与link区别：1.老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 2.加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的
2017-05-02 13:03:47
7615
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人