- 博客(55)
- 收藏
- 关注
原创 React Refs
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticf.
2021-01-14 17:18:43
120
原创 React 组件生命周期
组件的生命周期可分成三个状态:Mounting: 已插入真实DOM Updating: 正在被重新渲染 Unmounting: 已移除真是DOM生命周期的方法有:componentWillMount: 在渲染前调用,在客户端也在服务端; componentDidMount: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。如果你想和其他的JavaScript框架一起使用,可以在这个方法中调用setTimeout,set
2021-01-14 17:17:16
140
原创 React 组件API
一、设置状态 setStatesetState(object nextState[, function callback])nextState 将要设置的新状态,该状态汇和当前的state合并 callback 可选参数,非必填,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。class Counter extends React.Component{ constructor(props
2021-01-14 11:21:04
256
原创 React 列表 & Keys
React 列表 & Keysconst numbers = [1,2,3,4,5];const listItems = numbers.map((number) => <li key={number}>{number}</li>);ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('example'));注意:每个列表元素分配一个key,不.
2021-01-14 08:59:55
100
原创 React 条件渲染
元素变量<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.
2021-01-13 16:27:37
74
原创 为什么React要区分Class和function定义的组件?
React内部通过调用组件的定义来获取被渲染的节点,而对于不同的组件定义方式,其获取节点的步骤也不一样。<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"&g
2021-01-13 11:58:32
203
原创 React Props
一、React Propsstate和props的主要区别在于props是不可变的,而state可以根据与用户交互来改变;这就是为什么有些容器组件需要定义state来更新和修改数据,而子组件只能通过props来修改数据。二、使用Propsfunction HelloMessage(props) { return <h1>Hello {props.name}</h1>;}const element = <HelloMessage name=".
2021-01-11 11:32:13
95
原创 React State(状态)
一、React State(状态)React把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,如何渲染UI,让用户界面和数据保持一致。React里,只需更新组件的state,然后根据新的state重新渲染用户界面(不要操作DOM)。添加一个类构造函数来初始化状态this.state,类组件应始终使用props调用基础构造函数。class Clock extends React.Component { constructor(props) {
2021-01-08 16:53:38
142
原创 CSS修改滚动条样式
CSS样式.roles::-webkit-scrollbar{ width:5px; height:5px;}.roles::-webkit-scrollbar-track{ background: rgba(164,197,221,0.67); border-radius:0px;}.roles::-webkit-scrollbar-thumb{ background: #3E9AF9; border-radius:0px;}.roles::-webkit-scr
2021-01-08 10:10:19
657
原创 React组件
一、介绍React组件的基本使用React使用函数定义组件,接下来我们封装一个输出 "Hello World!" 的组件,组件名为 HelloMessage。<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>菜鸟教程 React 实例</title><script src="https://cdn.staticfile.org/react/16.
2021-01-07 16:26:47
107
1
原创 React JSX
React用JSX来替代常规的JavaScriptJSX有如下优点:1. JSX执行更快,因为它在编译为JavaScript做了优化2. 类型安全的,在编译过程中就能发现错误3. 使用JSX编写模板更加简单快速const element = <h1>Hello, world!</h1>;这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为JSX,我们推荐在 React 中使用 JSX 来描述用户界面。JSX 是在 JavaScrip
2021-01-07 11:21:50
122
原创 将标准时间转成时间戳
1、将标准时间转成时间戳将‘2017-2-1’转化为时间戳 new Date('2017-2-1').getTime()2、获取当前时间的时间戳var timestamp = Date.parse(new Date());
2021-01-06 16:10:53
2041
1
原创 js或vue中如何处理字符串中带有↵字符
split('\n') 使用split('\n')将字符串分割成数组就行 如果我们在vue中,只需要在页面中绑定变量时操作split('\n')就可以了: <p v-for="_item in item.question.split('\n')">{{_item}}</p>
2021-01-06 15:24:44
302
原创 ReactDOM.render(...) 渲染方法
React代码的书写格式和以前的JS有很大的不同,下面通过对这段代码进行分析了解一下他。以前使用Javascript定义一个变量用var,ES6加入了const关键字,用来定义一个常量:const div = document.createElement('div');ReactDOM.render(...)是渲染方法,所有的js,html都可通过它进行渲染绘制,他有两个参数,内容和渲染目标js对象。内容: 就是要在渲染目标中显示的东西,可以是一个React部件,一段HTML或TEXT文
2020-12-25 17:05:13
10384
原创 使用 create-react-app 快速构建 React 开发环境
使用 create-react-app 快速构建 React 开发环境cnpm install -g create-react-app // 全局安装create-react-app,如果不想全局安装,则不要-gcreate-react-app my-app // my-app是项目名cd my-appnpm start // 启动项目浏览器运行http://localhost:3000/即可...
2020-12-25 15:58:45
100
原创 JS或jQuery获取当前屏幕宽度
JS或jQuery获取当前屏幕宽度Javascript:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scroll
2020-12-23 16:54:57
1272
原创 页面懒加载
实现思路:<body><ul><li onclick="jumpOther()">0001</li><li>0002</li><li>0003</li><li>0004</li><li>0005</li><li>0006</li><li>0007</li><li>0008</l
2020-12-21 12:01:06
137
原创 CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解
需求:点击按钮,进行切换,被激活的按钮背景用灰色,另外一个按钮背景色透明。遇到的问题就是在移动端切换的时候,背景色由白变成灰色的过程中,会有一个绿色的过渡。(就是先变成绿色的一下,然后再变成灰色)先考虑是否是因为移动端click点击事件300ms延迟的原因导致的,而后发现并不是最后添加了一个样式*{-webkit-tap-highlight-color: transparent;}就解决了。...
2020-12-16 16:45:41
571
原创 根据不同时区计算北京时间
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>根据不同时区计算北京时间</title> <script> function timeFun(){ let d = new Date(); //获取当地标准时间 let offsetTime = d.getTimezoneOffset() + 480;.
2020-11-19 10:23:52
491
原创 vue避免按钮点击过于频繁,按钮间隔3秒才可点击
1.实现思路定义一个变量isClick,初始值为true;一进入点击事件里,将isClick赋值为false,利用setTimeout方法设置2秒后改成true。2.遇到的问题?实践之后会发现,用上面这种方法,实现不了自己想要的效果。3.解决方法4.划重点为什么改用箭头函数的写法就可以实现了呢?箭头函数:箭头函数内部的this会指向声明箭头函数时所在作用域的this。 setTimeout:它的第一个参数是一个方法,传入的这个方法内部的this会被改写指向win.
2020-11-16 09:07:52
5277
原创 axios的并发请求
一、什么情况下使用axios的并发请求 ?同时进行多个请求,并需统一进行处理返回值。二、axios并发请求如何使用 ? ...
2020-01-15 11:14:39
589
原创 使用vue-cli创建vue项目
一、安装vue-cli先检查是否安装了vue-cli 本文介绍的是vue-cli 3.0以上的版本的vue项目创建。如果已经安装了2.0,需要切换到3.0以上的版本 a. 先卸载已经安装的2.0的版本:npm uninstall -g vue-cli b. 下载最新的版本:npm install -g @vue/cli (注意:下载需要用管理员权限打开cmd,不然...
2020-01-10 11:50:31
174
原创 Axios的详解及在Vue中的使用
一、Axios是什么?Axios是基于promise的HTTP库;(类似于jQuery的ajax,应用于HTTP请求) 可以用于浏览器和node.js;(既可以用于客户端,也可以用于node.js编写的服务端)二 、Axios有什么特性?支持Promise API; 拦截请求和响应;(比如在请求头前加授权信息) 转换请求数据和响应数据;(比如在请求时对敏感信息进行加密,...
2020-01-09 17:51:39
472
1
原创 socket
一、Socket编程(net模块)(1) 服务器的建立a. 引入net模块const net = require("net");b. 创建服务器//2.创建服务器 每获取一次连接,会触发一次这个回调函数,并且得到一个与客户端的socketconst server = net.createServer(function(socket){ //给客户端发送成功信息 socket.wr...
2018-04-14 20:33:53
242
原创 npm基本使用
npm基本使用一.什么是node.js?1. Node.js是一个基于Chrome V8引擎的javascript运行环境。Node.js使用了一个事件驱动,非阻塞式I/O的模型(Node.js特性),使其轻便又高级,Node.js的包管理器npm是全球最大的开源生态系统。2. Node内部采用Google Chrome的V8引擎,作为javascript的语言解释器3. Node.js 是一个 ...
2018-04-14 17:14:50
216
原创 fs-文件系统
fs模块:一:主要对文件和目录进行操作,一般情况下,fs模块与path模块一起使用。const pt = require("path");const fs = require("fs");二:读取指定目录下的文件和文件夹(1) fs.readdir(path[, options], callback):let dir = "E:\\HBuilder文件\\nodejs学习\\module";fs ...
2018-04-11 13:11:51
1393
原创 模块module
一:模块module每个js文件就是一个模块,每个模块都有一个初始化对象moudle(moudle是一个数组)二:父模块引用子模块:(1) Require(“路径”): 得到一个module对象//1.先要导入模块(导入后是常量,故用const)const md1=require("./module02"); //相对路径./路径 : 当前路径寻找const md...
2018-04-10 21:37:33
194
原创 计时器setInterval和setTimeout区别
计时器setInterval和setTimeout区别:相同:1.用来实现在一个固定时间段之后去执行javascript 2.语法相同,都有两个参数。参数1:将要执行的代码字符串。参数2:以毫秒为单位的时间间隔区别:1.setInterval在经过固定时间间隔,自动重复执行代码 2.setTimeout只执行一次代码
2017-12-10 16:34:02
266
原创 javascript跳转到新页面的三种方法
1.a标签a标签:Welcome :上一个页面,就是前一个页面 :下一个页面,就是后一个页面Welcome2 . location对象的href属性:window.location.href="http://www.jb51.net"; //在同当前窗口中打开窗口3.open :window.open(“http://www
2017-11-26 20:59:10
79424
1
原创 javascript两个数组合并及判断数据类型的方法
// javascript里将a,b两个数组合并的方法 var a = [1,4,6,3,7,8,5,76,45]; var b = ["fun","asw","wes","add","apple"]; var c = a.concat( b ); console.log("数组c "+c);数组c的内容是 : 1,4,6,3,7,8,5
2017-11-26 20:52:55
447
原创 javascript键盘鼠标事件及音频视频图片标签
监视键盘行为:1. 键盘按下的时候会触发:onkeydown 松开键盘时会出发:onkeyup。 2. onfocus: 得到焦点 onblur: 是失去焦点 onfocus="if(this.value=='请输入搜索关键字') this.value=''" onblur="if(this.value==''
2017-11-26 20:47:36
274
原创 javascript对象
JS对象1. window对象:表示浏览器打开的窗口2. document对象:每个载入浏览器的 HTML文档都会成为 Document对象。Document对象使我们可以从脚本中对 HTML页面中的所有元素进行访问。提示:Document对象是 Window对象的一部分,可通过 window.document属性对其进行访问。3. eve
2017-11-26 20:24:51
138
原创 javascript语法基础博客
1、script代码引入方式(三种)a) 行内方式b) 内联方式c) 外部文件方式2、Script代码可以放置到页面什么位置?a) 编码位置可以是当前页面的任何一个位置b) 位置不一样,只是代表执行顺序不一样c) Script代码一般会写在当前页面的body标签最后一行d)
2017-11-08 19:08:01
207
原创 z-index(元素覆盖层级关系)
z-index(元素覆盖层级关系)1、定义:设置当前page中元素的层叠顺序2、注意点a) z-index值越大的,显示会在上层,但是没有封顶值b) Z-index指对设置了position的元素生效c) 随父性:父元素的z-index值,会影响子元素的重叠效果如果拼爹,拼不赢,则儿子不管多牛逼,都拼不赢 技巧:如果大家做项目过程中,给当前元素设置z-in
2017-11-06 13:39:27
3989
1
原创 相对定位,绝对定位,固定定位
四种定位方式(position)共有属性:css四个属性(top、left、right、bottom) 1、Relative相对定位a) 定位的元素,可以通过left、right、top、bottom这四个属性设置新的位置b) 元素移动后,原来的坑不变。表面上看起来移动了,实际上没有移动(元神出窍)c) 作用:界面微调 配合绝对定位来用(子绝父相
2017-11-06 13:30:19
1069
原创 超链接伪类(部分页面跳转)
14.整个页面分成几个部分,点击时只是其中一部分页面跳转如上图点击“第四个页面”时,只有第四个页面的区域跳转。另外两个区域保持不变。一共有五个.html(分别是首页home.html,首页分为上下两个页面,上面是占20%的01.html,下面是占剩下80%的02.html。然后再从下面02.html里面分左边20%为03.html,右边占剩下80%的为04.html) Ho
2017-11-04 11:30:21
1277
原创 CSS基本样式
1.下拉框:选择品牌1">长沙华创国际广场 选择品牌2">财富广场 选择品牌3">保定华创国际广场 选择品牌4">三门峡国际广场 2.虚线分割线: 3.红色边框: border: 1px solid red; 4.清除ul前面的样式(比如圆点):list-style:none; 5.添加
2017-11-04 11:23:04
192
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人