- 博客(88)
- 资源 (5)
- 收藏
- 关注
原创 React-实现循环轮播
问题:写字体轮播的时候,不使用swiper库,使用top定位,让字体过渡上下移动,发现写成的效果就是每次播到最后一个元素后,只能突然展示第一个元素,失去了那种上下移的动过渡效果。
2023-09-14 16:16:35
1066
原创 Mac 谷歌浏览器选中查看悬浮出现的元素样式
(4) 通过鼠标选中浮层中的元素即可查看元素的样式信息。(3)按住快捷键command + \,页面暂时。(2)鼠标选中下载,让面板悬浮出来。command + \或F8。(1)打开控制台,选中源代码。
2023-07-14 16:44:16
2460
原创 React class组件和hooks setState异步更新数据详解
React class组件和hooks setState异步更新数据详解
2023-04-06 20:05:59
1553
原创 百度开发平台 access key获取步骤
用Echart.js画图,结果地图一直出不来,后来看文档发现需要百度云的access key。于是去搜了半天才找到,步骤如下:(1)https://cloud.baidu.com/到百度智能云官网,注册登陆(2)点头像用户中心,进入用户中心(3)点击头像-安全认证(3)然后你就可以看到自己的access key了。(4)Echarts网页中使用<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.
2021-12-06 16:19:59
2986
原创 d3-selection (DOM操作相关API)
d3-selection (DOM操作相关API)Selections 允许强大的数据驱动文档对象模型 (DOM): 设置 attributes, styles, properties, HTML 或 text 内容等等。使用 data join 的 enter 和 exit 选择集可以用来根据具体的数据 add 或 remove 元素。1.selection选择器根元素: document.documentElement2.selectAll(selector)参数为css选择器,例如标签选择
2021-09-27 10:46:05
407
原创 svg-剪切和遮罩
svg-剪切和遮罩1.剪切<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clipPath id="cut-off-bottom"> <rect x="0" y="0" width="100" height="100" stroke="black" fill="pink"/&g
2021-09-14 15:16:35
397
原创 svg-基础变形
svg-基础变形1.元素作用:把属性赋给一整个元素集合<g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /></g>2.SVG嵌在SVG内部比之HTML,SVG允许你无缝嵌入别的svg元素。因此你可以利用内部svg元素的属性viewBox、属性width和属性height简单创建一个新的坐
2021-09-14 14:46:52
447
原创 svg-patterns(图案)
svg-patterns在pattern元素内部你可以包含任何之前包含过的其它基本形状,并且每个形状都可以使用之前学习过的任何样式样式化,包括渐变和半透明。<?xml version="1.0" standalone="no"?><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="Grad
2021-09-14 13:55:38
355
原创 svg-渐变
svg-渐变1.线性渐变<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/>
2021-09-13 16:07:04
342
原创 svg-fill,stroke(填充与边框)属性
svg-fill,stroke属性fill属性设置对象内部的颜色,stroke属性设置绘制对象的线条的颜色。fill:填充色fill-opacity:填充的透明度stroke:边框,即线条,设置其颜色stroke-width:设置描边的宽度。注意,描边是以路径为中心线绘制的,在上面的例子里,路径是粉红色的,描边是黑色的。如你所见,路径的每一侧都有均匀分布的描边。stroke-opacity: 边框透明度stroke-linecap:绘制描边的方式。1.butt用直边结束线段,它是常规做法
2021-09-13 11:38:09
7942
原创 svg-基本形状
1.矩形x:矩形左上角的x位置y:矩形左上角的y位置width:矩形的宽度height:矩形的高度rx:圆角的x方位的半径ry:圆角的y方位的半径 <rect x="10" y="10" rx="50" ry="10" width="100" height="100" stroke="black" fill="transparent" stroke-width="5"/>rx和ry是设置用来圆角的,默认为0;2.圆形<circle cx="25" cy="75"
2021-09-13 11:06:24
740
原创 svg viewBox和视口比例不匹配-preserveAspectRatio属性详解
1.viewBox属性svg width和height:最终显示的区域viewBox:画图的地方最终就是吧viewBox里面所画的图按照相应的规则拉伸在svg的区域显示2.preserveAspectRatio属性preserveAspectRatio="alignment [meet|slice]"第一个参数alignment(viewBox和视口的对齐方式)取值如下:第二个参数取值:meet 说明符在图形超出视口时候会对图形适当缩小调整适配可用的空间slice 说明符直接裁剪超出视
2021-09-09 14:56:11
1445
2
原创 css 中用来表示颜色的属性和方法
CSS 中的颜色可以通过以下方法指定:十六进制颜色带透明度的十六进制颜色RGB 颜色RGBA 颜色HSL 颜色HSLA 颜色预定义/跨浏览器的颜色名称使用 currentcolor 关键字1. 十六进制颜色#p1 {background-color: #ff0000;} /* 红色 */#p2 {background-color: #00ff00;} /* 绿色 */#p3 {background-color: #0000ff;} /* 蓝色 */2.带透明度的十
2021-09-08 11:17:05
977
原创 sequelise和egg(node相关)
七、Sequelize(基于promise的node.js ORM)sequelize:https://www.sequelize.com.cn/npm install --save sequelizenpm install --save mysql27.1 node.js和js,ORM一个是基于浏览器端的 javascript (前端 JS)一个是基于服务端的 javascript (后端 Node.js)语法一样组成不一样JavaScript:ECMAScript(语言基础,如:语法
2021-08-23 13:41:23
253
原创 redux,react-redux,react-thunk
三、Redux3.1 reducer规则1.Reducers 必须始终遵循一些特定的规则:他们应该只根据state和action参数计算新的状态值他们不允许修改现有的state. 相反,他们必须通过复制现有值并对复制的值进行更改来进行不可变的更新state。它们不得执行任何异步逻辑、计算随机值或导致其他“副作用”在default情况下返回旧的state。2.reducer判断state是否变化从而更新的方式:不要直接修改原来的state,要创建副本state的原因:在redux-devtoo
2021-08-23 11:53:55
220
原创 react hook学习分享
react hook学习分享二、React HookHook使用了js的闭包机制,useEffect在第一次渲染和每次更新之后都会执行。2.1 State Hook(useState)const [count, setCount] = useState(0);2.2 Effect Hook(useEffect)useEffect相当于componentDidMount,componentDidUpdate,componentWillUnmount合并在一起了的api,副作用函数(1)第二个参数
2021-08-23 11:49:15
182
原创 react学习总结
react学习总结一、React核心概念1.1 表单1.受控组件在HTML中,表单元素通常由自己维护自己的state,并根据用户输入更新。而在react里面,可变状态通常保存在组件的state属性中,并且只能通过setState()来更新。让react成为state的唯一数据源。渲染表单的React组件还控制用户输入过程中表单发生的操作。react以这种方式控制的表单输入元素就叫做受控组件。2 .一般表单元素constructor(props) {super(props);this.stat
2021-08-23 11:44:57
190
原创 postcss插件学习总结
PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 C
2021-08-23 11:38:27
2140
原创 响应式编程(rxjs)学习分享
1.学习网址文档:https://rxjs-cn.github.io/learn-rxjs-operators/operators/combination/concatall.html图示理解:https://rxmarbles.com/2.rxjsrxjs和promise的区别:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B2bZG242-1629689242025)(https://ceph-dev-pub.dz11.com/fed-doc/162755211
2021-08-23 11:35:15
578
原创 函数式编程学习
函数式编程学习1.函数式编程https://zhuanlan.zhihu.com/p/217146951.1 纯函数(没有副作用的函数)副作用的概念:一个带有副作用的函数不仅只是简单的返回一个值,还干了一些其他的事情,比如:修改一个变量直接修改数据结构设置一个对象的成员抛出一个异常或以一个错误终止打印到终端或读取用户的输入读取或写入一个文件在屏幕上绘画 如果你还记得一些初中的数学知识的话,函数 f 的概念就是,对于输入 x 产生一个输出 y =f(x)。这便是一种最简单的纯函数。纯
2021-08-23 11:26:20
154
原创 mac wifi连接无法访问
记一次mac wifi连接无法访问网址的解决方法网络偏好设置=》高级=》TCP/IP=》DHCP续租(点击一下)下面的DHCP客户端不用填,然后就可以了附其他方法网址:https://www.zhihu.com/question/52372614
2021-08-23 11:18:11
194
原创 mac 安装mysqlworkbench和使用node.js连接数据库遇到的问题
我的mysql版本是8.0.25,之后便下载了对应的mysql图形化工具mysq workbencch,版本号也是8.0.251.首先是mysql workbench打不开,无法打开“XXXX”,因为Apple无法检查其是否包含恶意软件,解决方法:mac终端输入sudo spctl --master-disable2.之后可以打开,显示版本不匹配我的mac os系统版本,于是换了一个低版本的mysq workbencch,然后就可以打开了,数据库也连接成功3.使用node.js连接数据库的时候出现
2021-06-21 15:31:51
556
原创 mac使用oh my zsh后遇到的问题
mac使用oh my zsh后遇到的问题下载oh my zsh之后,使用命令chsh -s /bin/zsh从bash切换到zsh之后发现很多命令都失效了,比如brew,npm,n之类的,只需要在**.zshrc文件最后加上source ~/.bash_profile**之后就解决了这个问题。分析原因如下:由于mac默认的是bash先执行的是/etc/profile文件。然后再启动用户目录(/Users/wmz:简写为~)下的.bash_profile、.bash_login或.profile文件中的
2021-06-16 11:02:17
2094
原创 mac 创建react项目时遇到的坑
mac 创建react项目时遇到的问题1.npm install -g create-react-app2.create-react-app my-react-app报错,就是这个问题我卡了很久3.解决方法下载下面的包brew install pixmanbrew install cairobrew install pangobrew install jpegbrew install giflibbrew install libpng之后就创建项目成功了...
2021-06-04 16:33:28
671
2
原创 session,cookie和token
sessionsession的中文翻译是“会话”,当用户打开某个web应用时,便与web服务器产生一次session。服务器使用session把用户的信息临时保存在了服务器上,用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全,可是session有一个缺陷:如果web服务器做了负载均衡,那么下一个操作请求到了另一台服务器的时候session会丢失。cookiecookie是保存在本地终端的数据。cookie由服务器生成,发送给浏览器,浏览器把cookie以kv形式保存
2021-03-16 16:05:37
137
原创 服务器上传vue项目详细步骤(mac)
服务器上传vue项目详细步骤第一次要将项目部署到服务器上面,关于使用上面服务器,怎么上传都觉得一脸懵逼,本文主要就是简单告诉你怎么简单部署。1.将vue项目打包怎么判断是否打包成功,就是点开打包文件夹dist下面的index.html,如果打开页面正常就说明打包成功了。2.服务器选择你需要有服务器可以部署,推荐去阿里云买一个,随便一个就行了。我为了便宜,使用的是轻量应用服务器3.服务器防火墙,加入你项目运行的端口号4.nginx配置因为是需要在nginx服务器下面运行,所以需要配置ngin
2021-02-14 20:15:11
675
原创 vue 父子组件如何实现传递值(不直接使用属性)的双向绑定
vue 父子组件如何实现传递值的双向绑定父组件通过props给子组件传值(假设属性为mes)时,可以直接在子组件使用mes,并直接对mes进行修改,然后通过$emit把子组件的值传给父组件,这样就实现了双向绑定的效果。但是呢,在实际开发中,会报出以下错误:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Inste
2021-01-06 16:38:29
401
原创 vue 组件传值(二)$bus,$emit,$on
vue 组件传值(二)$bus,$emit,$on<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="../node_modules
2020-12-02 15:08:05
1049
原创 webpack3.12.0 打包工具(一些webpack常用加载器和插件的使用)
webpack3.12.0 打包工具,初学知识点1.初始化项目,并且下载webpack进入项目目录,然后输入:npm init --yes这个命令执行后,项目汇总会出现一个package.json文件,然后下载webpack:npm install webpack@3.12.0 -D然后项目中就多了package-lock.json文件和node_modules文件夹2.简单打包示范先下载vuenpm install vue -D因为简单示范,我们只用到vue.js,所以我没有执行
2020-12-02 11:59:47
1239
原创 vue 组件传值(一)$attrs,$listeners
vue 组件传值(一)$attrs,$listeners$attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。$listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$liste
2020-11-26 23:51:09
238
原创 vue 组件(component)命名的小细节问题(大小写问题)
vue 组件命名的小细节问题(大小写问题)今天学习组件的时候,突然发现,定义的名为”Mycom"的组件在使用的时候用“mycom”使用没有任何问题,于是我就试了一下哪种情况可以,哪种情况不可以。首先说明一下,我注册的是全局组件。1.简单测试结果<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 组件自定义属性</title><script src
2020-11-24 18:42:05
8051
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人