笔记
猿音
这个作者很懒,什么都没留下…
展开
-
js利用扁平化数组对象合并
在做一些项目时,会遇到一些表格数据的处理,穿梭框等数组对象的合并和去重操作,很多时候都是用两个循环来一个一个去判断,这样其实有个弊端时间和空消耗大,又做了很多重复的计算判断!在数据量比较小的时候可能觉得耗时不长,如果数据量大的话,就会有很明显的延迟。如果使用数组对象扁平化来做去重就比较简单接下来看需求//数组一 var List = [{ id: "1", pid: "0", name: "a", children: [{原创 2021-08-19 01:30:42 · 1017 阅读 · 1 评论 -
css优先级与权值
最近在做门户的项目遇到了一些关于css的优先级问题,写一个篇文章来总结一下自己的收获,由于门户类的需要在后台发表一些文章,有些文章是有自带样式的,有些不带样式但是需要默认样式,这时候就需要用到css的优先级处理css的就近原则先说一下css的优先级吧!在css中有内嵌式,内联式,还有外联式。有人说在权值相同的情况下内嵌式>内联式>外联式,通过现象看本质看看是不是这样很显然是内嵌式>内联式>外联式,但是如果将外联样式放在内联式的下面呢?还是上面的例子,调换一下位置显然不原创 2021-04-24 21:31:59 · 159 阅读 · 0 评论 -
遍历数组删除元素时潜在的问题
在使用element的表格组件的时候,会遇到删除表格数据混乱,删除不干净等问题,比如上表的6条数据是新增还没保存过的数据,没保存过的数据自然是没有id的。这时候删除会出现删不干净的情况,现在要求把这6条数据全部删除...原创 2021-04-13 00:23:33 · 282 阅读 · 0 评论 -
WebSocket实现广播
一、什么是WebSocketWebSocket是HTML5一种新的协议,是一种网络通讯协议,该协议最大的特点是:服务器主动可以向客户端推送消息,当然客户端也可以主动向服务器发送信息,是真正的平等双向对话。之所以使用WebSocket的原因是:http协议只能由客户端向服务器发送消息。二、socket、WebSocket、socket.io三者的区别1,socket:是传输控制层协议2,WebSocket:是应用层协议3,socket:是一个为浏览器与服务器之间提供实时、双向、基于事件的通信软原创 2020-06-03 01:29:45 · 6015 阅读 · 2 评论 -
掌握vue之绑定样式
绑定内联样式(style属性):做法: 将整个style属性,看作一个对象来绑定: 1). HTML中: <元素 :style="变量"> "css属性:值; css属性:值;..." 2).在 new Vue({ data:{ 变量:{ Css属性:值, Css属性:值, ... : ... } } })优点: 非常便于只修改其中某一个css属性!示例: 绑定sty原创 2020-05-20 15:16:56 · 126 阅读 · 0 评论 -
掌握vue指令之(11)v-model指令
123原创 2020-05-20 11:46:11 · 1128 阅读 · 0 评论 -
掌握vue指令之(10)v-pre指令
123原创 2020-05-20 11:09:17 · 195 阅读 · 0 评论 -
掌握vue指令之(9)v-once指令
(9)v-once指令问题:有些绑定只在首次加载时,修改一次。之后其他地方的修改,都不会影响这里的显示结果。如果一个元素之后不需要再更新,但是却占着虚拟DOM树中的一个位置,会影响虚拟DOM树的遍历速度!解决: 如果只在首次加载时显示,之后其他地方修改,这里都不会受影响的绑定,可用v-once绑定。写法:<元素 v-once>{{变量或js表达式}}></元素>原理: 只在首次渲染页面时,替换元素的绑定语法内容。但是不会将当前元素加入虚拟DOM树。结果: 只在首次加载一原创 2020-05-20 11:06:30 · 395 阅读 · 0 评论 -
掌握vue指令之(8)v-cloak和v-text指令
123原创 2020-05-20 09:42:06 · 294 阅读 · 0 评论 -
掌握vue指令之(7)v-html指令
123原创 2020-05-20 09:13:32 · 497 阅读 · 0 评论 -
掌握vue指令之(6)v-on指令
123原创 2020-05-20 01:14:38 · 190 阅读 · 0 评论 -
掌握Vue指令之(5)v-for指令
(5).v-for指令功能:根据数组中的内容反复生成多个相同结构的元素。用法:<要反复生成的元素 v-for="(value,i) of 数组/对象">注意:1.要反复生成的元素,只需要写一个当做模板即可!2. v-for一定要写在要反复生成的元素上,而不是要反复生成的元素的父元素上。3. v-for of,即可遍历数组,又可以遍历对象——统一了for in和for of强调:凡是用v-for时,必须同时绑定一个:key属性原因:因为v-for每次反复生成的元素之间除了内容原创 2020-05-20 00:23:18 · 1488 阅读 · 0 评论 -
掌握vue指令之(4)v-else-if指令
(4)v-else-if:功能:多个元素多选一显示写法:<元素1 v-if=“返回bool值的表达式”><元素2 v-else-if=“返回bool值的表达式”>… …<元素n v-else>注意:v-if、v-else-if和v-else多个元素必须紧挨着,中间不能插入其他元素。v-else后不要加任何,和程序中if else的else后不加表达式道理一样。例子:<!DOCTYPE html><html lan原创 2020-05-19 22:42:12 · 333 阅读 · 0 评论 -
掌握vue指令之(3)v-if和v-else指令
(3). v-if和v-else:功能:两个元素二选一显示语法:<元素1 v-if=“返回bool值的表达式”><元素2 v-else>注意:v-if和v-else两个元素必须紧挨着,中间不能插入其他元素v-else后不要加任何=,和程序中if else的else后不加表达式道理一样。v-show vs v-if 差别a. v-show通过display:none方式控制显示隐藏,因为不修改DOM树,所以效率略高b. v-if通过删除元素方式控制显示隐藏,所原创 2020-05-19 22:22:58 · 1458 阅读 · 0 评论 -
掌握vue指令之(2)v-show指令
(2).v-show:功能: 控制一个元素的显示隐藏 如何: <元素 v-show=“返回bool类型的js表达式”>原理:new vue()扫描到v-show时,就会先自动计算=后的js表达式的值,得到一个bool值。如果执行结果为true则,当前元素什么都不干,默认显示!如果执行结果为false则,当前元素自动添加display:none,隐藏。例子:<!DOCTYPE html><html lang="en"> <head>原创 2020-05-19 22:20:44 · 448 阅读 · 0 评论 -
vue的绑定原理
1231345原创 2020-05-17 11:46:01 · 708 阅读 · 0 评论 -
js闭包的原理
什么是闭包从作用上说:既能重用一个变量,又能保护变量不会被全局污染的一种编程方式闭包的本质/原理外层函数的作用域对象,被内层函数引用着无法释放,就形成闭包对象要理解上面这两句话首先我们来看一个小例子<script> var a = 100; function fun() { a = 200; a++; console.log(a); } fun(); console.lo原创 2020-05-15 00:15:45 · 351 阅读 · 0 评论 -
掌握js的Dom树
一、Dom树什么是Dom树其实网页中所有HTML内容在内存中都是保存在一棵树形结构上的,内存中这棵保存一个网页中所有内容的树形结构,就称为DOM树。当浏览器扫描到一个.html文件,在将.html内容显示到浏览器窗口中给人看之前,都会在内存中自动创建一棵DOM树来保存HTML内容中每项细节。生活上的一个棵树是有树根的,那Dom树也有数根的。根节点对象当浏览器窗口扫描到一个.html...原创 2020-05-06 23:46:45 · 647 阅读 · 0 评论 -
易懂js的浅克隆和深克隆原理
什么是克隆其实js里的克隆跟生活里说的克隆是一样的。有一个本体,克隆出跟本体一摸一样的副体,当本体“受伤”时副体是不会“受伤”的,js的克隆也是如此。来看下面代码<script> var benti = { top: "铁头", leg: "大长腿", waist: "细腰", hand: "小手",...原创 2020-05-02 18:01:59 · 2182 阅读 · 3 评论 -
ES6解构之数组解构、对象解构、参数解构
解构什么是解构从一个大的对象或数组中提取出个别属性或方法单独使用,解构分为数组解构、对象解构、参数解构。什么时候需要要用到解构只想使用一个大的对象或数组中的个别成员时,就应该考虑用解构,因为解构会比较简化。一、数组解构从一个大的数组中提取个别元素值单独使用用法var [变量1,变量2,...] = 数组例子<script> var arr ...原创 2020-04-30 23:40:54 · 776 阅读 · 0 评论 -
简单方法实现千分符
什么是千分符通常在数字每隔三位,加一个“,”,即千位分隔符,便于读数。在购物时候,查看余额的时候都会用到千分符,实现千分符有很多方法,下面来说一种比较简单的做法。利用零宽断言实现千分符<script> //比如说一件商品单价为¥4051.25,小明买了4件 var price = "4051.25"; var count = 4; ...原创 2020-04-30 18:43:59 · 2865 阅读 · 0 评论 -
关于ES6箭头函数的this问题
ES6推出了箭头函数,专门来简化所有function的新的定义函数语法,这极大了提高我们的开发效率。一开始接触ES6的箭头函数可高兴坏了,再也不用写function这个单词,刷 ~刷 ~,整个项目全都是用箭头函数写,但是这个箭头函数好用是好用,但是它也是有坑的。先了解箭头函数要怎么使用去掉function,在()和{}之间加上=>function fun(val){console....原创 2020-04-30 01:31:38 · 408 阅读 · 0 评论 -
正则表达式之零宽断言
零宽断言什么是零宽断言零宽断言一般用在哪什么是零宽断言零宽断言是一种零宽度的匹配,它匹配的内容不会被保存到结果中,它最终匹配的结果只是一个位置而已。通俗来理解“0宽”就是宽度为0,“断言”是判断的意思。零宽断言一般用在哪...原创 2020-04-29 21:46:49 · 809 阅读 · 0 评论 -
ES5严格模式下的保护对象
为什么要保护对象在旧的js中的对象毫无自保能力,对象的结构和属性值可以被任意修改。比如以下例子var eric = { eid: 1, ename: "xiaoming", money: "10", car: "自行车", ID: "112345677896541236", //隐私信息不能被随意遍历出来};console.log(eric);d...原创 2020-04-29 02:13:11 · 851 阅读 · 0 评论