- 博客(43)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vuecli4适配pc端
vuecli4适配pc端1.首先安装amfe-flexiblenpm i -S amfe-flexible在main.js中引入import 'amfe-flexible';2.安装postcss-px2remnpm i postcss-px2rem --save -dev在vue.config.js中添加module.exports = { css: { loaderOptions: { postcss: {
2021-06-07 11:57:08
217
1
原创 JS对象分类
js分类原因：分类就可以少占内存new语法将函数与原型结合函数的特征都有prototype属性，存储原型地址每个prototype都有一个constructor属性，是来告诉别人构造这个属性的爹是谁new语法的写法和特征newX()特征自动创建空对象自动为空对象关联原型，原型地址指定为X.prototype自动将空对象，作为this关键字运行构造函数（构造函数是指创建对象的函数）自动return thisfunction Person(name, age) {//（）里写变量
2020-05-10 22:38:32
512
原创 JS对象
前言回顾之前的七种数据类型：number string bool symbolnull undefinedobject五个falsy值null undefined0 NaN‘’（空字符串）对象的概念定义无序的数据集合键值对的集合①属性名：每个key都是对象的属性名（property）②属性值：每个value都是对象的属性值写法let obj = { 'n...
2020-05-07 21:04:31
245
原创 JS数据类型
数字与字符串功能不同：数字能加减乘 字符串只能加字符串表示手机号码，数字不行，0开头没有意义存储方式不同js中，数字是转成2进制即64位浮点数形式存js中，字符串经过编码再转换成数字存储的如何存数字数字以0/1存，所以转二进制10转2：31=？*2……2转10：=2的n次方16进制转2进制：1-9 A-F以8 4 2 1表示xxxx把二进制数对应四个四个一份...
2020-05-07 20:45:22
329
原创 浅析URL
前言首先在前面的HTML文章中提到李爵士发明了万维网WWW，实际上它是由URL、HTTP、HTML三部分组成的，即WWW=URL+HTTP+HTML，接下来就来介绍一下URL。URLURL是(UniformResourceLocator,统一资源定位符)的缩写,它是WWW的统一资源定位标志,就是指网络地址。URL的标准格式： [协议类型]????/[服务器地址]:[端口号]/[资源层级UNIX文...
2020-05-02 22:09:00
293
原创 HTML常用标签
一、a 标签的用法HTML 的 a标签可以创建通向其他网页、文件、电子邮件地址、电话、同一页面内的位置或任何其他 URL 的超链接。a标签的常用属性：1. hrefhref 属性给出超链接指向的网址。它的值应该是一个 URL 或者锚点。• 网址链接通过a标签表示，用户点击后，浏览器会跳转到指定的网址。下面的三条代码都定义了超链接，浏览器会显示出三个Google，且下面自带下划线。用户点...
2020-05-02 21:44:31
474
原创 JS基本语法
表达式和语句1、表达式1+2表达式的值为3add（1,2）表达式的值为函数的返回值，只有函数有返回值console.log 表达式的值为函数本身console.log(3)表达式的值为undefined，因为没有名字为3这种可以调用的函数，如果需要打印3，则需要写成console.log(‘3’)2、语句var a=2 是一个语句3、区别• 语句无值，表达式有• 语句...
2020-04-26 23:01:55
331
原创 CSS知识总结
一、CSS 基础知识1. 文档流（Normal Flow）文档中文档的流动方向，默认inline从左到右，block从上到下inline流动方向：元素从左到右，到达最右边才会换行，默认合并且遇到行尾折行；宽度：为内部 inline 元素的和，不能用 width 指定；高度：由 line-height 间接确定，跟 height 无关；没有内容的 inline 元素高度为 line-...
2020-04-24 14:10:56
138
原创 使用hugo搭建个人博客
使用hugo搭建个人博客1.首先到Hugo releases页面下载，由于我的电脑是windows64位,大家可以按需选择要下载的是32位还是64位。最好将解压后的hugo.exe放到E:\software\hugo\hugo.exe下，并且将E:\software\hugo加入到环境变量中，然后启动终端，运行hugo version查看版本，是否安装成功。2.进入hugo官网点击get s...
2020-04-20 16:12:19
282
原创 HTML入门笔记1
从头开始，从新再来，以下仅是记录自己重新学习HTML的过程HTML的发明HTML是超文本标记语言。于1990年左右，被Tim Berners-Lee发明出来，2004年被英国女皇颁发了大英帝国爵级司令勋章而被称为李爵士，更是在2017年获得了图灵奖。李爵士的成就不仅于此 ，还自己编写了世界上第一个浏览器与服务器，同时还利用自己写的浏览器访问了自己写的服务器，就此发明了WWW，包含了HTML...
2020-04-20 14:03:04
222
原创 使用nrm切换npm源
首先确保已经安装了Node.js,输入下面有完整的版本出现即为安装成功。node --versionnpm --versionnpx --version修改npm镜像源地址npm i -g nrmnrm --versionnrm ls切换镜像源地址nrm use taobao显示 Registry has been set to: https://registry.np...
2020-04-17 21:04:58
253
原创 redux-thunk使用流程
首先安装redux-thunknpm install redux-thunk其次在创建store的时候，使用thunk中间件，照着官方文档，一步一步去配置，通过enhancer 这样一个内容，把他传递给createStore的第二个参数，使得我们这样一个store仓库，既使用了thunk又使用了REDUX_DEVTOOLS开发者工具。store文件夹下的index.jsimport { cr...
2020-01-23 21:41:56
428
原创 UI组件和容器组件和无状态组件
UI组件负责页面的渲染，容器组件负责页面的逻辑无状态组件—>当我们的组件只有一个render函数的时候，就叫做无状态组件无状态组件就是一个函数，当一个普通的组件只有render函数的时候，可以用一个无状态组件，来替换普通组件无状态组件的性能比较高，他就是一个函数，普通的组件，执行起来的东西远比函数来的多当我们定义一个ui组件的时候，他只负责渲染页面，不去做任何逻辑操作的时候，这个时...
2020-01-23 14:51:46
378
原创 创建redux中的store
首先先安装redux，可以通过yarn add redux来安装也可以通过npm install --save redux//多数情况下，你还需要使用 React 绑定库和开发者工具。npm install --save react-reduxnpm install --save-dev redux-devtools首先需要先引入redux中createStore这个方法import...
2020-01-22 20:30:38
459
原创 Redux的工作流程
redux设计和使用的三项原则store要求必须是唯一的只有store能够改变自己的内容Reducer必须是纯函数（给定固定的输入，就一定会有固定的输出，而且不会有任何副作用；一旦这个函数里有setTimeout或者说是Ajax请求或者是和日期相关的内容，他都不在是个纯函数了；对参数进行修改，又称作副作用）Redux = Reducer + Flux。react在2013年开源的时候，...
2020-01-22 15:44:04
534
原创 使用react-transition-group实现动画
react中使用css动画方式，但是在实际中使用这些开发的方式很少，主要是涉及到js动画，便没法处理了。这时，可以使用react-transition-group这个第三方模块来实现更加复杂的动画。首先打开github，搜索react-transition-group，或者直接网址进入https://github.com/reactjs/react-transition-group，之后进入主文...
2020-01-21 22:04:32
253
原创 react中使用css动画效果
index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementById('root'));App.jsimport React,{Component,Fragmen...
2020-01-21 18:09:57
284
原创 使用新版的Charles配置map local进行接口数据模拟仍然出现404错误
首先一开始的时候按照了正常的步骤，点击Tools—>map local进行配置，http请求、host地址、port端口、path路径以及本地的路径和json内容都没有问题，但是当点击ok，重新刷新页面的时候，仍然出现了404的错误。这是由于使用了最新版的Charles，新版的Charles，如果默认使用localhost作为地址的话，无法抓取本地的数据，会一直抓线上的数据，所以才导致...
2020-01-21 16:57:14
1417
原创 react提升代码性能
react提升代码性能的点1、绑定如果改变函数作用域的话放在constructor里面做，这样可以保证整个程序的函数作用域绑定操作只会执行一次，而且避免子组件的无谓渲染。2、内置的setState是个异步操作，多次数据的改变变成一次，这样可以降低虚拟dom的比对频率3、底层用虚拟dom，同层比对，key值等概念，来提升虚拟DOM比对的速度，从而提升react的性能4、借助shouldCom...
2020-01-21 15:35:43
148
原创 react——虚拟DOM的diff算法
复制代码1、state 数据2、jsx模板3、生成虚拟dom（虚拟DOM就是一个js对象，用它来描述真实DOM）['div', {id:'abc'}, ['span', {}, 'hello world']]通过这样的一个js对象，我们就可以表述上面的dom结构了4、用虚拟dom的结构，生成真实的dom，来显示<div id='abc'><span>hello...
2020-01-21 13:43:10
310
原创 react中的虚拟dom
当组件的state和props发生变化的时候，组件的render函数会重新执行，组件会被重新进行渲染，react中实现这种重新渲染，他的性能是非常高的，因为他引入了一个虚拟DOM的概念。当state发生变化,render函数会重新执行，重新的去渲染一次页面。假设没有react,我们自己要实现这个功能，那应该怎么去实现呢？我们来理个思路第一种方案1、state 数据2、jsx模板3、把数据...
2020-01-20 22:51:21
147
原创 PropTypes与DefaultProps
每个组件都有自己的props参数，这些组件接收外部传来的props，他的类型要做一个校验，也就是说对组件做属性强校验。。这里涉及到两个基础的概念，叫做propTypes 和defaultProps。第一步引入：todoItem为组件，只是举一个例子，可以换成其他的。设置content属性类型为字符串，handleItemDelete为函数，index为数字。一般开发的时候都建议把Propty...
2020-01-20 20:51:32
196
原创 安装命令
只是一个初学者，把一些命令放在一起，方便自己的查找和记忆安装reactnpx create-react-app my-appcd my-appnpm startnpm install安装Ant Designnpm install antd --save//引用样式import 'antd/dist/antd.css';安装axiosnpm install axios --...
2020-01-18 13:46:27
219
原创 React的前端路由
路由指的是根据网址访问的url的不同，代码能展示出来不同的页面内容前端路由：根据用户访问路径的不同，展示不同的内容，在react中路由指的是根据用户路径的不同，给用户展示不同的组件。安装路由： npm install react-router-dom --save安装完成需要引入三个不同的组件import { BrowserRouter,Route,Link} from 'react-rou...
2020-01-17 14:04:25
316
原创 React生命周期
React生命周期： 在react中，生命周期函数指的是组件在某一时刻会自动执行的函数。 constructor虽然也会自动执行，但不是react所独有的，可以理解成普通的类的生命周期函数 &nb...
2020-01-16 21:34:37
130
原创 React的ref获取dom元素
react声名式开发可以和其他框架并存组件化。单向数据流，即父组件可以改变子组件的数据，但是子组件一定不能直接改变父组件的数据，必须调用父组件的方法来改变父组件的数据函数式编程Props,State与render函数Props：指的属性，父组件通过属性的形式，向子组件传递参数State：组件中的数据render：渲染组件之中的内容关系：当组件初次创建的时候，render函...
2020-01-16 16:54:39
4487
原创 react组件的拆分与传值
父组件通过属性的形式向子组件传值子组件想要和父组件通信，调用父组件传递过来的方法父组件：import React ,{Component, Fragment} from 'react';import TodoItem from './TodoItem';import './style.css';//react 响应式//定义组件class TodoList extends Com...
2020-01-16 14:22:22
132
原创 react基础入门
渲染react的两种方法，render只能对单个进行渲染ReactDOM.render(<App />,document.getElementById('root'))ReactDOM.render( <div> <App /> <Text /> </div>, document.getElementById('root...
2020-01-16 11:42:09
149
原创 react——开发环境准备create a new react app
1.首先打开react官网点击getStarted按钮—>点击create a new react app往下翻找到三行代码。如果是window用户在桌面按住shift+右击可以看到‘在此处打开命令窗口’接下来依次输入这三行命令，如果运行不动太卡，可能是网络问题，试着连接一下手机热点。npx create-react-app my-appcd my-appnpm start...
2020-01-14 15:39:13
242
原创 vscode使用git
1. 找到项目路径 打开gitbash输入git config --global user.name "your name"git config --global user.email "your email address"2. 点击新建代码仓库新建仓库3. 复制代码，并在gitbash中输入4. git add把要提交的文件的信息添加到暂存区中。当使用 git commi...
2020-01-12 19:55:22
239
原创 document.documentElement
clientWidth、clientHeightdocument.documentElement.clientWidth获取浏览器窗口文档显示区域的宽度，不包括滚动条。document.documentElement.clientHeight获取浏览器窗口文档显示区域的高度，不包括滚动条。浏览器兼容性所有浏览器解释都一样。offsetWidth、offsetHeight...
2019-12-16 20:22:32
385
原创 移动开发中常见问题
H5标签-浏览器兼容对于h5标签的浏览器兼容行，我们可以查看一个网站can i use,例如搜索header，可以看到他所支持的浏览器兼容。或者，下载html5shiv,在代码中引入js文件。JS-浏览器兼容...
2019-11-28 16:54:04
92
原创 flex布局基本概念
box-sizingbox-sizing: content-box;宽高只是内容的宽高，加入边框和内边距向外扩张box-sizing: border-box;宽高是总盒子的宽高，加入边框和内边距向内压缩。flex布局采用flex布局的元素，成为flex容器.box{display:flex|inline-flex;}flex容器的所有子元素自动成为容器成员，称为flex项目，孙子元素并...
2019-11-27 09:52:39
153
原创 移动web开发基础概念
物理像素（physical pixel） 也称设备像素（dp:device pixel）css像素 也称逻辑像素（logical pixel）或者是设备独立像素（dip:device independent pixel）实际开发中使用的像素，四个物理像素为一个css像素设备像素比（dpr:device pixel ratio）dpr = 设备像素/css像素（缩放比是1的情况下）一个方向上...
2019-11-22 16:59:16
128
原创 关键字
instanceof变量是否是对象的实例//var arr = new Array();//alert(arr instanceof Array);//true//alert(arr instanceof Object);//truefunction test(){}var obj = new test();//alert(obj instanceof test);//trueal...
2019-10-17 10:31:18
64
原创 对象
1.字面式声明var person = { name:"zhangsan", age:26, sex:"man", eat:function(fds){ alert("我在吃"+fds); }, play:function(ga){ alert("我在玩"+ga); }}alert(person.age);person.eat("面条");alert(person ...
2019-10-16 18:35:24
104
原创 简易计算器
实现一个简易计算器首先是最简单也是最容易做到的，但不建议使用，将结构的样式糅杂到了一起。+会起到连接符的作业，因此如果不加+号，1+1=11，使用+号可以自动避免。-/*则不用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简...
2019-10-16 08:44:01
369
原创 函数的参数
函数的参数有实参和形参形参可以当作局部变量本质上是将实参赋值给形参传递对象时，相当于obj=person,引用类型赋值的是地址，保存在堆内存中，指向同一个对象，person对多一个namevar person = {};function setPerson(obj) {//形参 obj.name = 'xm';}setPerson(person);//实参参数的个数1.当实参...
2019-10-14 17:22:35
77
原创 函数的调用
函数的调用分为普通函数的调用，方法调用，构造函数的调用和间接调用普通函数普通函数分为命名函数和匿名函数命名函数调用function add() { // body...}add();匿名函数调用匿名函数的调用分为三种，使用一个变量保存匿名函数var add = function () { // body...};add();调用的时候直接加（）-----自调(fu...
2019-10-14 16:07:53
312
原创 原生js实现图片轮播效果-JavaScript
功能：实现图片每隔1秒切换一次；当鼠标停留在整个页面上，图片不进行轮播；鼠标移动到切换页选项上，出现该选项对应的图片，并且切换页选项的背景颜色发生相应的变化；当图片发生轮播切换时，再不滑入选项卡的前提下，相应的选项卡背景颜色也自动发生变化；点击上一张按钮，出现上一张图片，点击下一张按钮，出现下一张图片，同时选项卡的背景颜色也发生变化。以下为实现代码：首先为html代码，创建一个大盒子...
2019-10-09 20:39:26
245
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人