- 博客(55)
- 收藏
- 关注
RSS订阅原创 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
161
原创 React 组件生命周期
组件的生命周期可分成三个状态：Mounting: 已插入真实DOM Updating： 正在被重新渲染 Unmounting: 已移除真是DOM生命周期的方法有：componentWillＭount: 在渲染前调用，在客户端也在服务端； componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他的JavaScript框架一起使用，可以在这个方法中调用setTiｍeout，set
2021-01-14 17:17:16
186
原创 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
301
原创 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
139
原创 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
100
原创 为什么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
233
原创 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
124
原创 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
174
原创 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
828
原创 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
139
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
146
原创 将标准时间转成时间戳
1、将标准时间转成时间戳将‘2017-2-1’转化为时间戳 new Date('2017-2-1').getTime()2、获取当前时间的时间戳var timestamp = Date.parse(new Date());
2021-01-06 16:10:53
2114
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
326
原创 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
10551
原创 使用 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
126
转载 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
1354
原创 页面懒加载
实现思路：<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
164
原创 CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解
需求：点击按钮，进行切换，被激活的按钮背景用灰色，另外一个按钮背景色透明。遇到的问题就是在移动端切换的时候，背景色由白变成灰色的过程中，会有一个绿色的过渡。（就是先变成绿色的一下，然后再变成灰色）先考虑是否是因为移动端click点击事件300ms延迟的原因导致的，而后发现并不是最后添加了一个样式*{-webkit-tap-highlight-color: transparent;}就解决了。...
2020-12-16 16:45:41
662
原创 根据不同时区计算北京时间
<!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
565
原创 vue避免按钮点击过于频繁，按钮间隔3秒才可点击
1.实现思路定义一个变量isClick，初始值为true;一进入点击事件里，将isClick赋值为false,利用setTimeout方法设置2秒后改成true。2.遇到的问题？实践之后会发现，用上面这种方法，实现不了自己想要的效果。3.解决方法4.划重点为什么改用箭头函数的写法就可以实现了呢？箭头函数：箭头函数内部的this会指向声明箭头函数时所在作用域的this。 setTimeout:它的第一个参数是一个方法，传入的这个方法内部的this会被改写指向win.
2020-11-16 09:07:52
5481
原创 axios的并发请求
一、什么情况下使用axios的并发请求 ？同时进行多个请求，并需统一进行处理返回值。二、axios并发请求如何使用 ？ ...
2020-01-15 11:14:39
625
原创 使用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
199
原创 Axios的详解及在Vue中的使用
一、Axios是什么？Axios是基于promise的HTTP库；（类似于jQuery的ajax，应用于HTTP请求） 可以用于浏览器和node.js；（既可以用于客户端，也可以用于node.js编写的服务端）二 、Axios有什么特性？支持Promise API； 拦截请求和响应；（比如在请求头前加授权信息） 转换请求数据和响应数据；（比如在请求时对敏感信息进行加密，...
2020-01-09 17:51:39
510
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
272
原创 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
246
原创 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
1447
原创 模块module
一：模块module每个js文件就是一个模块，每个模块都有一个初始化对象moudle（moudle是一个数组）二：父模块引用子模块：(1) Require(“路径”): 得到一个module对象//1.先要导入模块（导入后是常量，故用const）const md1=require("./module02"); //相对路径./路径 ： 当前路径寻找const md...
2018-04-10 21:37:33
225
原创 计时器setInterval和setTimeout区别
计时器setInterval和setTimeout区别：相同：1.用来实现在一个固定时间段之后去执行javascript 2.语法相同，都有两个参数。参数1：将要执行的代码字符串。参数2：以毫秒为单位的时间间隔区别：1.setInterval在经过固定时间间隔，自动重复执行代码 2.setTimeout只执行一次代码
2017-12-10 16:34:02
310
原创 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
80452
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
473
原创 javascript键盘鼠标事件及音频视频图片标签
监视键盘行为:1. 键盘按下的时候会触发：onkeydown 松开键盘时会出发：onkeyup。 2. onfocus: 得到焦点 onblur: 是失去焦点 onfocus="if(this.value=='请输入搜索关键字') this.value=''" onblur="if(this.value==''
2017-11-26 20:47:36
296
原创 javascript对象
JS对象1. window对象：表示浏览器打开的窗口2. document对象：每个载入浏览器的 HTML文档都会成为 Document对象。Document对象使我们可以从脚本中对 HTML页面中的所有元素进行访问。提示：Document对象是 Window对象的一部分，可通过 window.document属性对其进行访问。3. eve
2017-11-26 20:24:51
191
原创 javascript语法基础博客
1、script代码引入方式（三种）a) 行内方式b) 内联方式c) 外部文件方式2、Script代码可以放置到页面什么位置？a) 编码位置可以是当前页面的任何一个位置b) 位置不一样，只是代表执行顺序不一样c) Script代码一般会写在当前页面的body标签最后一行d)
2017-11-08 19:08:01
235
原创 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
4083
1
原创 相对定位，绝对定位，固定定位
四种定位方式（position）共有属性：css四个属性（top、left、right、bottom） 1、Relative相对定位a) 定位的元素，可以通过left、right、top、bottom这四个属性设置新的位置b) 元素移动后，原来的坑不变。表面上看起来移动了，实际上没有移动(元神出窍)c) 作用：界面微调 配合绝对定位来用（子绝父相
2017-11-06 13:30:19
1114
原创 超链接伪类（部分页面跳转）
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
1317
原创 CSS基本样式
1.下拉框：选择品牌1">长沙华创国际广场 选择品牌2">财富广场 选择品牌3">保定华创国际广场 选择品牌4">三门峡国际广场 2.虚线分割线： 3.红色边框： border: 1px solid red; 4.清除ul前面的样式（比如圆点）：list-style:none; 5.添加
2017-11-04 11:23:04
205
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人