![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 58
LaoYe - IT
一位正在学习的菜鸟
展开
-
npm-serve 启动时修改端口号
原创 2022-01-14 14:30:13 · 2958 阅读 · 0 评论 -
ProseMirror分享会 —— 富文本基础知识
一、原生富文本HTML中,任何元素都可以被编辑。现代浏览器为我们提供了许多 API 使我们可以在web浏览器上进行富文本编辑功能。1.1 编辑状态想要使元素切换到编辑模式,我们只需要在 html 标签上设置 "contentEditable" 属性值为 true 即可。该枚举属性的值存在以下三种:"true" 表明该元素可编辑。 "false" 表明该元素不可编”辑。 "inherit" 表明该元素继承了其父元素的可编辑状态。...原创 2021-07-12 01:39:28 · 1425 阅读 · 0 评论 -
HTML的<noscript>标签有什么作用?
今天准备学习搭建 React 脚手架的时候,再次遇到了<noscript>标签。这个标签很久之前遇到的了,如今再次碰到那就要好好的了解这个标签。因为早期的浏览器并不noscript标签是一个相当古老的标签,其被引入的最初目的是帮助老旧浏览器的平滑升级更替,因为早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。这个标签的用法也非常简单:...原创 2021-06-10 18:09:30 · 1801 阅读 · 1 评论 -
图片或背景实现等比自适应缩放
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>React App</title> <style> body { margin: 0px; pad.原创 2021-01-28 18:27:48 · 371 阅读 · 0 评论 -
Vue引入less启动时报错解决方案
问题:运行Vue项目时报错原因:经过百度查询,并非安装环节出现问题,而是less-loader安装的版本过高导致的不兼容从上图可以看到less-loader的安装版本是7.0.2,和less相差了4个大版本。解决:卸载当前版本,安装低版本后即可正常启动// 卸载less-loadernpm uninstall less-loader// 安装指定版本的less-loadernpm install less-loader@4.1.0 --save...原创 2020-11-10 16:56:28 · 605 阅读 · 0 评论 -
运行Vue项目时报错:You may use special comments to disable some warnings. Use // eslint-disable-next-line to
一、原因由于vue对语法的限制过于严格,所以运行时会报错二、解决方法① 进入项目中的build目录,找到webpack.base.conf.js文件,注释或删除eslint规则② 创建Vue项目时,取消eslint的配置原创 2020-10-11 02:06:02 · 6530 阅读 · 1 评论 -
Nodejs配置Npm并通过搭建脚手架快速创建Vue项目
一、下载Node.js二、安装Node.js(一直点Next即可)三、安装完毕之后检测是否正常Nodejs自带npm,如果不是最新版的话,可以输入npm install -g npm命令更新到最新版四、安装淘宝NPM镜像npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像。淘宝cnpm镜像做了2件事:1:找到淘宝的镜像地址;2:更改当前npm所使用的下载包服务器地址;npm临时使用淘宝镜像安装依赖包npm i -g express --regi..原创 2020-10-04 15:39:49 · 628 阅读 · 0 评论 -
【通俗易懂的案例】带你掌握JavaScript的call()、apply()、bind()三者的区别
某天,你下班回到家里,母亲跑过来对你说:今晚你想吃“红烧肉”、“鱼香茄子”还是“客家酿豆腐”?var menu = { food1: "红烧肉", food2: "鱼香茄子", food3: "客家酿豆腐"}var person = { eat: function(name, type) { console.log(`指向类型:${type}`) console.log(`${name}吃${this}`); console.log("this指向 →", this); }原创 2020-09-10 16:06:08 · 190 阅读 · 0 评论 -
JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用
一、on事件为dom节点添加多个on事件只会执行最后的那个事件,因为最后的指定的on事件指向最后的那个函数,代码如下所示:function method1(){ console.log('我是方法1')}function method2(){ console.log('我是方法2')}function method3(){ console.log('我是方法3')}v...原创 2019-12-13 20:00:08 · 2390 阅读 · 0 评论 -
vue项目打包后css背景图路径不对的问题
问题描述:自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图:当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,显示不出背景图。如下两张图对比图一:使用npm run dev命令访问图二...转载 2019-12-12 22:22:17 · 438 阅读 · 0 评论 -
JavaScript判断数组的维度
var array = new Array( new Array("1"), new Array( new Array( new Array( new Array("2"), new Array("3") ), new Array("4") ), new Array("5"), new Array("6") ), new Array...原创 2019-10-13 20:18:41 · 2470 阅读 · 0 评论 -
JavaScript之Array.prototype.join.call(arguments,",") 理解
Array.prototype.join.call(arguments,",") [ 代码拆分 ]var fn = Array.prototype.join; // 把方法添加为属性fn.call(); // 转变为方法调用!!!prototype 属性:使您有能力向对象添加属性和方法。join() 方法:把数组的所有元素放...转载 2019-10-13 16:03:14 · 999 阅读 · 0 评论 -
React系列学习笔记1 --- React的引用和Hello Word
引入React可以直接使用 Staticfile CDN 的 React CDN 库<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/reac...原创 2019-03-16 23:45:41 · 245 阅读 · 0 评论 -
JavaScript系列问题 —— 判断某个DOM节点是否存在于指定DOM节点中
<div id="great"> <div id="grand"> <div id="parent"> <div id="child"></div> </div> </div></div><script type="te...原创 2019-03-27 12:45:25 · 2800 阅读 · 16 评论 -
JavaScript模块化
1、函数封装函数就是对实现特定逻辑的一组语句的打包, JS的作用域也是基于函数的, 所以函数可以很自然的作为模块化, 这也是最开始实现模块化的一种方法。function func1(){ // 逻辑代码...}function func2(){ // 逻辑代码...}引用模块也即是调用函数,存在污染全局变量、变量冲突等缺点。2、对象var myModu...转载 2019-03-13 20:30:50 · 100 阅读 · 0 评论 -
JavaScript系列学习笔记 —— 代码优化的8种方法
目录一、松耦合 将JS从CSS中抽离 将CSS从JS中抽离 将JS从HTML中抽离 将HTML从JS中抽离二、全局变量 零全局变量 单全局变量和命名空间 使用模块三、事...转载 2019-03-13 18:43:41 · 522 阅读 · 0 评论 -
JavaScript系列学习笔记 —— Ajax异步刷新技术
目录一、概念详解 Ajax的概念、定义、原理、原则、最常使用的场景和需要注意的几个问题这六方面的介绍二、Ajax的核心XMLHttpRequest对象 2.1初始化XMLHttpRequest对象 2.2 XMLHttpRequest对象...原创 2019-03-13 12:22:07 · 842 阅读 · 0 评论 -
JavaScript尽量使用局部变量,而不使用全局变量
JavaScript可以随意定义全局变量被整个程序的所有代码访问。定义全局变量最大的问题是污染了命名空间,不利于代码模块化,削弱了程序灵活性,增大了模块之间的耦合性。当然,这并不是说不提倡定义全局变量。相反,全局变量是必要的,定义的模块也需要暴露一个全局变量供给其他代码调用。 除此之外,全局变量一旦程序运行,系统就会分配一部分内存空间存储全局变量,直到程序关闭,全局变...原创 2019-03-12 21:08:41 · 1051 阅读 · 0 评论 -
JavaScript命名空间
目录一、概念二、嵌套命名空间三、小结一、概念 命名空间(namespace)是一个在静态语言中常见的概念。它可以帮助我们更好地整理代码,并避免命名冲突。 举一个简单的例子,如果有两个人都叫小明,我们很难区分和引用这两个人。但如果我们在他们前面加上命名空间,比如:北京的小明和上海的小明,那么区分起来就容易的多了,也不会因为重名而找错人了。 ...转载 2019-03-12 19:58:30 · 667 阅读 · 0 评论 -
React系列学习笔记5 --- 组件样式
目录1、引入样式2、内联样式3、样式对象4、多组件共享style对象 需要注意的时,组件名内不能使用style样式,例如:<Test style={{color:blue,font-size:24}} />。1、引入样式//CSS样式.blue{ color:blue;}//JS代码function SayHello(prop...原创 2019-03-17 13:13:18 · 343 阅读 · 0 评论 -
React系列学习笔记4 --- 组件
目录一、组件概念二、React创建组件的两种种方式 第一种:函数组件 第二种:React.Compent组件 第三种:复合组件 第四种:提取组件一、组件概念 React组件可以让你把UI分割为独立、可复用的片段,并将每一片段视为相互独立的部分,这样就只需要专注与构建每一个单独的不见。组件是由一个个...原创 2019-03-17 00:11:47 · 313 阅读 · 0 评论 -
React系列学习笔记3 --- JSX
目录一、JSX 语法 自定义属性 插入表达式 展开数组元素 添加样式二、JSX语法转化过程三、JSX 的基本使用四、JSX的注意点一、JSX 语法1.1 JSX基本结构var persons = ['张三', '李四', '王五'];ReactDOM.render( <div> ...原创 2019-03-17 00:00:36 · 272 阅读 · 0 评论 -
React系列学习笔记2 --- 元素渲染
目录将元素渲染到 DOM 中更新元素渲染 元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。const element = <h1>Hello, world!</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,ReactDOM可以确保浏览器 DOM 的数据内容与 React ...原创 2019-03-16 23:51:18 · 281 阅读 · 1 评论 -
JavaScript系列问题 —— 获取Select选中值的方式有哪些?
JavaScript原生方式第一种方式:通过当先被选中的索引,去获得options集合中的节点,并通过value属性或者innerText获取值//1、获取Select对象var persons = document.getElementById("persons");//2、获取当前Select选中的索引var index = persons.selectedIndex;//3...原创 2019-03-27 19:45:29 · 308 阅读 · 0 评论 -
JavaScript系列学习笔记 —— JavaScript和jQuery中JSON字符串和JSON对象互相转换
目录【第一种】JSON字符串 转 JSON对象方式一:使用jQuery中的$.parseJSON()函数方式二:使用JavaScript中的eval()函数方式三:使用浏览器自带的JSON.parse()函数【第二种】JSON对象 转 JSON字符串JSON案例对象方式一:浏览器自带方法JSON.stringify()函数方式二:使用JSON官方提供的方法方式三...原创 2019-04-09 14:04:41 · 1730 阅读 · 0 评论 -
JavaScript系列学习笔记 —— 冒泡型和捕捉型事件
目录 一、事件模型1.1 冒泡型事件(Bubbling)1.2 捕获型事件(Capturing)1.3 DOM标准事件模型 二、事件对象 三、注册与移除事件监听器1、IE下注册监听器与移除监听器2、DOM标准下注册监听器与移除监听器3、直接在DOM节点上加事件 (1) 如何取消浏览器事件的传递与事件传递后浏览器的默认处...原创 2019-04-09 20:54:48 · 538 阅读 · 0 评论 -
Table表单之border边框操作
border样式在平时我们使用的频率是非常高的,但是除了表单table之外,我们几乎都是一对一的使用,一般不会遇到什么问题。 而在table中众多的数据排列在一起,为了将各个数据隔开,我们就不得不使用boder进行操作。由于表格相对其他元素的特殊性,我们在对表单进行表格操作时,往往会遇到一些特殊的情况。 这不最近我在做后台管理时就经常需要和table打...原创 2018-09-18 19:00:10 · 24802 阅读 · 3 评论 -
【前端实例】Table表格中td单元格内容超出时隐藏
HTML代码<table> <tr> <td>Data</td> <td>Table表格中td单元格内容超出时隐藏</td> <td>Data</td> </tr></table>CSS代码table { width: 100%; ...原创 2019-08-23 14:04:27 · 1293 阅读 · 0 评论 -
【前端实例】CSS实现文本内容两端对齐的小技巧
我们在Word文档中操作时,知道文本的对齐方式有4种,分别是左端对齐、居中对齐、右端对齐、两边对齐,具体效果如下所示那么,前端如何通过CSS实现两边对齐呢?通过CSS2文档查询text-align可知有个justify属性能够实现文本两端对齐但是当自己在CSS样式文件中加入 text-align: justify; 这句话时却无法实现两端对齐的效果,这是为什么?这是因为两端...原创 2019-08-23 20:22:56 · 2242 阅读 · 4 评论 -
CSS消除table和tbody之间的间距
消除前 消除前我们可以看到,在table和tbody之间存在着一个间隔消除后 想要消除这个空白间隔只需要在table样式中添加 border-collapse: collapse 合并table的border就可以消除 ...原创 2019-06-09 15:37:59 · 3179 阅读 · 0 评论 -
原生JavaScript实现jQuery中的slideUp和slideDown滑动效果
参考文章:https://blog.csdn.net/u013578101/article/details/45363039 作者:johnworks目录一、前言二、第一次尝试三、第一次失败的思考四、让定时器乖乖就范五、更灵活的管理方案六、最终实现七、个人修改后的最终代码一、前言 在我自学JavaScript的时候,一直想实现类似安卓手机状态......原创 2019-05-12 11:03:02 · 6658 阅读 · 5 评论 -
原生JavaScript实现触屏滑动效果进度条
参考地址:https://www.jianshu.com/p/bf0745e51ae5 作者:雅玲哑铃目录一、实现原理二、代码案例三、实现效果一、实现原理首先是用touchmove()时间获取到移动端事件参数,保存下进度条的最大长度,可理解为滑块可移动的距离,滑块滑动到最左边与最右边就滑不动,我们假设触摸区域在滑块的正中间,那么我们触摸的点与滑块的最左边相差值为滑块宽度...转载 2019-05-10 14:10:15 · 826 阅读 · 0 评论 -
JavaScript获取CSS内联样式和外联样式
DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。但是IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,如:obj.currentStyle.padd...原创 2019-05-10 13:58:05 · 2204 阅读 · 1 评论 -
JavaScript中"Maximum call stack size exceeded"错误解决方法
错误翻译过来就是"超过了最大调用堆栈大小",出现这个错误的原因是因为我进行了递归运算,但是忘记添加判断条件,导致递归无线循环。先看看我的代码function getComputedStyle(obj, prop) { if(window.getComputedStyle) { return getComputedStyle(obj,null)[prop]; ...原创 2019-05-10 13:45:19 · 5622 阅读 · 0 评论 -
原生JavaScript实现jQuery中的fadeIn和fadeOut淡入/出效果
目录一、前言二、需求分析三、功能实现 3.1 HTML代码 3.2 JavaScript初始化代码 3.3 淡入效果 --- 仿jQuery中的fadeIn()函数 3.4 淡出效果 --- 仿jQuery中的fadeOut()函数 3.5 淡入/淡出效果 --- 仿jQuery中的fadeTo...原创 2019-05-10 13:29:10 · 4324 阅读 · 2 评论 -
JavaScript 获取手机屏幕的宽度和高度
function getViewportSize () { return { width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, height: window.innerHeight || document.docume...原创 2019-05-10 10:44:45 · 435 阅读 · 0 评论 -
JS/jQuery实现复制、粘贴、剪切触发事件
oncopy 事件在用户拷贝元素上的内容时触发。<input type="text" oncopy="myFunction()" value="尝试拷贝文本">onpaste 事件在用户向元素中粘贴文本时触发。<input type="text" onpaste="myFunction()" value="尝试在此处粘贴文本">oncut 事件在用户剪切元素的...转载 2019-03-21 00:03:45 · 4261 阅读 · 0 评论 -
JavaScript原生仿移动设备滑动事件
function arrowEvent() { var left = document.getElementById("leftArrow"); var right = document.getElementById("rightArrow"); taskBox = document.getElementById("taskBox"); nowScroll = taskB...原创 2019-03-20 17:20:57 · 168 阅读 · 0 评论 -
【前端实例】自适应水平滑动导航条
【提出需求】当屏幕小于内容显示的宽度时,用户可以通过左右滑动导航条来浏览被隐藏的内容。【解决问题】1、判断内容是否被隐藏 答:解决方式分为CSS和JS,前者最简单后者相对麻烦,后者因为需要获取当前容器距离左侧的像素再加上本身的宽度,再和浏览器的浏览宽度进行比较,如果大于则说明多余的内容被隐藏了。2、解决CSS样式overflow隐藏多余内容后水平滚动条的问题 ...原创 2019-02-22 23:49:59 · 2651 阅读 · 0 评论 -
JavaScript对Html元素的Class操作 - className、classList、Attribute
目录【1】DOM对象 className属性对类的操作【2】DOM对象 classList属性对类的操作 -添加add( String [, String] ) -删除remove( String [,String]) -查询contains( String ) ...原创 2019-02-27 19:18:02 · 8296 阅读 · 0 评论