- 博客(33)
- 收藏
- 关注
RSS订阅原创 react路由
这里写目录标题react 路由SPA优点:缺点:路由分类1.前端路由2.后端路由React Router安装组件BrowserRouter 组件HashRouter 组件Route 组件基本使用exactLink组件NavLink组件withRouter 组件(高阶组件，高阶函数，高阶路由)Switch 组件Redirect 组件hooks (Router5.0之后出现的)向路由组件传递参数编程式路由导航总结:react 路由当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用
2021-08-01 19:55:41
293
原创 React Hook和React-router的基本使用
目录Hook好处:Hook可以解决的问题:目前官网提供的Hook APIuseStateuseEffectuseRef自定义hook1. 创建自定义hook2.使用自定义hookreact-router基本使用1.安装2.导入3.使用总结:HookHook 是 React 16.8 的新增特性,React 里面的 Hook 是一个函数.好处:它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook可以解决的问题:避免地狱式嵌套，可读性提高。函数式组件，
2021-07-29 20:56:30
952
原创 react (组件通信,生命周期和非受控组件)
目录组件通信父传子子传父兄弟传值跨级传值组件的生命周期生命周期(旧)生命周期(新)生命周期函数详解受控组件非受控组件总结:组件通信父传子案例:父组件发送数据,子组件接收并渲染父组件 App.jsimport React, { Component } from 'react'import FriendList from './FriendList'class App extends Component { state = { name: '张三' } render() {
2021-07-27 19:27:24
226
原创 react(一)
reactreact是什么?react是一个JavaScript 库 ,能够高效、快速的构建用户界面它是一个轻量级库 , 它遵循组件设计模式、声明式编程范式和函数式编程概念react特点1.声明式编程 −React采用声明范式，可以轻松描述应用。2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。组件
2021-07-26 21:19:32
187
原创 vue3 入门
vue3Vue是一套用于构建用户界面的渐进式框架。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。目前最新版本是Vue3.x。Vue3 支持 vue2 的大多数特性更好的支持 Typescript性能提升打包大小减少 41%初次渲染快 55%, 更新渲染快 133%内存减少 54%使用 Proxy 代替 define
2021-07-02 19:48:23
1354
原创 webpack 打包ts
当我们单纯用ts开发一个公有库时，没有了脚手架的帮助，我们需要借助webpack完成该ts项目的打包1.初始化npm init -y2.自动生成webpack.config.js文件tsc --init3.安装tsnpm install -D typescript4.安装npm install -D webpack@4.41.5 npm install -D webpack-cli@3.3.10npm install -D webpack -dev-server@3.10.2
2021-07-01 20:08:08
518
原创 TypeScript 常用语法(二)
上一篇文章讲了一下TypeScript的一些用法,这一篇讲剩下的函数函数封装了一些重复使用的代码,在需要的时候直接调用函数是 JavaScript 应用程序的基础，它帮助你实现抽象层，模拟类，信息隐藏和模块。在 TypeScript 里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。js中书写方式命名函数function aa(){ console.log('hello')}aa() //hello匿名函数(function(){ console.log('he
2021-06-30 17:33:08
405
原创 TypeScript 常用语法(一)
基础类型TypeScript支持与JavaScript几乎相同的数据类型注意:1.在TypeScript中变量声明了是什么类型,它赋的值也必须和声明的类型一致,不然会报错 2.声明赋值可以同时进行,ts会自动对变量进行类型检测 3.下面赋的值会覆盖上面的值布尔//声明完直接赋值let aa:boolean=true// 声明一个变量a,同时指定它的类型为number,然后再赋值let aa:booleanaa=true数值//声明完直接赋值let num:number=
2021-06-29 20:22:10
409
1
原创 TypeScript安装与基本使用
TypeScript初识TypeScriptTypeScript的介绍TypeScript是由微软开发的开源,跨平台的编程语言,它是TypeScript的超集,最终会被编译为JavaScript代码TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以运行在TypeScript环境中TypeScript是为大型应用的开发而设计,并且可以编译为JavaScriptTypeScript特点TypeScript主要有三大特点:1)始于JavaScript,
2021-06-27 21:12:16
315
2
原创 小程序 生命周期
生命周期指的就是小程序从创建到销毁的过程小程序生命周期分为应用生命周期和页面生命周期应用生命周期影响页面生命周期应用生命周期应用生命周期是在app.js里面调用的属性说明onLaunch应用第一次启动的就会触发的事件onShow应用被用户看到onHide用户被隐藏onError应用的代码发生了报错的时候就会触发onPageNotFound页面找不到就会触发代码示例:onLaunch第一次启动的时候就会触发 onLaunchApp({
2021-06-25 22:18:52
2309
原创 websocket(基础使用)
什么是websocket?WebSocket是一种网络通信协议,很多高级功能都需要它websocket基于tcp协议,和http都是网络传输协议为什么要使用websocket?因为 HTTP 协议有一个缺陷：通信只能由客户端发起。websocket特点:（1）建立在 TCP 协议之上，服务器端的实现比较容易。（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。（3）数据格式比较轻量，性能
2021-06-23 20:50:34
657
4
原创 小程序 (组件,组件通信和生命周期)
1.常见组件1.1 view代替原来的div标签<view>div标签</view>1.2 text文本标签属性名类型说明selectableBoolean文本是否可选decodeBoolean是否解码,可以解析 1.3 image图片标签,image组件默认宽度320px,高度240px<image src="/icon/home.png"/>1.4 icon 图标属性名说明
2021-06-22 20:25:25
253
原创 微信小程序(基本使用)
什么是小程序?一种不要安装下载即可使用的应用,不用关心安装过多应用,小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。整个小程序所有分包大小不超过 8M单个分包/主包大小不能超过 2M好处:平台封闭，上手简单开发成本低用户体验好使用方便安装:首先下载安装微信开发者工具启动:可以使用微信扫码登录登录成功后会出现项目列表新建项目注意:他里面有个AppID,最好注册一个,不推荐使用测试号点击注册,按
2021-06-21 21:26:23
271
原创 git(一) 安装与基本使用
gitGit是分布式版本控制系统，它就没有中央服务器的，每个人的电脑就是一个完整的版本库Git 是一个开源的免费的分布式版本控制系统,可以更高效的处理项目文件。它的性能好,内存小,运行快,易上手。与CVS、Subversion一类的集中式版本控制工具不同，它采用了分布式版本库的作法，不需要服务器端软件，就可以运作版本控制，使得源代码的发布和交流极其方便。状态同时，git 又提供了三种（也可以说是四种）不同的记录状态已修改（modified）已暂存（staged）已提交（committed）
2021-06-10 21:08:58
128
1
原创 webpack(三) plugin,WebpackDevServer和热更新
pluginplugin是webpack的一个插件机制，扩展webpack现有的功能它为项目的构建提供了更加广泛的能力 webpack中的plugin，简单的理解就是对于webpack现有功能的扩展，比如打包优化、文件压缩功能。 plugin的范围更大，作用也更强。插件HtmlWebpackPlugin打包完成后,该插件会自动生成一个html5文件,并把生成js模块引入html1.1 安装npm install -D html-webpack-plugin1.2配置文件//引入co
2021-06-09 21:08:56
274
原创 webpack(二) loader
loaderwebpack可以把任意文件数据作为模块进行处理,包括:js文件,非js文件,css,图片等等,webpack在默认情况下只能操作js文件,如果想操作非js文件我们可以通过loader什么是loader？loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中处理一个文件可以使用多个loader，loader的执行顺序是和本身的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行。第一个执行的loader接
2021-06-08 20:41:21
682
原创 webpack(一) 安装,打包和打包配置
webpack一.介绍webpack是一个模块打包工具，通过依赖处理模块，并生成那些模块静态资源。它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qdc5eVDC-1623141971720)(C:\Users\dell\AppData\Roaming\Typora\typora-user-imag
2021-06-08 16:47:09
426
原创 js判断数据类型的方法
typeoftypeof 返回数据类型,用于判断基本类型,有string,number,undefined,array,object,function,当判断object,array时都会判定为object,有局限性 console.log(typeof('q')) console.log(typeof(11)) console.log(typeof(a)) console.log(typeof([])) console.log(type
2021-06-05 16:45:27
212
原创 vue 指令
指令:指令是带有v-前缀的特殊attribute，一些指令能够接收一个参数，在指令名称之后以冒号表示。v-html:可以解析html标签,更新覆盖元素中原有的元素内容v-text:不能解析标签,更新覆盖元素中原来的文本内容<h1 v-html='name'>qqq</h1>//小明<h1 v-text='name'>qqq</h1>//<p>小明</p> var vm = new Vue({ el:"
2021-06-05 15:52:04
94
原创 js元素节点操作
节点操作创建var font = document.createElement('font'); // 创建元素节点document.body.appendChild(font); // 把元素节点追加到DOM树上克隆node.cloneNode([true])var xxx1 = document.querySelector('div.c1');var xxx2 = xxx1.cloneNode(true); // true 表示连同子元素也复制document.body
2021-06-05 14:32:37
165
原创 js 选取节点的几种方式
选取节点document.getElementById()通过 id 选取<div id="menu"></div><script> let menuNode = document.getElementById('menu') console.log( menuNode ) // 节点对象 // 也可以直接通过 id 操作, 因为兼容问题,所以不太推荐 console.log( menu )</script>
2021-06-05 14:30:23
1074
原创 es6深拷贝和浅拷贝的区别
浅拷贝:数组和对象直接等号赋值的通常是浅拷贝 一个发生变化,另外一个也会跟着变,他只是指向另外一个地址//对象var obj1 = {'name':"张三"}var obj2 = obj1console.log(obj1) //{name: "李四"}console.log(obj2) //{name: "李四"}obj1.name="李四"console.log(obj2) //{name: "李四"}//数组 var arr1 = [11,22,33] var arr2 = a
2021-05-29 16:43:28
282
原创 var let const的区别
var:1.在es6出现之前就是用var声明变量的,可以重复定义var a = 1; //全局变量function foo(){ var a = 2;//局部变量 console.log(a);//2}foo();如果在声明变量时，省略 var 的话，就会变成全局变量var a = 1; //全局变量function foo(){ a = 2;//全局变量}foo()console.log(a)//2let和const是es6新增的let:1.声明变量,有块
2021-05-29 16:16:51
55
原创 css 实现图片轮播
轮播图通过动画,关键帧,控制图片水平向左移动实现轮播,主要通过让图片移动,图片宽为600所以每次让它向左水平移动600,然后div设置超出隐藏,实现轮播效果div中超出隐藏之前的效果最终效果代码html <div class="c1"> <div class="tp"> <img src="./1.png"> <img src="./2.png"> <img src="./3.png"> <img
2021-05-28 15:07:27
3127
1
原创 vue中methods computed watch的区别
methods 普通方法:当页面发生变化时,它就会触发一次,没有缓存computed 计算属性:当他所依赖的属性发生变化时,计算属性会重新计算,有缓存watch 监听:当他所监听的属性发生变化时,会自动调用对应的监听方法,它的名字必须和所监听属性的名字一致, 多用于异步处理,开销比较大的运算...
2021-05-27 08:37:00
103
原创 vue 插槽slot
什么是slot?slot就是就是占位符,用表示,它显示与隐藏以及最后用什么样的html模板显示由父组件控制。1.普通插槽在子组件中使用 占位,就可以在组件的标签中输入内容,放到插槽位置显示<div id="box"> <aa>2222</aa> </div> <template id='aaa'> <div> <slot></slot>
2021-05-22 18:06:48
157
原创 vuex
什么是vuexvuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享好处:1.能够在vuex中,集中管理共享的数据,易于开发和后期维护2.能够高效地实现组件之间的数据共享,提高开发效率3.存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步vuex的五个属性:1.state:提供唯一的公共数据源,所有共享数据都要统一放到Store的State中进行存储const store = new Vuex.Store({ state:{ name:"张三
2021-05-21 19:00:52
56
原创 vue生命周期(通俗易懂)
一、什么是生命周期生命周期就是vue实例从创建到销毁的过程,分为创建,挂载,更新,销毁四个阶段生命周期图:二、生命周期函数注意:严格区分大小写创建阶段:1.beforeCreate(创建之前):创建了一个空的vue实例,里面没有data,methods,只有它自带的属性方法2.created(创建之后):里面有data和methods,可以操作挂载阶段:1.beforeMount(挂载之前):模板已经编译好了,还没有渲染2.mounted(挂载之后):挂载好了,页面已经运行了更新阶段
2021-05-21 09:46:50
212
原创 javascript !和!!区别
!!一般用来将后面的表达式转换为布尔型的数据（boolean） 因为javascript是弱类型的语言（变量没有固定的数据类型）所以有时需要强制转换为相应的类型1.！取反,可将变量转换成boolean类型，null、undefined和空字符串取反都为true，其余都为false。 var a=!'11' console.log(a) //false2.!! 常常用来做类型判断，用!! 一个！是取反 再一个！又取反 相当于把这个数据转换为boolen类型了undefined , null 返回
2021-05-17 21:11:14
177
原创 element ui 表单提交错误Error in v-on handler: “TypeError: Cannot read property ‘validate‘ of undefined“
今天写vue项目的时候,控制台一直报错,花了很长时间都才解决,希望这篇文章对大家有帮助报错信息:解决方案:<el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model="ruleForm" status-icon ref="ruleForm" > <el-f
2021-05-17 20:30:16
1186
原创 js事件委托的原理、优缺点
事件委托什么是事件委托简单来说,事件就是onclick,onmousemove等等,委托就是把自己的事拜托给别人做,让别人来完成.原理利用冒泡的原理,把事件添加到父元素上,委托它们父级代为执行事件好处提高性能,减少内存,对于新添加的元素也会有之前的事件坏处1.事件委托基于冒泡,不冒泡的事件不支持2.层级过多,冒泡过程中可能被中间层阻止3.如果把所有事件都用事件委托,可能会出现事件误判,即不该触发事件的被绑定了...
2020-11-04 10:08:40
1125
1
原创 js创建对象常用的几种方法
创建对象常用的6种方法1.使用new关键字var a = new Object();2.通过字面量创建对象var b = { name:'张三';}3.工厂模式function aa(name,age){ //1) 原材料 var bb = new Object() bb.name = name; bb.age = age //2)加工 bb.create = function(){ console.log('我的名字
2020-11-02 10:29:29
794
原创 js放大镜效果
放大镜实现原理：使用2个div，里面分别放大图片和小图片,大div超出隐藏, 控制大div超出隐藏滚动条的距离=小方块的宽高*倍数 实现放大,主要根据小图大图同比例缩放实现,有很多种方式效果1.html <!-- 小div --> <div id='box1'> <!-- 小图 --> <img src="1.jpg" id='pic'> <!-- 小方块 --> <div id
2020-11-01 19:54:00
232
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人