- 博客(93)
- 收藏
- 关注
RSS订阅原创 React路由的详解
React路由路由SPA概念优点缺点SPA的页面切换机制前端路由React Router基于Web的React Router安装组件BrowserRouter 组件HashRouter 组件Route组件path属性component属性exact属性Link组件作用:to属性传递props动态路由NavLink组件activeStyleactiveClassNameisActiveSwitch组件Redirect组件withRouter组件(高阶组件, 高阶函数,高阶路由)hooks (Router5.0
2021-07-30 20:56:40
294
原创 React 属性, 函数式组件以及Hook
属性以及函数式组件,HookReact的五个属性PureComponentrefchildrendangerouslySetInnerHTMLkey的问题函数式组件React hooks什么是HookReact Hooks的优势常用HookHook的使用规则总结:五个属性: PureComponent、ref、children、dangerouslySetInnerHTML、keyReact的五个属性PureComponent个人理解是PureComponent 是类组件的情况下,它是用来继承的
2021-07-29 20:46:07
473
原创 react组件通信与生命周期
react组件通信与生命周期state和setState组件通信与数据流父级向子级通信 子级向父级通信 跨组件通信context-扩展组件的生命周期16.3版本之前的挂载阶段更新阶段卸载阶段16.3版本之后的挂载阶段更新阶段卸载阶段错误处理受控组件非受控组件总结state和setStatestate 组件自身状态setState(updater[,callback])updater 更新数据的方法/对象callback 更新成功后的回调函数异步: react通常会集齐一批需要更新的组件,然
2021-07-27 19:34:25
297
1
原创 React的初认识
文章目录React概念特性命令式编程和声明式编程基本使用React基于浏览器的模式JSX插值表达式输出数据类型列表渲染条件渲染列表循环注释JSX的注意事项基于自动化的集成环境模式 create-react-app-脚手架安装查看版本号创建项目项目目录结构说明命令脚本组件类式组件组件复用 - 数据抽取props和stateprops 与 state 的区别React中的事件总结React中文官网: https://reactjs.bootcss.com/英文官网: https://reactjs.org
2021-07-26 21:39:57
282
原创 这些TypeScript的基础三
这里写目录标题webpack类 class定义类面向对象的特点封装继承接口 interface泛型 genericwebpack通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS.步骤:初始化项目进入项目根目录,执行命令npm init -y — 创建package.json文件下载构建工具npm i -D webpack webpack-cli webpack-dev-server
2021-07-02 20:28:54
188
4
原创 盘点 TypeScript 的基础认识 二
TypeScript数组概述语法数组的长度和索引取值存值添加元素遍历数组函数概述意义使用函数参数形参实参返回值作用:基本使用变量作用域局部变量全局变量对象理解创建对象取值存值内置对象数组对象Web开发基础DOM操作获取元素类型断言操作文本内容操作样式操作事件注意总结数组概述数组 是用于存放多个数据的集合.注意: 数组中,通常是相同类型的数据.语法类型注解的组成: 类型+[]; (推荐)[](中括号)表示数组. 如果数组中没有内容就是一个空数组.如果有内容要用逗号隔开// 表示字符串类
2021-07-01 16:35:59
324
原创 TypeScript的初认识
TypeScript概述JavaScript概述TypeScript概述TypeScript特点语言特性安装解析TS的工具包原因安装第一个TS文件注释概念:两种形式: 单行注释 和 多行注释输出语句作用代码变量概念使用类型注解变量的命名规则规范数据类型概述基本数据类型运算符概述常见的运算符算术运算符赋值运算符自增/自减运算符比较运算符逻辑运算符语句条件语句概述if语句else语句三元运算符作用语法循环语句概念for循环断点调试概念break和continue作用breakcontinue注意总结概述Ja
2021-06-30 20:25:42
414
1
原创 小程序 项目介绍(三)
项目介绍搜索页 search效果需要完成的部分技术具体操作个人中心页 user效果需要完成的部分技术意见反馈页面 feedback效果需要完成的部分技术具体操作授权页面 auth效果需要完成的部分结算页面 pay效果需要完成的部分技术具体操作搜索页 search效果需要完成的部分获取输入框的值进行搜索和渲染点击 取消 按钮时,清除输入状态,修改页面模样技术小程序输入框组件输入框改变时,为了提高性能,使用防抖技术具体操作输入框绑定 值改变事件 input事件 的思路 1 获
2021-06-30 20:17:21
543
1
原创 小程序 项目介绍(二)
商品详情页 goods_detai效果需要完成的部分渲染商品详情数据点击图片点击收藏联系客服分享功能加入购物车技术swiper 组件本地存储实现收藏功能联系客服 小程序管理后台中直接添加即可富文本标签 渲染富文本小程序预览图片接口具体操作渲染商品的详情数据中把webp图片格式改为jpg格式的 goods_introduce:goodsObj.goods_introduce.replace(/\.webp/g,'.jpg')发送请求 获取数据点击轮播图
2021-06-29 20:17:51
766
1
原创 小程序 项目介绍(一)
项目介绍首页 index效果:需要完成的部分:具体操作:分类页面 category效果需要完成的部分技术具体操作web中的本地存储 和 小程序中的本地存储的区别:小程序中支持es7的async语法商品列表页 goods_list效果需要完成的部分技术具体操作注意总结首页 index效果:需要完成的部分:使用 tabbar 实现底部导航功能使用 自定义组件 实现头部搜索框加载 轮播图 数据加载 导航 数据加载 楼层 数据具体操作:使用 自定义组件 实现头部搜索框 时记得在js文件
2021-06-28 21:13:45
7518
7
原创 小程序基础(四)
小程序生命周期分为应用生命周期和页面生命周期应用生命周期属性属性类型默认值必填说明onLaunchfunction否监听⼩程序初始化 , 即应用第一次启动时就会触发的事件onShowfunction否监听⼩程序启动或切前台,即应用被用户看到onHidefunction否监听⼩程序切后台,即应用被隐藏了onErrorfunction否错误监听函数onPageNotFoundfunction否⻚⾯不存在监听函数
2021-06-25 20:13:51
185
1
原创 小程序基础(三) - 自定义组件
自定义组件类似vue或者react中的自定义组件1 创建自定义组件类似于页面, 一个自定义组件由json, wxml, wxss, js 四个文件组成在微信开发者工具中快速创建组建的文件结构, 在文件夹内components/Tabs,创建组件名为为Tabs声明组件⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明 — myHeader.json{ "component": true}编辑组件同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样
2021-06-24 21:02:35
178
1
原创 小程序 组件 的后续
小程序事件的绑定https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html小程序中绑定事件,通过bind关键字来实现.bindinput 绑定关键字 ,键盘输入时触发bindtap 当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数operation 获取自定义属性<!-- 1 需要给input标签绑定input事件 绑定关键字 bindi
2021-06-23 19:30:19
211
1
原创 小程序基础(二)
基础小程序事件的绑定样式WXSS1 尺寸单位`rpx`2 样式导入3 选择器4 小程序中使用less常见组件 1 `view` (代替原来的`div`标签)2 `text` --- 文本标签3 `image` --- 图片标签4 `swiper` --- 微信内置轮播图组件5 `navigator` --- 导航组件 类似超链接标签注意:总结:小程序事件的绑定https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-b
2021-06-22 21:08:27
319
1
原创 手把手带你小程序入门
小程序小程序官网概念作用特点环境准备第一个微信小程序微信开发者工具介绍小程序结构目录小程序配置文件代码编辑器技巧:模板语法注意:总结:小程序官网 https://developers.weixin.qq.com/miniprogram/dev/framework/概念微信小程序(Mini Program), 是一种不需要下载安装即可使用的应用,实现了应用’触手可及’的梦想,用户扫一扫即可打开应用.小程序要求压缩包的体积不能大于2M作用微信有海量用户,而且粘性很高,在微信里开发产品
2021-06-21 19:57:15
254
原创 原来Git及GitHub是这样的
Git及GitHubreset命令的三个参数hard和soft以及mixed的对比删除文件并找回比较文件分支管理Git基本原理 -- 哈希Git保存版本的机制注意:总结:reset命令的三个参数hard和soft以及mixed的对比–soft参数仅仅在本地移动HEAD指针–mixed参数在本地库移动HEAD指针重置暂存区–hard参数在本地库移动HEAD指针重置暂存区重置工作区删除文件并找回前提: 删除前, 文件存在时的状态提交到了本地库操作:
2021-06-19 13:29:26
116
原创 Git命令行操作
Git命令行操作本地库初始化设置签名查看git仓库中的文件状态: `git status`创建一个新的文件夹: `mkdir 文件夹名`创建一个新的文件: `vim 文件名` 或者是 `touch 文件名 `把工作区的"新建/修改"的文件提交到暂存区: `git add 文件名` 或者 `git add .`把文件从暂存区撤回到工作区: `git rm --catched 文件名`将暂存区的内容提交到本地库: `git commit 文件名` 或者`git commit -m "版本说明"`查看提交版本的历
2021-06-18 18:39:36
152
原创 关于 Git 的基础知识可能你还不知道
Gitgit版本控制工具版本控制工具分类优势安装检查git 是否安装成功检查git的版本号Git结构Git和代码托管中心本地库和远程库修改git里面框和文字的大小:注意:总结:git版本控制工具项目模块小组分开开发,每个人开发完后需要整合成一个整体的项目, 借助版本控制工具来解决.项目是开发, 是过程化的,用版本控制工具轻松切换每一个版本(v1.0 --> v2.0 --> v3.0)版本控制工具分类git(分布式版本控制工具)svn(集中式版本控制工具)区别:他
2021-06-11 16:47:32
169
原创 webpack入门介绍(三) ---plugins
plugins(插件) 官网: https://www.webpackjs.com/plugins/ 扩展webpack本身的一些功能, 他们会运行在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等.HtmlWebpackPlugin 在打包结束后, 自动生成一个html文件, 并把打包生成的js模块引入到该html中.安装npm install --save-dev html-webpack-plugin在 webpack.config.js 中引入和配置
2021-06-10 10:13:40
215
1
原创 webpack入门介绍(二) --- loaders
loaders 官网: https://webpack.js.org/loaders/// webpack.config.jsmodule.exports = { ...., module: { rules:[ { test:/\.txt$/, loader: 'raw-load' } ] }} 案例: (但是webpack会默认
2021-06-09 15:53:15
226
原创 webpack入门介绍(一)
webpack介绍webpack : 自动化构建工具(配置,构建,打包)webpack是使用node.js实现的模块化代码打包器. 可以把需要的模块打包成一个或者多个包.功能:代码打包器;可以打包所有的样式,图片,js,css预处理器;友好的模块化支持;处理js兼容问题;性能优化;安装 先安装node.js,再安装webpack (包管理器: year / npm)安装之前要先npm init初始化. (npm init -y)再输入下面命令安装(注意: 不推
2021-06-08 20:13:00
168
原创 模块化开发规范
模块化webpack是以模块化的方式来打包项目的.模块化 模块化是现代前端开发不可缺少的一部分. 功能:把复杂的问题分解成相对独立的模块,降低程序复杂性,提高代码的重用.利于团队协作开发与后期的维护和扩展 核心:独立的作用域如何导出模块内部数据如何导入外部模块数据ESM es5开始引入的模块化独立的模块作用域 一个文件就是模块,模块拥有独立的作用域,且导出的模块都自动处于严格模式下, 即 user strice(模块中,默认为严格模式)严格模式下,
2021-06-07 19:54:48
194
原创 移动web开发之流式布局(二)
移动web开发之流式布局(二)二倍图物理像素和物理像素比物理像素点值的是屏幕显示的最小颗粒,是物理真实存在的,这是厂商在出厂时就设置好了,比如苹果6/7/8是750*1334我们开发时候的1px不是一定等于一个物理像素的pc端页面,1个px通常情况等于1个物理像素的,但是移动端就不尽相同一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比pc端和早期的手机屏幕/普通手机屏幕:1px像素 = 1物理像素Retina(视网膜屏幕)是一种显示技术,可以把更多的物理像素点压缩至
2021-06-07 15:09:26
101
原创 移动web开发之流式布局(一)
移动web开发之流式布局(一)目标:能够知道移动web的开发现状能够写出标准的viewport 视口能够使用移动web的调试方法能够说出移动端常见的布局方案能够描述流式布局能够独立完成移动端页面移动端基础:浏览器现状:pc端常见浏览器: 360,谷歌,火狐,qq,百度,搜狗,IE 移动端常见浏览器: uc,qq,欧朋,百度手机,360安全,谷歌,搜狗手机,猎豹 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过了的内核,,国内尚无自主研发的内核,就像
2021-06-06 19:11:40
147
2
原创 Element.getBoundingClientRect()
Element.getBoundingClientRect()理解: getBoundingClientRect() 用于获取某个元素相对于视窗的位置集合.该Element.getBoundingClientRect()方法返回一个Object对象，该对象有6个属性: top, bottom, left, right, width, height;这里的top left和css中的理解很相似，width height是元素自身的宽高，但right bottom和css中的理解有点不一样. right是
2021-06-04 15:12:43
236
原创 移动端常见布局的重要知识点
移动端常见布局移动端的三种常见布局:1. 流式布局(百分百布局)2. flex弹性布局3. scss+rem+媒体查询 百分百布局:通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充流式布局方式是移动web开发使用比较常见的布局方式flex弹性布局:*是什么: flex是flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局。*优点: flex布局也叫弹性布局,可以
2021-06-03 20:02:26
223
原创 scss --- css的预处理器
scss(sass):概念:scss是css预处理器, 世界上最成熟、最稳定、最强大的专业级CSS扩展语言, scss是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.,能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表.其他css预处理器:sass(scss), less, Stylus, DT CSS, Switch CSS, Turbine, Switch CSS, CSS Cacheer原理:Sass本质就是在CSS的语法的基
2021-06-03 16:05:59
504
1
原创 2021年你还不知道的 移动端h5标签
移动端h5标签audio音频<audio src='音频文件地址' controls='controls' > </audio>常用属性:属性值描述autoplayautoplay如果出现该属性,则音频在就绪后马上播放(自动播放)controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮.looploop如果出现该属性，则每当音频结束时重新开始播放.(循环播放)mutedmuted规定视频输出应该被静
2021-06-03 08:27:28
829
2
原创 函数的节流与防抖
函数的节流与防抖前言事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题如果你碰到这些问题，那就需要用到函数节流和防抖了.函数的节流(throttle)函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次. 有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效.
2021-05-27 15:57:56
128
1
原创 详解 js中的async和await
js中的async和awaitawait 后面接一个会return new promise的函数并执行它await 只能放在async函数里async作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行 异步函数的调用跟普通函数一样async function timeout(){ return "helloworld";}console.log(timeout());console.log("我在异步函数后面，会先执行谁呢");/
2021-05-27 08:18:04
909
原创 详解 移动端语义化标签
移动端语义化标签 优点:为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构比<div>标签有更加丰富的含义，方便开发与维护方便搜索引擎能识别页面结构，有利于SEO方便其他设备解析（如移动设备、盲人阅读器等）有利于合作，遵守W3C标准注意:尽可能少的使用无语义的标签div和span在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利不要使用纯样式标签，如：b、font、u等，改用css设置需要强调的文本，可.
2021-05-24 20:31:29
298
原创 详解html所有标签,速看
移动端背景前提:HTML发展:1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）HTML2.0–1995年11月作为RFC1866发布HTML3.2–1997年1月，W3C推荐标准HTML4.0–1997年12月，W3C推荐标准XHTML1.0–2000年1月HTML5–2014年10月，W3C推荐标准URL 统一资源定位符:网址：www.baidu.com baidu.com完整的URL：http://www.baidu.com/xxoo/ooxx/
2021-05-24 20:02:10
229
原创 HTTP状态码和readyState状态码
HTTP 状态码当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求.HTTP状态码的英文为HTTP Status Code.常见的状态码总结:1开头: 信息,服务器收到请求,需要请求者继续执行操作2开头: 成功, 操作被成功接收并处理3开头: 重定向, 需要进一步的操作以完成操作4开头: 报错(前端的错,发送请求那里)5开头: 服务器的错,服务器在
2021-05-21 09:31:38
348
原创 vue的watch中的immediate什么意思
vue的watch中的immediate什么意思$watch() 监听某个值(双向数绑定)的变化, 一旦发生变化, 就调用引号里的方法, 从而达到change事件监听的效果.它的值包括选项的对象,选项对象有 handler: 其值是一个回调函数, 即监听到变化时应该执行的函数deep: 其值是true或false, 确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到)*immediate: 其值是true或false,确认是否以当前的初始值执行handler
2021-05-20 12:54:09
21141
原创 介绍前端vue项目中的文件
介绍前端vue项目中的文件public文件夹: 公共的,纯静态资源,打包后也不会改变文件的src文件夹: 放主要文件的 assets文件夹: 纯静态资源,放css和img
2021-05-20 09:40:47
1445
3
原创 js中!!()的作用
js中!!()的作用总体来说,就是 强制转换为布尔类型(boolean)JavaScript是弱类型语言,他其中有数据类型的转化,有显示类型转换和隐式类型转换.隐式类型转换定义: 不需要程序员定义，JavaScript会自动将某一个类型的数据转换成另一个类型的数据。JavaScript隐式类型转换的规则：将类型转换到环境中应该使用的类型。其他类型转换为布尔类型为假的情况:00.0" "NANfalseundefined可以隐式类型转换的情况：数字类型：在字符串环境下可以隐式
2021-05-17 20:24:30
781
2
原创 本地存储cookie,localStorage,sessionStorage
本地存储cookie,localStorage,sessionStoragecookie存放在客户端(浏览器中),存储大约4kb,存放条数大约20-50条,可以设置过期时间 var d = new Date(); //存储 document.cookie='sex2=女'; //没有设置过期时间,当你关闭浏览器之后,会自动删除掉 //存储并且设置过期时间 document.cookie='sex2=女;expires='+d.toUTCString(); //存储过期时间并设
2021-03-05 20:33:34
124
1
原创 ajax
ajaxajax详细描述Ajax 的全称是 Asynchronous JavaScript And XML （异步 JavaScript 和 xml ）通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax为什么要学Ajax之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但还是， Ajax 能让我们轻松实现 网页 与 服务器 之间的 数据交互Ajax应该用场景场景一：用户名检测注册用户时，通过 ajax 的形式，动态 检测用户名是否
2020-12-04 14:48:55
172
1
原创 $(document).ready()方法和window.onload方法的区别
$(document).ready()方法和window.onload方法的区别JQuery中$(document).ready()方法的作用类似于JavaScript中的window.onload方法，都可以在网页加载完成后执行一些操作，不过这两种方法严格意义上来说还是有很大区别的1.执行时间不同window.onload必须等到页面内的所有元素（）加载完毕后才能执行。注：所有元素是指包括页面结构、内容及所有关联文件，如站内与站外的js与css文件、图片等$(document).ready()是
2020-12-02 10:05:06
544
1
原创 倒三角代码
倒三角代码css代码 :<style> .a{ width: 0; height: 0; overflow: hidden; border: 100px solid transparent; border-right-color: red; }</style>html代码 : <div class="a"></div>示图 :
2020-11-11 16:27:23
605
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人