- 博客(46)
- 收藏
- 关注
RSS订阅原创 50个html+css+js项目小练习（二：动画的倒计时效果）
本案例使用css+js+html实现倒计时效果，知识点为：使用classList添加class、删除class、查询class；行内块、行内、块级元素nextSibling 和nextElementSibling。
2022-11-26 11:10:56
978
原创 50个html+css+js项目小练习（一：3D小黄人图片旋转样式）
flex知识点，fix知识点，多类选择器，- outline:none; 无效，使绘制于元素周围的一条线无效。button点击时，外圈会出现一条线，它的作用就是让这一圈线不显示，skewY向Y轴倾斜，标签内的文字等都会一起倾， toggle ( ) ：每次点击时，切换要调用的函数。
2022-11-13 16:04:44
1008
原创 md笔记上传到CSDN---Typora+SMMS+PicGo
当把md笔记上传到CSDN时，出现图片显示不出来的问题：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传]
2022-11-12 21:56:14
1372
2
原创 React原理揭秘--setState() 的说明，JSX 语法的转化过程，组件更新机制，组件性能优化，虚拟 DOM 和 Diff 算法
调多次setState完整代码。
2022-11-08 16:30:35
718
原创 Hooks进阶--useEffect - 发送网络请求
参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用name。
2022-11-08 16:25:14
1395
原创 React16.8新增特性Hooks--概念理解
允许你在React函数组件中添加state的Hook。返回值为：包含当前state以及更新state的函数的数组。count是state变量，接受0；用来初始化state首次渲染，将初始值给到count；后续只要调用了setCount，就会将最新值给到countsetCount是改变state的函数，只要调用setCount一次，整个App中的代码都会执行useState函数可以执行多次，每调用一次为函数组件提供一个状态注意：整个只能在函数组件中使用依赖项：控制副作用的执行时机。
2022-11-08 16:20:37
1112
原创 React 路由基础--React路由介绍
两种常用的路由模式：BrowserRouter和HashRouter声明当前要用是一个非hash的模式的路由包裹整个应用一个React应用只需要使用一次HashRouter，hash模式的路由一个有#（HashRouter），一个一带#（BrowserRouter）（推荐）Link指定导航链接，完成路由跳转to属性指定路由地址，最终被渲染为a标签Routes提供一个路由出口，满足条件的路由组件，会渲染到组件内部Route用于指定路由组件和路由地址path：路由组件对应的路径；
2022-11-08 16:17:46
4196
原创 React组件进阶--render-props，render props模式的使用步骤，children代替render属性，传递props
目的：实现状态逻辑复用采用 包装（装饰）模式 ，比如说：手机壳手机：获取保护功能手机壳 ：提供保护功能高阶组件就相当于手机壳，通过包装组件，增强组件功能2.思路分析高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，}}通过prop将复用的状态传递给被包装组件 WrappedComponent组件通讯是构建 React 应用必不可少的一环。
2022-11-08 16:15:21
441
原创 React组件进阶--基础父子组件案例，props中children属性的用法，props的校验写法，props常见的规则，props默认值，生命周期，挂载阶段，更新阶段，卸载阶段
打印输入框的内容
2022-11-08 16:12:20
2395
原创 Web前端高频面试题解析（javascript篇）--- 每日十题（6）
B继承于A，A是父类，B是子类；继承可以让字类具有父类的各种属性和方法。继承方式只能继承父类的实例属性和方法，不能继承原型属性或者方法。改变一个，也会影响另外一个。子类的实例对象使用的是同一个原型对象。构造函数不能继承原型属性的方法和属性。借用call，改变this指向。
2022-11-08 15:21:44
227
原创 React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能 拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。
2022-09-04 14:15:00
948
原创 React组件基础--表单处理，受控组件和非受控组件，基础组件案例的实现，评论列表案例
HTML 中的表单元素是可输入的，也就是有自己的可变状态。（input表单元素的状态是在value中）。React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改React将 state 与表单元素值value绑定到一起，由 state 的值来控制表单元素的值。受控组件：其值受到 React 控制的表单元素。非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值。
2022-09-03 12:30:00
803
原创 React组件基础--两种创建方式，函数和类创建组件，抽离为独立 JS 文件，React 事件处理，有和无状态组件和组件中的 state 和 setState，事件绑定 this 指向的三种方法
组件表示页面中的部分功能；组合多个组件实现完整的页面功能；特点：可复用、独立、可组合推荐：使用class的实例方法}箭头函数bindsuper()}
2022-09-02 13:36:33
764
原创 React基础--JSX相关知识，脚手架中可以使用JSX语法的原因，注意点，嵌入JS表达式，JSX条件渲染，列表渲染，样式处理
JSX 是 JavaScript XML（HTML） 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。（ React 的核心内容。）
2022-09-01 20:42:20
742
原创 React基础--React的特点和安装，React脚手架的使用，npx和yarn的使用，React18新版本使用的不同点
一个专注于构建用户界面（html）的 JavaScript 库。写html页面（构建Web应用）MVC：React只是V（视图层）只负责视图的渲染，并非提供完整的M、C的功能。
2022-08-31 15:58:11
1072
原创 Vue高频面试题解析2--过滤器作用，计算属性特性和应用，父子组件的访问方法和通信，双向数据绑定v-model的实现原理，provide-inject跨界通信及如何变成响应式，vue2和vue3响应式
v-bind；v-if；v-for；v-model...不同的指令实现不同的功能。需求：刚进入页面就有就有焦点1.inserted钩子函数表示被绑定的元素插入父节点的时候调用el：表示指令所绑定的元素binding对象包含很多属性：name：指令名；value：指令绑定值2.设置时不需要写v-，使用时需要写directives: { // 自定义指令focus: {...
2022-08-31 14:38:19
506
原创 Web前端高频面试题解析（Vue篇）--- 每日十题（1）
1.v-for和v-if不建议一起用2.为什么v-for要用key3.v-if和v-show的区别4.常用指令及用法1.v-html2.v-once3.v-bind4.v-on5.v-for6.v-if7.v-show8.v-model5.生命周期6.$router和$route的区别1.$router全局路由对象2.$route局部路由对象7.computed和watch及methods的区别8.ref的作用9.watch如何对对象进行深度监听10.vue中常用的修饰符1.v-on和v-model...
2022-08-17 00:30:31
913
原创 Web前端高频面试题解析（javascript篇）--- 每日十题（5）
1.JS中对事件流的理解：捕获，冒泡2.JS中如何阻止事件冒泡和默认行为1.阻止默认行为preventDefault2.阻止冒泡stopPropagation3.JS中实现函数的防抖4.JS中实现函数的节流5.ES6中对箭头函数的理解1.基础使用跟函数没有很大区别2.注意点6.JS中“use strict”的含义及使用区别7.JS中localStorage和sessionStorage的区别8.JS中常见的几种内存泄漏情况9.JS中对事件代理的理解及应用场景10.JS中对作用域链的理解...
2022-08-15 09:51:39
294
原创 Web前端高频面试题解析（javascript篇）--- 每日十题（4）
判断一个属性是属于实例对象还是继承于构造函数1.通过hasOwnProperty()2.bind和call，apply的作用以及区别1.作用：2.区别：1.apply：2.call：3.bind：3.总结：3.ES6中Promise的认识1.三种状态：2.特点：3.用法：4.ES6中Promise实例的方法1.then()2.catch()3.finally()5.ES6中回调地狱及如何使用Promise解决6.ES6中Promise.all的理解及应用场景7.ES6中Promise.race的用法及应用场
2022-08-13 17:46:58
360
原创 Web前端高频面试题解析（javascript篇）--- 每日十题（3）
函数的prototype属性，在定义函数是自动添加的，默认值是一个空对象对象的__proto__属性，创建对象的时候自动添加的，默认值是构造函数的prototype属性主要是为了遍历对象而产生，不适用于遍历数组。...
2022-08-12 17:46:03
334
原创 Web前端高频面试题解析（javascript篇）--- 每日十题（2）
const定义的对象的属性可以修改吗？可以const保证的并不是变量的值不能改动，而是变量指向的内存地址不能改动。obj = {}//Assignment to constant variable.不能够赋值，因为不是改变的属性，是改变的对象。...
2022-08-11 00:09:49
437
原创 Web前端高频面试题解析（javascript篇）--- 每日十题（1）
引用数据类型存储在堆中var a=[1,2,3,4],如果再去改变它数组在增加，大小也在变大a=[1,2,3,4,......],大小不固定，会随着长度在增大。如果+操作符其中一个操作数是字符串（)（或者是通过ToPrimitive操作之后，最终得到的字符串），则执行字符串的拼接，否则执行数字加法。NaN（not a number）不是一个数字，表示是否属于number类型的一种状态：是或否，不是确切的值。如果对象的隐式原型等于构造函数的显式原型的话，那么说明这个对象就是这个构造函数实例化出来的。.....
2022-08-09 16:35:51
622
原创 Vue+JS+Element UI实战（电商项目3)
商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页值给的看到。动态参数用户在选择商品的时候可以选择商品颜色，也可以选择商品版本（用户可以修改）静态属性商品固定的一些参数（用户只能查看）.......................................
2022-08-01 19:51:25
1344
1
原创 Vue+JS+Element UI实战（电商项目2)
检查当前所处分支，从master分支上创建新分支查看结果推送到云端进行保存通过路由形式加载权限列表组件页面。
2022-07-29 01:10:27
970
原创 iconfont字体图标下载
把鼠标放在图标上面，就会显示购物车，点击加入购物车即可此时就会有一个压缩包下载了，解压到当前文件夹，可以将文件名个名字这里面点击FontClass就可以使用图标的类名了（下面那一行）同时这个页面也有使用步骤。一定是，否则会显示不了iconfont.css。...
2022-07-24 00:08:51
1515
原创 Vue+JS+Element UI实战（电商项目1)
根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式。客户使用的业务服务PC端，小程序，移动web，移动app管理员使用的业务服务PC后台管理端。PC后台管理端的功能管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离（后端写接口，前端调接口）的开发模式前端项目是基于Vue的SPA（单页应用程序）项目前端技术栈后端技术栈Element。......
2022-07-23 23:59:13
2111
2
原创 Vue+TS+Element-plus项目
3.搭建第三方库element-plus1.安装安装 | Element Plus如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。3.按需导入自动导入推荐首先你需要安装 和 这两款插件然后把下列代码插入到你的 或 的配置文件中Webpack--->可以在vue.config.js中添加webpack.config.js即可修改配置了之后，要重启项目自动生成Vue3代码：Vue VSCode Snippets（下载失败：使用管理员运行v
2022-07-08 00:13:04
2509
原创 Vue3基础知识3
你可以使用 注册一个全局前置守卫：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。每个守卫方法接收两个参数：eg.有一个在用户未能验证身份时重定向到2. 路由独享的守卫 守卫 只在进入路由时触发，不会在 、 或 改变时触发。3.组件内的守卫可用的配置 API可以为路由组件添加以下配置：2.路由懒加载 Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导
2022-07-06 18:28:04
2254
原创 Vue3基础知识2
1.组合式 API 基础 新的 选项在组件被创建之前执行，一旦 被解析完成，它就将被作为组合式 API 的入口 因为 是围绕 和 生命周期钩子运行的，所以不需要显式地定义它们。即在这些钩子中编写的任何代码都应该直接在 函数中编写。 在 中你应该避免使用 ，因为它不会找到组件实例。 的调用发生在 property、 property 或 被解析之前，所以它们无法在 中被获取。（组件创建之前被调用，数据代理data还没有开始，所以不能拿到这个数据） 将 返回的所有内容都暴露
2022-07-03 23:47:00
542
原创 JavaScript基础知识3（ES6）
一组值和语义的封装2.广义的对象dom元素；数组；函数判断是否为对象，那就判断是否可以添加属性（ x.username=‘xx’），可以添加的话就是对象2.json1.js对象和JSON格式的区别： 1.JSON的属性一定要加双引号；对象可以加，也可以不加 2.JSON不可以进行赋值（obj.name = 'zx'），也不可以以属性的形式取值，对象可以。 3.转换为js对象类型3.对象中的this1.执行上下文 代码分类（位置）
2022-06-24 23:39:34
624
原创 Vue3基础知识1
编写HTML，指定ID-->编写CSS-->编写JavaScript交互（获取DOM->添加事件监听->维护数据（手动添加新元素）） HTML不灵活 CSS样式覆盖 Javascript变量覆盖 HTML与JavaScript结合紧密（紧耦合） 数据不同步传统Web弊端：数据不能同步，全局变量冲突使用script引入使用脚手架 检查打开首选项-->settings-->format on save 检查是否开启EPERM: operation not permitted, mkdir
2022-06-17 23:56:57
1599
原创 JavaScript基础知识2（BOM+DOM）
目录1.DOM1.什么是DOM2.查找节点3.事件三要素4.改变HTML内容 5.获取，设置，删除节点属性2.DOM节点1.dom节点nodeType：nodeName：nodeValue： 层次节点的属性2.节点操作tab切换案例3.表单操作创建表格4.元素大小5.周边大小滚动事件点击返回顶部案例6.注册事件7.删除事件8.this关键字9.事件对象10.鼠标事件11.可视区和屏幕的坐标12.键盘事件13.表单事件1.onblur2.onfocus3.onchange4.onreset5.onsubmit
2022-06-16 23:37:27
286
原创 Javascript基础知识 1（JS）
运行在客户端的脚本语言；专为与网页交互而设计的脚本语言；动态类型、弱类型、基于原型的语言。脚本语言：不需要编译，运行过程中由js解释器（js引擎)逐行解释并且执行（边解释边执行）。C、C++等语言先编译后执行。基于对象：不仅可以创建对象,也可以使用现有的对象。动态性：采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。（在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应）跨平台性：不依赖于操作系统,只需要浏览器的支持
2022-06-12 23:29:11
719
原创 CSS基本知识总结（HTML+CSS）
英文全称：Cascading Style Sheets中文名称层叠样式表。给页面中的HTML标签设置样式。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS有3种引入方式：行内式：将样式写在元素(标签)的 style属性内。（配合javascript使用）-->是当前标签中内嵌式:将样式写在 style元素内。（任意位置，通常写在head标签中）-->当前页面中外链式：通过link标签，引入CSS文件内的样式。（多个页面）-->.css文
2022-06-09 22:42:42
1091
原创 CSS常见图片居中，文字居中，版心居中集合
1.margin:0 auto；（水平居中）2.margin: auto;（垂直水平居中）3. 定位居中（垂直水平）适用于未知宽高，已知高度也可以用4.text-align水平居中，主要使用：文字居中5.行高line-height垂直居中，适用于：文本6.Flex居中(垂直水平居中)7.width:fit-content; (水平居中)设置width:fit-content;同时设置margin：auto；实现元素居中；8.margin-top（垂直水平居中）9.vertical-align:middle.
2022-06-09 14:44:57
8646
原创 背景图片相关应用-铺满，自适应
数值，或者top,right,bottom,left等，center：距离页面左边的定位，0px：距离页面上面的定位auto：默认值，保持背景图片的原始高度和宽度。contain：缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。宽跟父级一样高后，就不会缩放了,当宽度或高度和盒子尺寸相等，图片就不再缩放.这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。cover：缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。图片完全覆盖到整个盒子
2022-06-08 15:00:00
5814
1
原创 块，行内块元素之间存在间隙
存在换行，空格，回车等操作时，浏览器解析默认会有空格。将两个照片标签放在一行但是这样就没有遵循Web标准来开发（HTML编写网页结构和内容，CSS控制布局，文本/图片等的显示样式）父元素设置：font-size:0px;但是，如果父元素有文字，会让文字大小一块变化（文字大小变成0）margin设置为负值我这里的图片，设置-5px即可，根据自己的图片进行微调即可但是，需要自己对每个元素间的距离进行微调，如果空格占位发生改变，需要把每一个元素间距离再次进行修改。父元素设置为弹性布局，添加float.
2022-06-06 19:08:09
137
原创 元素显示模式：块级，行内，行内块，嵌套规范，显示模式转换
img有行内块元素特点，但是Chrome显示为inline，1.块级元素（可独块）block，2.行内元素（不可多行）inline，3.行内块元素（可多行内块）inline-block
2022-06-06 18:02:03
459
原创 Vue实战：网易云音乐（初始化项目(1)）
后端部署成功2.选择通过脚手架搭建项目根据自己的需要进行配置4.使用yarn出错The project seems to require yarn but it’s not installed.使用脚手架搭建项目，解决yarn和npm冲突问题，适配移动端项目，引入字体图标...
2022-06-05 13:23:57
1314
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人