- 博客(54)
- 资源 (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
195
1
原创 JS对象分类
js分类原因：分类就可以少占内存new语法将函数与原型结合函数的特征都有prototype属性，存储原型地址每个prototype都有一个constructor属性，是来告诉别人构造这个属性的爹是谁new语法的写法和特征newX()特征自动创建空对象自动为空对象关联原型，原型地址指定为X.prototype自动将空对象，作为this关键字运行构造函数（构造函数是指创建对象的函数）自动return thisfunction Person(name, age) {//（）里写变量
2020-05-10 22:38:32
486
原创 JS对象
前言回顾之前的七种数据类型：number string bool symbolnull undefinedobject五个falsy值null undefined0 NaN‘’（空字符串）对象的概念定义无序的数据集合键值对的集合①属性名：每个key都是对象的属性名（property）②属性值：每个value都是对象的属性值写法let obj = { 'n...
2020-05-07 21:04:31
237
原创 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
318
原创 浅析URL
前言首先在前面的HTML文章中提到李爵士发明了万维网WWW，实际上它是由URL、HTTP、HTML三部分组成的，即WWW=URL+HTTP+HTML，接下来就来介绍一下URL。URLURL是(UniformResourceLocator,统一资源定位符)的缩写,它是WWW的统一资源定位标志,就是指网络地址。URL的标准格式： [协议类型]????/[服务器地址]:[端口号]/[资源层级UNIX文...
2020-05-02 22:09:00
282
原创 HTML常用标签
一、a 标签的用法HTML 的 a标签可以创建通向其他网页、文件、电子邮件地址、电话、同一页面内的位置或任何其他 URL 的超链接。a标签的常用属性：1. hrefhref 属性给出超链接指向的网址。它的值应该是一个 URL 或者锚点。• 网址链接通过a标签表示，用户点击后，浏览器会跳转到指定的网址。下面的三条代码都定义了超链接，浏览器会显示出三个Google，且下面自带下划线。用户点...
2020-05-02 21:44:31
461
原创 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
310
原创 CSS知识总结
一、CSS 基础知识1. 文档流（Normal Flow）文档中文档的流动方向，默认inline从左到右，block从上到下inline流动方向：元素从左到右，到达最右边才会换行，默认合并且遇到行尾折行；宽度：为内部 inline 元素的和，不能用 width 指定；高度：由 line-height 间接确定，跟 height 无关；没有内容的 inline 元素高度为 line-...
2020-04-24 14:10:56
130
原创 使用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
248
原创 HTML入门笔记1
从头开始，从新再来，以下仅是记录自己重新学习HTML的过程HTML的发明HTML是超文本标记语言。于1990年左右，被Tim Berners-Lee发明出来，2004年被英国女皇颁发了大英帝国爵级司令勋章而被称为李爵士，更是在2017年获得了图灵奖。李爵士的成就不仅于此 ，还自己编写了世界上第一个浏览器与服务器，同时还利用自己写的浏览器访问了自己写的服务器，就此发明了WWW，包含了HTML...
2020-04-20 14:03:04
219
原创 使用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
216
原创 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
387
原创 UI组件和容器组件和无状态组件
UI组件负责页面的渲染，容器组件负责页面的逻辑无状态组件—>当我们的组件只有一个render函数的时候，就叫做无状态组件无状态组件就是一个函数，当一个普通的组件只有render函数的时候，可以用一个无状态组件，来替换普通组件无状态组件的性能比较高，他就是一个函数，普通的组件，执行起来的东西远比函数来的多当我们定义一个ui组件的时候，他只负责渲染页面，不去做任何逻辑操作的时候，这个时...
2020-01-23 14:51:46
354
原创 创建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
446
原创 Redux的工作流程
redux设计和使用的三项原则store要求必须是唯一的只有store能够改变自己的内容Reducer必须是纯函数（给定固定的输入，就一定会有固定的输出，而且不会有任何副作用；一旦这个函数里有setTimeout或者说是Ajax请求或者是和日期相关的内容，他都不在是个纯函数了；对参数进行修改，又称作副作用）Redux = Reducer + Flux。react在2013年开源的时候，...
2020-01-22 15:44:04
524
原创 使用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
240
原创 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
256
原创 使用新版的Charles配置map local进行接口数据模拟仍然出现404错误
首先一开始的时候按照了正常的步骤，点击Tools—>map local进行配置，http请求、host地址、port端口、path路径以及本地的路径和json内容都没有问题，但是当点击ok，重新刷新页面的时候，仍然出现了404的错误。这是由于使用了最新版的Charles，新版的Charles，如果默认使用localhost作为地址的话，无法抓取本地的数据，会一直抓线上的数据，所以才导致...
2020-01-21 16:57:14
1381
原创 react提升代码性能
react提升代码性能的点1、绑定如果改变函数作用域的话放在constructor里面做，这样可以保证整个程序的函数作用域绑定操作只会执行一次，而且避免子组件的无谓渲染。2、内置的setState是个异步操作，多次数据的改变变成一次，这样可以降低虚拟dom的比对频率3、底层用虚拟dom，同层比对，key值等概念，来提升虚拟DOM比对的速度，从而提升react的性能4、借助shouldCom...
2020-01-21 15:35:43
123
原创 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
299
原创 react中的虚拟dom
当组件的state和props发生变化的时候，组件的render函数会重新执行，组件会被重新进行渲染，react中实现这种重新渲染，他的性能是非常高的，因为他引入了一个虚拟DOM的概念。当state发生变化,render函数会重新执行，重新的去渲染一次页面。假设没有react,我们自己要实现这个功能，那应该怎么去实现呢？我们来理个思路第一种方案1、state 数据2、jsx模板3、把数据...
2020-01-20 22:51:21
123
原创 PropTypes与DefaultProps
每个组件都有自己的props参数，这些组件接收外部传来的props，他的类型要做一个校验，也就是说对组件做属性强校验。。这里涉及到两个基础的概念，叫做propTypes 和defaultProps。第一步引入：todoItem为组件，只是举一个例子，可以换成其他的。设置content属性类型为字符串，handleItemDelete为函数，index为数字。一般开发的时候都建议把Propty...
2020-01-20 20:51:32
169
原创 安装命令
只是一个初学者，把一些命令放在一起，方便自己的查找和记忆安装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
193
原创 React的前端路由
路由指的是根据网址访问的url的不同，代码能展示出来不同的页面内容前端路由：根据用户访问路径的不同，展示不同的内容，在react中路由指的是根据用户路径的不同，给用户展示不同的组件。安装路由： npm install react-router-dom --save安装完成需要引入三个不同的组件import { BrowserRouter,Route,Link} from 'react-rou...
2020-01-17 14:04:25
292
原创 React生命周期
React生命周期： 在react中，生命周期函数指的是组件在某一时刻会自动执行的函数。 constructor虽然也会自动执行，但不是react所独有的，可以理解成普通的类的生命周期函数 &nb...
2020-01-16 21:34:37
120
原创 React的ref获取dom元素
react声名式开发可以和其他框架并存组件化。单向数据流，即父组件可以改变子组件的数据，但是子组件一定不能直接改变父组件的数据，必须调用父组件的方法来改变父组件的数据函数式编程Props,State与render函数Props：指的属性，父组件通过属性的形式，向子组件传递参数State：组件中的数据render：渲染组件之中的内容关系：当组件初次创建的时候，render函...
2020-01-16 16:54:39
4460
原创 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
125
原创 react基础入门
渲染react的两种方法，render只能对单个进行渲染ReactDOM.render(<App />,document.getElementById('root'))ReactDOM.render( <div> <App /> <Text /> </div>, document.getElementById('root...
2020-01-16 11:42:09
124
原创 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
232
原创 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
213
原创 document.documentElement
clientWidth、clientHeightdocument.documentElement.clientWidth获取浏览器窗口文档显示区域的宽度，不包括滚动条。document.documentElement.clientHeight获取浏览器窗口文档显示区域的高度，不包括滚动条。浏览器兼容性所有浏览器解释都一样。offsetWidth、offsetHeight...
2019-12-16 20:22:32
349
原创 移动开发中常见问题
H5标签-浏览器兼容对于h5标签的浏览器兼容行，我们可以查看一个网站can i use,例如搜索header，可以看到他所支持的浏览器兼容。或者，下载html5shiv,在代码中引入js文件。JS-浏览器兼容...
2019-11-28 16:54:04
82
原创 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
145
原创 移动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
115
原创 高德地图——公交规划
高德地图——公交规划插件：plugin=AMap.Transfer1.使用关键字——只支持数组的前两个内容，第三个无效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <...
2019-11-14 16:36:31
289
原创 高德地图——骑行导航
高德地图——骑行导航插件：plugin=AMap.Riding //中间不能有途径1.骑行路线——使用keywordnew AMap.Riding({ map:map, panel:'panel'}).search([ {keyword:startNode.value,city:'北京'}, //起点 {keyword:endNode.value,cit...
2019-11-14 16:26:35
840
原创 高德地图——步行导航
高德地图——步行导航插件：plugin=AMap.Walking步行导航和驾驶导航几乎是一样的，唯一的不同便是导入的插件不同，步行导航的全程都是蓝色的，而驾驶导航线会有红色拥堵，绿色通畅的颜色。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
2019-11-14 15:55:28
924
2
原创 高德地图——驾驶路线
高德地图——驾驶路线插件：AMap.Driving方法一：规定路线new AMap.Driving({ map:map, panel:'panel' }).search([ {keyword:起点,city:'北京'}, {keyword:终点,city:'北京'} ],function(status,data){ ...
2019-11-14 15:47:49
1228
原创 高德地图-2D转换为3D
手动添加，同时也需要手动修改倾斜度var map = new AMap.Map('container',{ zoom:17, pitch:90, center:[116.379391,39.861536], viewMode:'3D', //变成了3d 地图了 buildingAnimation:true // 可以让显示的建筑物变成动画现实});...
2019-11-13 20:35:13
3634
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人