- 博客(119)
- 收藏
- 关注
RSS订阅原创 【React1】React概述、基本使用、脚手架、JSX、组件
React是一个用于构建用户界面的javascript库。用户界面：对前端来说就是HTML页面， 所以，React 主要用来写HTML页面，或构建Web应用。如果从MVC的角度看，React仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的M 和 C的功能。React起源于Facebook的内部项目，后又用来假设Instagram的网站，并与2013年5月开源。React简介React 是Facebook用来创建用户界面的JS库，在2013年开源。React不是一个MVC框架。
2024-07-23 15:03:18
1279
原创 【组件库】element-plus组件库
参考：Vue3 ts环境下的PropType，如下title: "标题一",description: "描述一",},title: "标题二",description: "描述二",},非setup语法糖的环境中使用PropType 定义props数据类型// 1. 在“./prop”这个文件中定义并导出： 类型 CompProps// 2. 在子组件中接收props
2024-07-09 09:30:18
3885
原创 【Utils-实用工具】1 - 根据字节限制输入长度
在main.js引用，然后注入到原型，以后可以直接使用该方法。，下面是commonUtils.js的代码。
2024-05-28 13:41:48
468
原创 【nodejs开发个人博客】-2 搭建开发环境+接口开发（不用任何框架）
文章目录1、搭建环境2、 开发接口 -- 初始化路由3、开发路由 - 博客列表路由从0开始搭建，不使用任何框架使用nodemon检测文件变化，自动重启node使用cross-env设置环境变量，此工具兼容mac、linux、windows1、搭建环境线下开发数据库连接线下数据库，到线上后连接线上正式的数据库 （数据库通过检测env:process.env.NODE_ENV的变化来修改配置）线下环境的日志直接打印到控制台中，上线后的日志需要记录到文件中，也需要一个标识r
2021-07-28 10:52:58
526
原创 自定义指令
文章目录1.全局自定义指令1.1 钩子函数：1.2 钩子函数参数：2. 私有自定义指令3. 指令的简写形式4. 案例demoVue中所有指令都以（v-）开头，即：v-指令名1.全局自定义指令使用Vue.directive('name',{})定义全局自定义指令。参数一'name'：指令的名称，不需要加"v-"前缀；调用时需要加上。参数二{}：是一个对象，有相关钩子函数（可选），可在特定阶段执行相关操作1.1 钩子函数：钩子函数：bind()，只调用一次，指令在第一次绑定到元素身上时调用。
2021-04-15 15:12:37
499
原创 封装UI组件库
如何封装并发布一个属于自己的ui组件库基础知识：关于Vue.use()详解*** Vue.use() 的使用和基本原理vue.use和vue.prototype.$xxx的区别参考：*** 教你搭建按需加载的Vue组件库教你搭建按需加载的Vue组件库(小结)_哒哒_前端开发者其他：基于elementUI封装自己的UI组件库...
2021-04-01 10:22:51
426
原创 vue-cli4打包时清除console.log
1.在项目中下载依赖包npm install babel-plugin-transform-remove-console -D2.在项目babel.config.js中配置let transformRemoveConsolePlugin = [];// 生产环境清除console.log的信息if (process.env.NODE_ENV != "development") { transformRemoveConsolePlugin = ["transform-remove-consol
2021-01-27 09:44:32
480
原创 nvm安装与使用
nvm安装与使用1、下载2、安装/管理nodejs3、命令提示1、下载下载地址： github本次下载安装的是windows版本。打开网址我们可以看到有两个版本：nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。nvm-setup.zip：安装版，推荐使用注意的是安装路径最好不要出现中文和空格安装完确认：打开cmd，输入命令 nvm ，可以看到里面列出了各种命令,表示安装成功。2、安装/管理nodejs1、nvm list [available] – 有
2020-11-16 10:23:50
505
原创 Mac安装Homebrew、nginx
1、Mac安装Homebrew国内安装(可用)：/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"以上方法来自：参考如果采用了上面改的方法，就不用看下面的官方方法了。官方的方法可能需要翻墙或者安装完成之后的权限问题。官方安装方法1(需要翻墙)：/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com
2020-10-30 13:39:16
197
原创 element-ui 的table 滚动条在合计上边
.el-table { overflow-x: auto;}.el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-wrapper { overflow: visible;}.el-table::after { position: relative;}.el-table--scrollable-x .el-table__body-wrapper { overflow: visible;}属
2020-10-10 15:40:44
1249
1
原创 数组场景题 -- 字节
let list =[ {id:1, name:'A', parentId:0}, {id:2, name:'B', parentId:0}, {id:3, name:'C', parentId:1}, {id:4, name:'D', parentId:1}, {id:5, name:'E', parentId:2}, {id:6, name:'F', parentId:3}, {id:7, name:'G', parentId:2}, {i
2020-08-23 19:42:17
222
原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt) what & why ?
文章目录map方法parseInt()关于进制同理的题map方法参数必须是函数，非函数会报错参数1 – 回调（回调参数：当前项，索引，数组自身），参数2 – 回调中的this指向arr.map(parseInt) – parseInt 就是遍历每项后的回调，他的的参数就是每项 和 索引parseInt()parseInt则是用来解析字符串的，使字符串成为指定基数的整数。parseInt(string, radix) 接收两个参数，第一个表示被处理的值（字符串），第二个表示为解析时的基数
2020-08-22 22:11:20
241
原创 zoom和transform:scale()的区别
文章目录1. 兼容行区别2. 控制缩放的属性值不一样3. zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置4. 对文字的缩放规则不一致5. 执行的渲染顺序不同总结：zoom 不兼容火狐zoom 使等比例缩放，scale可以只缩放一个方向；属性值也不同zoom缩放基点是左上角，scale 是中心位置，用transform-orgin来改变zoom缩放文字受12好字体限制，scale 可以缩小到12号字体一下zoom 先缩放再渲染，s
2020-08-22 18:19:34
2221
1
原创 网页里小于12号的字体怎么处理？- transform:scale()
在新版的chrome中，已经禁止了改属性,建议使用CSS3中的方法:transform:scale(0.875);当使用transform:scale(0.75)时; 不仅是文字变小了，整个文字所在的容器也同时会变小。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt.
2020-08-21 14:39:32
455
原创 ＜img src=“./logo.jpeg“ style=“width: 400px!important；“ alt=““＞修改图片的宽度
max-width:100px;给图片设置box-sizing: border-box;padding: 0 50px;，但图片左右会有50px的内边距利用缩放,给图片设置zoom: 0.625利用缩放,transform: scale(0.5,0.5)，但是占据的位置还是原来的200pxjs获取元素使用imgs[0].setAttribute(“style”,“width:300px!important;”)或者imgs[0].style.cssText=‘width:300px;’动画：谷歌.
2020-08-21 11:28:24
2877
原创 多次异步请求，结果返回顺序的问题
搜索框进行搜索的时候，可能会先请求的数据在页面上覆盖掉后请求的数据，这就导致检索内容与当前检索关键字不一致例如：发送3次请求，有可能第3条请求最先发送，第1条请求最晚发送。而返回时间却是反过来的：第一条最先返回结果；异步请求返回顺序依赖网络，无法控制，所以每次请求的时长不一致，也就是不能保证请求返回顺序。解决方案：有的人直接使用ajax的同步模式就好了，但这样做就失去了ajax的意义了，而且用户体验也不好。在前端定义一个全局变量，记录请求次数的标识符，并把这个标识符带上传给后端，在
2020-08-19 10:04:10
2716
4
原创 新建数组 + 数组的索引 与长度
文章目录1. 新建数组1.1 字面量1.2 构造函数2. 数组的索引 与 长度数组主要用于封装/管理 多个任意类型的数据数组是值的有序集合，由于弱类型的原因，js在同一个数组中可以存放多种类型的元素，且长度可以动态调整;1. 新建数组1.1 字面量var arr = []; //创建空数组var arr1 = [10]; // 创建数组 [10] -- 字面量方式，无论传入几个参数，都会把参数当作初始化内容//最好最后不要带多余的”,”，不同浏览器下处理不同,现代浏览器上运行
2020-08-17 20:48:35
1170
原创 浏览器兼容性问题
文章目录CSS兼容问题1. reset.css 重置样式2. IE9 以下不能使用 透明属性 opacity3. 浏览器 兼容前缀JS兼容问题1. 事件兼容性1.1. 事件对象 和 事件源1.2. 阻止浏览器默认行为 和 阻止冒泡1.3. 添加事件监听 / 移除事件监听 / 触发事件2. ajax3. H5的自定义属性 data-* 兼容问题4. 滚动条、窗口大小等兼容问题5. ie不支持let/const关键字6. 键盘事件 keyCode 兼容性7. 获取元素的非行间样式值CSS兼容问题
2020-08-17 09:13:24
664
原创 margin塌陷以 及 margin合并
文章目录1. 什么是margin 合并？ 及 何时会margin合并？2. margin 合并的几种情况1. 兄弟元素margin 合并2. 父子元素（父元素没有padding 或 border把两个margin分开，让其不相遇）父元素margin大 -- 正常margin合并子元素的margin大 -- --------------margin塌陷 --------------------3. 一个空元素，没有border和padding3. margin合并解决方法兄弟元素：父子元素：总结：普通
2020-08-15 16:15:36
282
原创 BFC - 特性、应用及 如何触发
文章目录1. BFC2. BFC的布局规则3.触发 BFC4. BFC 特性及应用1. 防止margin上下重叠（不同bfc 里的元素互不影响）2. 清除浮动（BFC 可以包含浮动的元素）3. 自适应两栏布局 -- BFC 不与浮动元素重叠1. BFCBFC 即 Block Formatting Contexts (块级格式化上下文)具有 BFC 特性的元素可以看作是隔离了的独立容器(独立的渲染区域)，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性2. BFC
2020-08-13 21:57:47
260
原创 防抖和节流
文章目录1. 防抖节流 的 异同2. 防抖(debounce) 实现3. 节流(throttle) 实现1. 防抖节流 的 异同相同 :防抖和节流 是 高频触发事件，频繁回调函数时做的 性能优化，避免大量计算导致的页面卡顿/浏览器卡死；不同 :防抖是将多次执行变为最后一次执行 – 让某个时间期限内，事件处理函数只执行一次；节流是将多次执行变为在规定时间内只执行一次 – 节流会稀释函数的执行频率2. 防抖(debounce) 实现思路：在第一次触发事件时，不立即执行函数，用setT
2020-08-13 13:31:03
384
1
原创 CSS盒模型: ie盒模型 / 标准盒模型
元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型盒模型分为：IE/怪异盒模型 和 W3C标准盒模型。标准盒模型：width/height = content宽高，不包含border和padding;IE 盒模型： width/height = content + padding + border，包含 border和padding。Css3新属性box-sizing: content-box | border-box | in.
2020-08-12 22:45:13
2234
原创 未知宽高元素上下左右垂直居中
文章目录1. 绝对定位 + margin反向偏移/ transform: translate(-50%,-50%)2. flex布局3.绝对布局4.`table-cell`实现居中<div class="wrap"> <div class="box"> </div></div> 1. 绝对定位 + margin反向偏移/ transform: translate(-50%,-50%) .box{ width: 100px;
2020-08-12 22:36:00
496
原创 flex场景面试题
文章目录1. flex-内容宽度等分( flex: 1;)2. 左右布局，一侧定宽，一侧自适应撑满（一个width:200px;另一个：width:100%；）3. 未知高宽上下左右居中 (justify-content: center;align-items: center)1. flex-内容宽度等分( flex: 1;).box { display: flex;}.box div { flex: 1; border: 1px solid red;}<
2020-08-12 21:26:16
410
原创 常用插件
文章目录1、cropper.js -- 裁剪图片并上传2. vue-drag-resize -- 拖拽与缩放3. JS时间处理插件MomentJS1、cropper.js – 裁剪图片并上传参考：cropper.js 裁剪图片并上传2. vue-drag-resize – 拖拽与缩放vue-drag-resize是一个支持拖拽与缩放的vue插件，支持vue 1.x与2.xgithub 地址3. JS时间处理插件MomentJS参考：JS时间处理插件MomentJS...
2020-08-11 12:55:53
191
原创 数组扁平化
文章目录1、数组扁平化方法1：递归方法2：reduce1、数组扁平化数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。举个例子，假设有个名为 flatten 的函数可以做到数组扁平化，效果就会如下：var arr = [1, [2, [3, 4]]];console.log(flatten(arr)) // [1, 2, 3, 4]知道了效果是什么样的了，我们可以去尝试着写这个 flatten 函数了方法1：递归// 方法 1var arr
2020-08-11 12:55:16
121
原创 【混合开发】 - 3、初始化项目
文章目录1、创建项目2、组件化开发3、vue-cli中使用scss1、创建项目使用@vue/cli创建项目 : vue create 项目名需要我们自己选择预设是默认 还是自定义选择项目需要的功能bable – 帮我们把js代码进行降级，比如es6代码编译成es5PWA – 渐进式的增强web应用Linter / Formatter – 代码风格检测工具是否需要history模式的路由- YRequires proper server setup for ind
2020-08-05 11:02:07
157
原创 【VSCode】更改tab键大小 - 如更改为4个或者2个空格
点击左下角图标，选择settings(设置) ，进入settings.jsonsettings.json中加入两个配置内容{ "editor.tabSize": 2, "editor.detectIndentation":false,}“editor.tabSize”: 4：指定一个tab等于多少个空格，例如此处指定4就像等于4个空格，2就等于两个空格“editor.detectIndentation”:false ：必须指定！！否则指定的tab大小将不起效果返回编辑面板，测.
2020-08-04 12:24:33
1407
原创 【混合开发】 - 2、开发前样式准备
文章目录1、SCSS 预处理器1、嵌套2、变量3、函数与运算2、计算场景3、 初始化样式reset.css 引入4、配置别名5、配置viewportSCSS 预处理器SCSS 是SASS 3.0 之后的称呼强化 CSS 的辅助工具，在 CSS 的语法上增加了额外的功能（嵌套、变量、运算、函数……）scss没办法直接被浏览器识别，需要转换成css(使用webpack)1、SCSS 预处理器1、嵌套对 CSS 选择器的嵌套如上，有嵌套scss里，可以直接用& 表示直接的父标签
2020-07-30 22:33:32
226
原创 ajax与axios区别
文章目录1. 原生XHR2. jquery ajax3. axios1. 原生XHR//原生XHRvar xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) // 从服务器获取数
2020-07-23 21:31:00
244
原创 flex布局
文章目录容器属性1. display: flex / -webkit-flex; --元素定义为flex 容器2. flex-direction - 主轴的方向，也就是容器中项目的排列方向3. flex-wrap -- 项目大小超过主轴宽度时，是否换行4. justify-content -- 定义项目在主轴上的对齐方式5. align-items -- 定义项目在交叉轴上的对齐方式项目属性1. order -- 项目在容器中的排列顺序2. flex-grow -- 项目的放大比例3. align-sel
2020-07-22 21:24:29
202
原创 【常见页面布局】- 2、登录等上中下布局--背景等比例缩放background-size、calc()
<template> <div id="login"> <div class="header"> 头部 </div> <div class="content"> 内容 </div> <div class="footer"> 底部 </div>
2020-07-22 20:19:15
710
原创 【混合开发】- 1、技术原理
文章目录1.关于混合开发1-1. 什么是混合开发1-2. 流行的混合开发方案2. 混合开发app 的本质2-1. Hybrid App 混合开发app 的本质2-2. 什么叫做JSBridge2-3. webView3. Android 与 web 通信 -- 安卓中js 和 原生的相互调用--了解3-1. Android Studio - 安装配置流程3-2 安卓 与 web 通信3-3. npm 安装 与 http-server3-4. 安卓 与 web的相互调用4. IOS 与 web 通信4-1.I
2020-07-22 20:08:05
2200
原创 在mac中，npm安装或者卸载失败，提示没有权限
问题：mac 上原来是vue-cli 2.x ， 升级前卸载的时候总是报错如下，没有权限解决办法：在终端输入 sudo chown -R $USER /usr/local输入开机密码此时再操作 npm uninstall -g vue-cli 卸载vue --version 查看已经卸载完成，然后再 npm install -g @vue/cli即可...
2020-07-14 11:08:19
565
原创 【webpack扩展】- 3、
文章目录普通文件处理普通文件处理普通文件：不是css文件，也不是js文件，而是一些图片/字体文件等通过js 添加的图片，放到src/assets文件夹下//希望导入的模块结果是一个可用的资源路径import png from "./assets/webpack.png"console.log(png)var img = document.createElement("img");img.src = png;document.body.appendChild(img);像上面的代码中：
2020-07-12 21:23:02
153
原创 @vue/cli 中用axios请求本地json报 404
问题：@vue/cli 中用axios请求本地json，开始把json放到了static下面，各种报404解决办法：json文件需要存在public文件夹下，cli3之后public才是存放静态资源的地方,内置服务器对外暴露静态资源的位置，而不是之前的static了请求时，直接写axios.get('/student.json',{})即可，/ 直接指向项目下的public文件夹...
2020-07-12 17:31:47
574
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人