前端
关注
分享
扫一扫
文章平均质量分 83
Cao_Mary
这个作者很懒，什么都没留下…
展开
-
nvm的安装与使用
Node.js是谁众所周知，是一个基于"Chrome V8 引擎" 的JavaScript “运行环境”。小声BB：那V8是谁？小编露齿而笑：“V8引擎是一款专门解释和执行JS代码的虚拟机, 任何程序只要集成了V8引擎都可以执行JS代码。也就是说只要将V8引擎嵌入到不同的宿主环境中, 就可以在不同的宿主环境下执行JS代码。”小声BB：那“运行环境”是谁？小编微笑：“运行环境的特点: 可以运行"特定编程语言"编写的"应用程序"例如:可以在Windows/Linux运行环境中, 运行通过C/原创 2022-04-27 11:06:25 · 666 阅读 · 0 评论 -
Redux DevTools工具的安装
什么是Redux DevTools?Redux DevTools是一款由Redux官方提供的浏览器调试工具,可以让我们更加方便的对Redux保存的状态进行追踪调试。大白话就是：类似于Vuex。完整项目地址：https://github.com/reduxjs/redux-devtoolsRedux DevTools chrome扩展程序地址：https://github.com/zalmoxisus/redux-devtools-extension（用于下载工具压缩包）如何使用Redux De原创 2022-04-27 11:04:04 · 2164 阅读 · 2 评论 -
安装React developer tool避坑
安装React developer tool避坑问题1.This is probably not a problem with npm. There is likely additional logging output above.问题2.npm ERR! code EUNSUPPORTEDPROTOCOL npm ERR! Unsupported URL Type "link:": link:./scripts/eslint-rules3.总结时间有限的童鞋直接看标题3 总结即可问题1.This i原创 2021-03-28 15:52:58 · 1102 阅读 · 0 评论 -
获取、监听hash值和路径值
1.获取hash值location.hash：hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）2.获取路径值location.pathname：pathname 属性是一个可读可写的字符串，可设置或返回当前 URL 的路径部分...原创 2020-10-09 17:48:08 · 1959 阅读 · 0 评论 -
【Vue报错】did you register the component correctly
问题描述：Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.报错原因1：:是因为暴露组件的时候加了组件扩展名，导致未识别。//错误写法：export default { name: 'xxx.vue'}//正确写法export default { name: 'xxx'原创 2020-06-22 11:23:54 · 6269 阅读 · 0 评论 -
Vue的渲染方式（如何将组件添加到实例控制区域）
1.Vue渲染组件的两种方式1.1先定义注册组件, 然后在Vue实例中当做标签来使用<div id="app"> <one></one>//在实例中当做标签使用</div><template id="one"> <div> <p>我是组件22</p> </div></template><script> Vue.compo原创 2020-06-04 18:47:54 · 742 阅读 · 0 评论 -
Vue父子组件数据传递方式
使用Vue的同学，本文一、二两个小结必须掌握。Vue父子组件数据传递方式一*、父组件给子组件传递数据二*、父组件给子组件传递方法三、子组件给父组件传递数据四、组件数据多级传递五、组件方法多级传递一*、父组件给子组件传递数据1在父组件中通过v-bind传递数据传递格式 v-bind:自定义接收名称 = "要传递数据"2在注册组件的子组件中通过props接收数据接收格式 props: [“自定义接收名称”]<!DOCTYPE html><html lang="en">原创 2020-05-12 18:49:13 · 664 阅读 · 0 评论 -
webpack中常用loader及plugins（插件）
本文主要简单讲解常用loader及plugins的作用，方便快速查找。具体使用方法见官网或github一、loader同plugins是什么loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 l...原创 2020-03-02 15:05:51 · 3535 阅读 · 0 评论 -
ES6模块化使用方式
ES6之前javascript比较怂巴巴，没有模块化的概念，是ES6的新特性。本文主要介绍js模块化的使用。ES6模块化一、ES6模块化的第一种方式:1.1 使用方法1.2.注意点：注意点1的案例：解构赋值案例：注意点2案例：通过as修改接收的变量名称二、ES6模块化的第二种方式:2.1 使用方法2.2 注意点：三、两种方式混合使用一、ES6模块化的第一种方式:1.1 使用方法导出数据：...原创 2020-03-02 14:00:36 · 761 阅读 · 0 评论 -
NodeJS之nrm/cnpm的安装
一、nrm（推荐使用）由于npm默认去国外下载资源, 所以对于国内开发者来说下载会比较慢nrm工具作用： 允许将资源下载地址从国外切换到国内安装方法：1.npm install -g nrm 使用npm安装NRM2.nrm --version 查看是否安装成功3.nrm ls 查看允许切换的资源地址4...原创 2019-10-31 12:12:18 · 542 阅读 · 0 评论 -
NodeJS环境下，使用NPM管理包
本文主要讲解，使用NPM工具管理包。注意想使用NPM需要安装NodeJS哈。NodeJS安装方法见：NodeJS环境搭建。一般安装的NodeJS环境中会自带npm，若安装npm失败，解决办法详见node下载安装后，npm安装失败解决方案主要涉及的NPM安装包方式：全局安装和本地安装。npm官网：https://www.npmjs.com/一、全局安装全局安装 (一般用于安装全局使...原创 2019-10-31 11:18:10 · 476 阅读 · 0 评论 -
javascript判断对象是否是空对象
使用javascript判断对象是否是空对象原创 2019-10-17 17:37:44 · 185 阅读 · 0 评论 -
真伪数组的转化及apply/call/slice方法
此篇文章前半部分都在介绍真伪数组转换的涉及的相关js方法，原理。想要直接看真伪数组转化的具体方法可以直接看文章的最后一节“总结真伪数组的转换”。补充this的含义：this：谁调用就是谁例如：function test() { console.log(this);//打印window。this是谁调用就是谁.此时this是window}test();js的apply与ca...原创 2019-06-12 12:19:39 · 403 阅读 · 0 评论 -
使用webstrom自定义快捷键
使用webstrom自定义模板：1.打开webstrom2.点击file——setting3.查询“live templates后，点击”右侧“+”4.Template text中填写快捷方式内容。下方“Noapplicable contexts yet”后有按钮：点击“define”选择应用场景。Abbreviation：设置快捷键为bt35.点击“ap...原创 2019-09-03 13:05:32 · 411 阅读 · 0 评论 -
SVG基本使用（五、脚本编程）
svg脚本编程：通过js操作svg企业开发中均使用框架进行脚本编程脚本编程推荐自学svg框架https://svgjs.com/http://snapsvg.io/docs/可以做搜狗浏览器官网特效。多看看svg在线编辑器使用js绘制svg注意点：绘制画布注意点:创建SVG时必须指定命名空间（用于告诉浏览器，此文件不是普通xml文件，而是用来表示SVG图形的。svg内所有标签都...原创 2019-09-03 12:54:08 · 900 阅读 · 0 评论 -
SVG基本使用（四、动画、动画常用属性、复合动画/往返动画/形变动画/路径动画、脚本编程
一、动画1.SVG动画在SVG中提供了三种常用动画标记animate：基础动画animateTransform：形变动画animateMotion：路径动画2.SVG动画属性attributeType: CSS/XML 规定的属性值的名称空间attributeName: 规定元素的哪个属性会产生动画效果from/to: 从哪到哪dur: 动画时长fill: 动画结束之...原创 2019-09-02 17:09:23 · 2462 阅读 · 2 评论 -
SVG基本使用（三、剪裁/蒙版、渐变色、画笔、形变、ViewBox）
一、裁剪与蒙版1.clipPath只有路径范围内的内容会被显示, 路径范围外的内容不会被显示2.maskmask和clipPath差不多2.1.裁切路径是可见与不可见的突变2.2.蒙版则是可见与不可见的渐变注意点:在指定裁剪和蒙版的时候需要通过url(#id)来指定1.圆形在上，矩形在下<svg width="500" height="500"> ...原创 2019-09-02 13:34:32 · 1211 阅读 · 0 评论 -
SVG基本使用（一、基本概念、使用方法、绘制矩形/圆/椭圆/直线/折现/多边形/）
一、SVG概念1.什么是SVG?SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图2.位图和矢量图在计算机中有两种图形, 一种是位图, 一种是矢量图2.1 位图:传统的 jpg / png / gif图都是位图位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px2.2 位图的优点和缺点:优点: 色彩丰富逼真缺点: 放...原创 2019-08-19 16:39:02 · 2630 阅读 · 0 评论 -
bootstrap基本使用，快速了解bootstrap
本文只涉及bootstrap基本使用，不提供代码案例。以便于快速了解bootstrap是什么。详细使用规则还是要看官方文档。原创 2019-09-04 11:42:00 · 905 阅读 · 0 评论 -
前端开发常用单位
1.像素什么是像素(Pixel)?在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格像素特点不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)2.百分比什么是百分比?百分比是前端开发中的一个动态单位, 永远都是以当前元素...原创 2019-09-12 12:05:34 · 635 阅读 · 0 评论 -
设备（物理）像素和CSS（逻辑）像素
1.什么是设备像素和CSS像素?1.1、设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变1.2、CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素例如:iPhone3G/iPhone3GS3.5英寸逻辑像素320*480设备像素320*480iPhone4/4S3.5英寸逻辑像素3...原创 2019-09-16 11:46:39 · 1284 阅读 · 0 评论 -
前端页面适配移动端常用方案
本文写作顺序是按照实际编写移动端适配的顺序编写的。想要充分理解，需要童鞋们有rem，像素，媒体查询，的基础知识。若顺序阅读理解较为困难。可以按照标题3、2、1的顺序阅读。理解困难，可留言。1.js添加如下三行代码——解决设备像素同逻辑像素不同的问题let scale = 1.0 / window.devicePixelRatio;let text = `<meta name="v...原创 2019-09-16 12:01:48 · 960 阅读 · 0 评论 -
移动端视口
1.什么是视口?视口简单理解就是可视区域大小我们称之为视口在PC端，视口大小就是浏览器窗口可视区域的大小（窗口多大，可视区域/视口就多大）在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了9802.为什么是980而不是其他的值?因为过去网页的版心都是980乔布斯为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980后来谷歌也觉得这是一个非常牛...原创 2019-09-16 12:17:00 · 916 阅读 · 0 评论 -
适配移动端解决思路
阅读本文前，先了解一篇文章 移动端视口1.适配移动端方法一：PC+ 移动端使用媒体查询PC端，移动端使用媒体查询，使用同一套代码html头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0">内容区域：采用媒体查询的方式布局页面。主要是通过查询设备的宽度来执行不同的css代码，最终达...原创 2019-09-16 12:41:10 · 397 阅读 · 0 评论 -
H5存储方案——cookie、session、SessionStorage和LocalStorage
1.简述浏览器端存储网页中的数据有三种存储方案：cookie、SessionStorage和LocalStorage。其中：SessionStorage和LocalStorage是H5新增的存储方案。而cookie经常同session一并提起，它们的主要区别：cookie：会话跟踪技术 客户端（浏览器）session；会话跟踪技术 服务端也就是说session一般用于服务器端进行会...原创 2019-09-20 13:40:27 · 889 阅读 · 0 评论 -
响应式网站编写步骤 使用css3媒体查询
1.如果给电脑的CSS添加条件（media），那么在平板和手机上所有的样式都会消失，那么如果平板和手机上有和电脑上相同的样式也不能复用。2.所以我们不要给电脑的css添加条件，这样无论浏览器的宽度是多少，电脑的CSS文件都会被执行，我们只需要在平板或者手机对应的CSS文件中通过相同的选择器覆盖掉不同的样式即可。3.综上，可以降低代码的冗余。4.企业开发中编写响应式网站的步骤 4....原创 2019-04-04 17:34:15 · 199 阅读 · 0 评论 -
同源策略、跨域
访问资源时遇到问题，报错：No ‘Access-Control-Allow-Origin’ header is present on the requested resource.原因：访问的资源不是同源的。1.什么是同源策略?同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能所谓同源是指: 协议，域名（一级、二级域名），端口都相同,就是同源, ...原创 2019-06-21 17:17:49 · 680 阅读 · 0 评论 -
属性和属性节点
1.什么是属性？属性就是对象身上保存的变量只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)// 1.自定义一个对象var obj = {};console.log(obj);// 2.动态给自定义对象添加属性obj.name = "lnj"; // name就是对象obj的一个属性obj.age = 33; // age就是对象obj的一个属性console.log...原创 2019-05-28 16:39:56 · 3608 阅读 · 1 评论 -
页面不断滚动，无法查看底部样式
页面滚动产生新的内容原因： 页面滚动时访问服务器，加载新的数据。解决无法查看底部样式问题方法： 断开网络连接断开网络连接方法： 使用google控制台：network->No throttling(修改为Offline)...原创 2019-05-28 11:39:13 · 367 阅读 · 0 评论 -
预解析详解——为什么var定义的变量，可以在定义之前使用？
1.什么是预解析？浏览器在执行JS代码的时候会分成两部分操作：预计西以及逐行执行代码也就是说浏览器不会直接执行代码，而是加工处理之后再执行这个加工处理的过程，我们就称之为预解析2.预解析规则2.1、将变量声明和函数声明提升到当前作用域最前面2.2、将剩余代码按照书写顺序一次放到后面3.注意点：通过let定义的变量不会被提升（不会被预解析）4.var同let定义的变量预解析va...原创 2019-04-22 17:27:26 · 1106 阅读 · 0 评论 -
JS局部变量、全局变量、局部作用域、全局作用域以及块级作用域结合ES6讲解
1.在JavaScript中定义变量有两种方式ES6之前：var 变量名称;ES6开始：let 变量名称;2.两种定义变量方式的区别详细介绍见https://blog.youkuaiyun.com/Cao_Mary/article/details/892076052.1、是否能够定义同名变量var可以定义，let不可以定义同名变量2.2、是否能够先使用后定义var可以先使用后定义（预解析），l...原创 2019-04-22 10:42:06 · 2141 阅读 · 4 评论 -
静态 网站 基本搭建步骤和要素
一、主体搭建1.建立站点文件夹1.1、在项目的根目录下建立如下文件夹：注意： 1.文件夹名称不能是中文 2.里面至少应该包含css/js/images三个子文件夹 3.里面至少应该包含index.html文件/项目根目录css（文件夹）base.css(放css的工具类)index.cssnormalize.css（或者cssreset-min.css，用于清...原创 2019-04-08 12:41:02 · 2731 阅读 · 0 评论 -
HTML 基本概念梳理——涉及HTML简要发展史、基本标签
本文原产于个人有道云笔记，迁移优快云时部分图片未上传，格式未调整。望阅读的人海量。1.HTML基础——基本概念1.1什么是浏览器浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已。功能主要有两个：将网页渲染出来给用户查看，能够让用户通过浏览器和网页交互。浏览器市场份...原创 2019-03-28 18:25:57 · 614 阅读 · 0 评论 -
ES6定义变量的let 同 ES6之前的var对比
为了解决ES6之前老版本标准中的两个问题1.在JavaScript中如果定义了同名的变量，那么后定义的变量会覆盖先定义的变量。2.在老版本的标准的（ES6之前）JavaScript中可以先使用变量再定义变量，并不会报错。在ES6中就推出了一种新的定义变量的方式推出了定义变量的新方法：let格式：- ES6之前：var 变量名称;- ES6之后：let 变量名称;举例var和...原创 2019-04-11 12:43:27 · 408 阅读 · 0 评论 -
字体图标使用方法
1.图片有诸多的优点，但是缺点也很明显例如：图片会增加网页的大小（性能问题）图片会增加访问网页时HTTP请求的次数（性能问题）图片不能很好的进行缩放（失真）。。。。。2.字体图标：本质是文字（体积小），虽然字体图标的本质是文字，但是也可以做出和图片一样的效果并且可以随意修改颜色、大小、透明度等（扩展性强）3.常用字体图标库https://www.iconfont.cn/（阿里...原创 2019-04-01 16:40:51 · 872 阅读 · 0 评论 -
jQuery 变量
1.定义一个变量numvar num；2.定义一个变量num并赋值为2var num = 2；3.连续定义变量var num1, num2, num3;4.局部变量numfunction test() { var num = 2; console.log(num);}5.局部变量变为全局变量function test() { v...原创 2019-01-10 18:53:25 · 2180 阅读 · 0 评论 -
解决条件搜索时一个click调用另一个click参数问题
解决了两天才解决。新手入门多多包涵，优快云截图上传不了。后面看看能上传的时候在传页面样式。需求：用户在input搜索框输入搜索内容。选择时间后，点击button按钮返回最终结果问题：时间样式由a标签完成，click获取用户选择的a标签后，需要将所选a标签的text值供button的click使用。分别写click方法时，出现button的click无法使用时间click的值。$('#u327 a...原创 2018-06-27 16:00:32 · 337 阅读 · 0 评论 -
jquery-ajax实现动态数据填入ul（新闻展示页面）
界面丑，未调整，数据随便写的稍后调整。先记录一下。1.头部加载文件：（低版本也可）<script src="js/jquery-3.3.1.js" type="text/javascript"></script>2.json文件：value.json本例子专门使用两层嵌套json，为了学习多层json的解析。{ "name": "中国", "provi原创 2018-06-29 18:07:45 · 8490 阅读 · 44 评论 -
jquery-3.3.1.js:9857 Uncaught TypeError: url.indexOf is not a function
前端环境： 使用axure rp8.0制作原型，并生成HTML后，调用jquery后，持续报错url.indexOf is not a function。 最后发现在目录的\resources\scripts\prototypePost.js文件中修改为：不在报错。原因：axure rp8.0使用的仍然是jquery1.8以前的老版本的调用load函数的方法...原创 2018-06-08 17:48:04 · 1333 阅读 · 0 评论 -
div 隐藏于展开 共3个方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>jquery 展开 收起</title> &原创 2018-06-08 16:40:02 · 1265 阅读 · 0 评论