- 博客(34)
- 收藏
- 关注
RSS订阅原创 React 路由精讲(四)
一、前言 在上一篇博客中,只是在最后介绍了一下 react-router-dom 路由的 安装、BrowserRouter 和 HashRouter 的区别. 今天我们将共同学习 React 路由的剩余部分. Follow me ~二、Route 配置路径1. Route 组件通过该组件来设置应用单个路由信息，
2021-07-30 10:04:51
424
1
原创 React函数式组件、hooks及初识路由(三)
一、前言 昨天由于有一些事情耽搁,没有学习新的 react 以及发布博客. 而今天呢,这篇内容会分享类组件、函数式组件、hooks的一些方法以及初识 react 路由.接下来我们学习吧!二、children 组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容  
2021-07-29 21:13:26
640
原创 React 的生命周期、组建通信及非受控组件(二)
一、前言及补充内容 昨天学习了 初识、构建以及 React 事件的基本用法和一些注意点,我们大概也掌握了 React 框架的语法. 当然其中也落下了几个问题,我就统一放到这篇文章来处理了.1. 项目的启动报错问题(三种解决方案) 昨天在创建完项目之后,运行也是报了错误,困扰了很久,最终找到了这些方法,并且全部可行,希
2021-07-27 21:15:52
232
原创 初识、构建 React 及事件(一)
一、React 是什么? 1. React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript库 2. 使用 React 可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段被称为”组件” 3.
2021-07-26 21:59:00
123
原创 Vue3快速上手
一、认识 Vue3 一.1 了解相关信息Vue.js 3.0 “One Piece” 正式版在20209月份发布2年多开发, 100+位贡献者, 2600+次提交, 600+次PRVue3支持vue2的大多数特性Vue3更好的支持Typescript 一.2 性能提升打包大小减少41%初次渲染快55%
2021-07-02 20:56:03
307
1
原创 TypeScript基本用法
TypeScript基本用法一、什么是 TypeScript ?二、语言特性三、JavaScript 与 TypeScript 的区别?四、TypeScript 开发环境搭建五、基础语法六、TypeScript 与面向对象七、基本类型八、tsc 常用编译参数九、总结一、什么是 TypeScript ?TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 是由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用
2021-07-01 21:14:44
595
3
原创 uni-app的基本使用
uni-app的基本使用一、什么是 uni-app ?二、为什么要使用 uni-app ?三、uni-app 功能框架图四、安装五、初始化项目和运行项目六、项目目录和文件作用七、uni-app 的开发规范八、全局配置和页面配置九、配置 tabbar十、总结一、什么是 uni-app ? 官方文档 uni-app 是一
2021-06-30 18:25:27
443
原创 轻松理解事件冒泡、事件捕获和事件委托
相关概念1. DOM事件流 事件流包括三个阶段：捕获阶段: 事件从文档的根节点流向目标对象目标阶段: 在目标对象上被触发冒泡阶段: 回溯到文档的根节点2. 事件冒泡 事件从目标元素执行后逐渐向上执行它的祖元素被绑定的事件的现象3. 事件捕获 &
2021-06-29 21:07:40
190
原创 js数据类型中容易出错的细节
js数据类型中容易出错的细节一、前言二、number类型注意事项三、数据类型的转换规则四、typeof(数据类型检测)五、基本数据类型和引用数据类型的本质区别六、总结一、前言 Javascript的数据类型对于大家来说一点都不陌生，主要基本数据类型和引用数据类型，都是入门必学的知识点，而且在日常开发中，频繁使用。大家是否都掌握其中的一些细节呢？二、number类型注意事项
2021-06-28 20:38:02
162
原创 前端面试一定要掌握的十道面试题(带答案)
1、页面元素的隐藏方式和各自特点？ display:none; 设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。 visibility: hidden 这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排
2021-06-27 20:06:16
395
3
原创 用JS实现PC端淘宝查看商品图片放大镜效果
实现放大镜功能一、前言二、图示淘宝商品放大镜效果三、需要掌握的知识点四、放大镜实现原理五、放大镜代码及注释六、放大镜最终成果七、放大镜源码八、总结一、前言 今天翻阅文件夹看到了之前写过的一个 js 放大镜特效.之所以想要发布在博客上,是因为觉得这个特效里面包含有一定量程度的 js 常用知识点和逻辑性,觉得发出来挺好的,我自己也能在复习掌握一下.我们废话不多说,开整!二、图示淘宝商品放大镜效果 &n
2021-06-25 21:18:14
1787
3
原创 微信小程序基本用法3(四)
一、自定义组件类似 vue 或者 react 中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面一.1 创建自定义组件 一.1.1 创建组件创建 :类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成1.在 app.json 中新建页面2.在 和 pages 同级目录下 创建 components 文件夹3.在 commponents 里面 创建 Tab
2021-06-24 19:17:38
632
3
原创 微信小程序基本用法2(三)
一、navigator 导航组件 导航组件, 类似于超链接标签 一.1 属性值属性名类型默认值说明targetStringself在哪个项目上发生跳转,默认当前小程序,可选值 selft / miniProgramurlString当前小程序内的跳转链接open-typ
2021-06-23 19:52:00
737
1
原创 微信小程序基本用法1(二)
1、模板语法 WXML（WeiXin Markup Language）是框架设计的⼀套标签语言，结合基础组件、事件系统，可以构 建出页面的结构。1.1 小案例 1.1.1 先打开 app.json 文件,新建一个页面 1
2021-06-22 20:59:55
1037
1
原创 微信小程序介绍及配置(一)
一、介绍1、什么是微信小程序? 微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用，是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 全面开放申请后，主体
2021-06-21 21:54:31
1585
1
原创 Webpack打包(二)
Webpack打包一. 处理昨天的执行命令权限不够问题二. 环境配置三. 打包css样式四. 打包less样式五. 打包html资源六. 打包图片资源七. 打包其它资源八. 注意点九. 总结一. 处理昨天的执行命令权限不够问题 我们昨天在执行打包命令时,在 vscode 中会出现报错的问题,我们先来看一下在 vscode 中的报错信息 &
2021-06-13 14:31:18
128
2
原创 Webpack基础及打包应用(萌新必看!!!)(一)
Webpack1. Webpack是什么?2. 五个核心概念1. Webpack是什么? Webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler).前端的所有资源文件都会被作为模块处理. Webpack将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundler)2. 五个核心概念 &nbs
2021-06-10 20:23:13
155
原创 GitHub基本使用(三)
GitHub基本使用1. 什么是GitHub?2. 学习GitHub的好处3. 基本概念4. GitHub 官网5. GitHub 注册6. 创建远程仓库7. 上传远程仓库8. 克隆仓库9. 总结1. 什么是GitHub? GitHub是一个开源的托管服务,有点像代码的云.它以各种不同的编程语言托管您的源代码项目,并跟踪每次迭代所做的各种更改,该服务可以通过使用git(一种在命令行界面中运行的修订控制系统)来完
2021-06-09 21:59:44
174
原创 Git命令(二)
Git命令1. 需掌握的Linux常用命令2. 初始化仓库配置3. 乱码4. 文件目录操作命令5. 基本流程6. 删除7. 修复提交8. 版本回退9. 比较10. 分支11. 合并记录12. 标签13. 总结1. 需掌握的Linux常用命令clear: 清除屏幕上的窗口内容echo 'text content': 往控制台输出信息 "text content"II: 将当前目录下的子文件或者子目录平铺在控制台find '目录名(./)': 将对应目录下的子孙文件或者子孙目录平铺在控制台
2021-06-08 21:38:38
355
原创 Git的介绍及初始化仓库配置(一)
文章目录1.Git是什么?1.1官方解释1.2通俗说法2.svn和git之间的不同点2.1svn是什么?2.2svn和git的优缺点2.3什么是回滚?3.下载4.git目录每个文件的作用5.git怎样工作的?5.1状态5.2区域6.Git版本库创建注意点7.git config环境变量8.初始化仓库配置9.总结心得1.Git是什么?1.1官方解释GIT，全称是分布式版本控制系统，git通常在编程中会用到，并且git支持分布式部署，可以有效、高速的处理从很小到非常大的项目版本管理。分布式相比于集中式的最
2021-06-07 22:05:54
1016
原创 cookie、localStorage和sessionStorage的特点及用法
cookie一般由服务器生成,存放到客户端(浏览器中的)可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效.存储大约4Kb,存放条数30-50条左右,// Date时间函数var d = new Date() // 获取系统内置时间var o = d.getTime() // 获取当前的时间戳var b = d.getTime()+(7*60*60*24*1000) // 7天后的时间戳var b = d.getTime()+(6
2021-06-04 19:06:06
92
原创 闭包函数的特性及用法
文章目录闭包函数的本质三个特性闭包函数的好处闭包函数的坏处用法闭包函数的本质我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭
2021-06-04 15:00:14
178
原创 轻易掌握this关键字
面向对象语言中 this 表示当前对象的一个引用. 但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。我们先来说说this指向的几种方式在方法中，this 表示该方法所属的对象var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastNa
2021-06-04 10:53:40
62
1
原创 let、const和var的区别?
在JavaScript中有三种定义变量的方式,分别为 var let和const,他们之间有什么区别呢,跟着我一起学习吧!var使用var声明的变量有变量提升,不会报错,会输出undefined可以重复定义同一个变量可以跨块访问不能跨函数访问可以不用有初始值,不会报错,会输出undefined// 使用var声明的变量有变量提升,不会报错,会输出undefinedconsole.log(a) // undefinedvar a = 1console.log(a) // 1
2021-06-03 17:19:10
127
2
原创 Vue生命周期
我们新手学习Vue周明周期时会有一个疑惑,我们知道了常用的8个函数,但是它们都在什么地方调用呢? 下面我放入了一张 Vue声明周期解析图,并写上了对每个生命周期函数的简单理解,希望能够给你们带来帮助!我的理解:created(创建之前)：在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。created(创建之后)：在实例创建完成后立即调用。在这一步，实例已完成以下的配置：数据观测者，属性和方法的运算， watch/event事件回调。然而
2021-05-27 18:59:50
93
原创 十分钟轻易学会Sass
文章目录官网引言什么是Sass?Sass的原理安装编译SassVS Code中使用Sass使用1.注释2.使用变量3.默认变量值4.CSS4-1.嵌套CSS 规则4-2.群组选择器的嵌套4-3.子组合选择器和同层组合选择器：> +和~4-4.嵌套属性5.混合 @mixin @include6.继承 @extend7.引入 @import8.if判断9.循环10.函数 @function官网Sass 中文官网: https://www.sass.hk/引言CSS3之前的CSS都大都是枚举属
2021-05-27 10:18:46
144
原创 Vue常用指令和表单、事件修饰符的含义(萌新必看)
指令v-text 只能输出文本,不解析标签v-html 可以解析标签v-bind 添加属性 简写形式 :v-on 绑定事件 简写形式 @v-cloak 解决 {{}} 闪烁问题 在标签内定义 v-cloak,然后在style样式里面写入 [v-cloak]{display:none}v-model 双向数据绑定v-once 添加这个指令,渲染的元素或者组件后期在修改不会跟着变化,静态v-pre 可以阻止解析,会直接原样输出v-if v-else v-els
2021-05-26 22:21:51
145
原创 ...扩展运算符和rest运算符的区别?
… 扩展运算符扩展运算符用三个点 … 来表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值用法: var obj = function(a, b, c) { console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 } var arr = [1, 2, 3]; // 普通写法 obj(arr[0],
2021-05-26 21:55:51
265
原创 ES6新增数组方法
ES6中新增了很多数组方法,使用起来非常方便,通过这篇文章你将彻底了解这些数组方法,下面跟我一起来学习吧!indexOf() 检测数组或字符串中是否包含某个值,如果包含,返回第一次查到的那个值所对应下标,如果查到返回 1 0,查不到返回 -1 var arr = [1,2,3,4,5,6,7] var str = '少年强则国强' console.log(arr.indexOf(3)) // 2 console.log(str.indexOf('强')
2021-05-22 18:27:08
325
原创 JS中双感叹号 !! (隐式转换)的作用
有些时候我们在别人的博客或者js代码中时常会看到 !! 的出现,会疑惑到 !! 这玩意儿到底是什么,为什么要这样写,有什么作用. 别急,我这就带你去了解首先我们先了解它是什么?当 !! 去掉一个 ! 时,你就会知道这是js逻辑运算符中的一种.逻辑运算符有三种: 或 || 与 && 非 !...
2021-05-21 19:59:51
354
1
原创 JavaScript - 运算符
算术运算符<script> console.log( 5 + 2 ) // 5 + 2 = 7 console.log( 5 - 2 ) // 5 - 2 = 3 console.log( 5 * 2 ) // 5 X 2 = 10 console.log( 5 / 2 ) // 5 / 2 = 2.5 console.log( 5 % 2 ) // 5除以2的余数 5 % 2 = 2 余 1 结果是 1 // m % n 结果永远在
2020-11-11 19:06:05
106
原创 JavaScript -变量及类型
JavaScript (变量及类型)变量定义变量使用关键字 var 定义. 例如: var a = “张三”不使用变量输出文本4次,会发现很不简便,如下:<script> document.write('i love you <br>') document.write('i love you <br>') document.write('i love you <br>') document.write('i love you <br&
2020-11-03 19:46:32
95
原创 JavaScript-简介(萌新必看)
JavaScript (初级阶段)什么是JavaScript?JavaScript（缩写为JS）是一种高级的、多范式、解释型的编程语言，是一门基于原型、函数先行的语言，它支持面向对象编程、命令式编程以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式，不支持I/O（比如网络、存储和图形等），但可以由它的宿主环境提供支持。它已经由ECMA（欧洲计算机制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器支持。JavaScript的历史网景公司
2020-11-01 20:35:06
919
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人