Category Archives: Frontend

Vue watch 中 this 注意事项

在watch中使用this要注意，不能用箭头函数，否则会出错，例如：

  箭头函数要改为function的形式，如下：

    from:https://blog.csdn.net/liubangbo/article/details/115242420

CSS 单位 2

CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。 长度有一个数字和单位组成如 10px, 2em, 等。 数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。 对于一些 CSS 属性，长度可以是负数。 有两种类型的长度单位：相对和绝对。 浏览器支持 下表中的数字表示支持该长度单位的最低浏览器版本。 长度单位 Chrome IE Firefox Safari Opera em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 9.0* 19.0 6.0 20.0 vmax 26.0 不支持 19.0 不支持 20.0 注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。 相对长度 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。   单位 描述 在线实例 […]

CSS cubic-bezier() 函数

实例 从开始到结束的不同速度过渡效果：

定义与用法 cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。 贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。 从上图我们需要知道的是 cubic-bezier 的取值范围:

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。 最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。 cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性。 支持版本：CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 函数 cubic-bezier() 4.0 10.0 4.0 3.1 10.5 CSS 语法

值 描述 x1,y1,x2,y2 必需。数字值，x1 和 x2 需要是 0 到 1 的数字。   实例

  from:https://www.runoob.com/cssref/func-cubic-bezier.html

CSS calc() 函数

实例 使用 calc() 函数计算 <div> 元素的宽度:

定义与用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 支持版本：CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 "webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。 函数 calc() 26.0 19.0 -webkit- 9.0 16.0 4.0 -moz- 7.0 6.0 -webkit- 15.0 CSS 语法

值 描述 expression 必须，一个数学表达式，结果将采用运算后的返回值。   from:https://www.runoob.com/cssref/func-calc.html

三种JS截取字符串方法

转载: https://www.cnblogs.com/zccfun/p/6054533.html JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一个参数 alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" 使用两个参数 alert(stmp.slice(1,5))//从第2个字符开始，到第5个字符；返回"cinn" alert(stmp.substring(1,5));//从第2个字符开始，到第5个字符；返回"cinn" 如果只用一个参数并且为0的话，那么返回整个参数 alert(stmp.slice(0));//返回整个字符串 alert(stmp.substring(0));//返回整个字符串 返回第一个字符 // 1.位位截取 alert(stmp.slice(0,1));//返回"r" alert(stmp.substring(0,1));//返回"r" //上面的例子中我们可以看出slice()和substring()的用法是相同的，返回的值也一样， //但当参数为负数时，他们的返回值却不一样，看下面的例子 alert(stmp.slice(2,-5));//返回"i"；实际上是slice(2,3)，负数加上字符串长度转换成正3，(若第一位 >= 第二位, 则返回空字符串); alert(stmp.substring(2,-5));//返回"rc"； 实际上是substring(2,0),负数都转换为0,  substring总是把较小的数作为起始位置。 // 2. 位位截取 和 位数截取 alert(stmp.substring(1,5))//从第1位开始，截取到第5位；返回"cinn" alert(stmp.substr(1,5));   //从第1位开始，截取5个字符；返回"cinn." var phone = 15989012100; phone.slice(-6) 取倒数后6位(第二个参数不用写0)，return ‘012100 ’； phone.slice(-6，-4) 取倒数后4位到倒数6位，（-6+11，-4+11）=（5,7）；

替换指定字符串后的字母

  frm:https://blog.csdn.net/qq_38719039/article/details/82219912

html直接引用vue和element-ui的方法

代码如下所示：

效果如图： 总结 到此这篇关于html直接引用vue和element-ui的方法的文章就介绍到这了,更多相关html引用vue和element-ui内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！   from:https://www.jb51.net/web/743299.html

js对url进行编码和解码（三种方式区别）

*** 只有 0-9[a-Z] $ – _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL。 ***例如：搜索的中文关键字，复制网址之后再粘贴就会发现该URL已经被转码。 1、escape 和 unescape 原理：对除ASCII字母、数字、标点符号 @  *  _  +  –  .  / 以外的其他字符进行编码。 编码：escape('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1" escape('张') 结果："%u5F20" 解码：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1") 结果："http://www.baidu.com?name=zhang@xiao@jie&order=1" unescape("%u5F20") 结果："张" 2、encodeURI 和 decodeURI 原理：返回编码为有效的统一资源标识符 (URI) 的字符串，不会被编码的字符：! @ # $ & * ( ) = : / ; ? + ' encodeURI()是Javascript中真正用来对URL编码的函数。 编码：encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http://www.baidu.com?name=zhang@xiao@jie&order=1" 解码：decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1") 结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1" 3、encodeURIComponent 和 decodeURIComponent 原理：对URL的组成部分进行个别编码，而不用于对整个URL进行编码 编码：encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1" 解码：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1") 　　　"http://www.baidu.com?name=zhang@xiao@jie&order=1"   from:https://www.cnblogs.com/z-one/p/6542955.html

Electron

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。 Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。   比你想象的更简单 如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。 Web 技术 Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。 开源 Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。 跨平台 Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

WebRTC 成为 W3C 和 IETF 正式标准

2021年1月26日，W3C（万维网联盟）和 IETF （互联网工程任务组）同时宣布 WebRTC（Web Real-Time Communications，Web 实时通信）现发布为正式标准，将音视频通信带到 Web 上任何地方。 WebRTC 由用于 Web 实时通信的 JavaScript API 和一组通信协议构成，支持网络上的任何已连接设备成为 Web 上潜在的通信端点。WebRTC 已成为线上通信及协作服务的基石。 目前全球都面临着 COVID-19 疫情，WebRTC 让数十亿人无论其设备或地域如何，在 COVID-19 疫情期间也能保持联络。WebRTC 的使用已经超越了最初的核心设计，即在浏览器和其他生态（例如本地应用）中支持视频会议和协作系统。现在需要更多的特性和优化。 IETF WebTransport (WEBTRANS) 和 WebRTC Ingest Signaling over HTTPS (WISH) 工作组已经在开展工作，在 IETF 其他工作组的基础上进一步协调、拓展相关工作。其中包括 QUIC（定义支持 WebTransport API 开发的新协议）和 HTTPBIS（指定简单、可扩展的、基于 HTTPS 的信令协议），以在广播工具和实时媒体广播网之间建立基于 WebRTC 的单向视听会话。 W3C WebRTC 工作组已经开始研究 WebRTC Next Version Use Cases，规划 WebRTC 的未来，特别是： 在服务器介导的视频会议中的端到端加密 即时处理音视频材料，包括通过机器学习 物联网（例如 IoT 传感器维持长期连接并寻求最小功耗） WebRTC 工作组正对现有及新的用例进行迭代，重点理解全部需求及其优先级。W3C 近期开始的 WebTransport 和 Web Codecs 工作预计将低延迟流媒体的优势引入更广大的媒体和娱乐生态系统。 WebRTC 成为 W3C 为应用程序开发定义开放 Web 平台的众多标准之一，具有前所未有的潜力。其让开发人员能够构建丰富的交互体验，由巨大的数据存储提供动力，可用于任何设备以及环境。 WebRTC 标准文档：https://www.w3.org/TR/webrtc/   from:https://www.oschina.net/news/128093/webrtc-standard

JS删除对象中的某一属性(delete)

  from:https://www.cnblogs.com/juewuzhe/p/11451362.html