- 博客(92)
- 收藏
- 关注
RSS订阅原创 ECMAScript2015(ES6)之基础知识
这个很容易理解，使用 var 可以重复定义，使用 let 却不可以。var a = 5var a = 6如果是 let ，则会报错let a = 5let a = 6。
2024-01-03 15:45:59
1022
原创 仿淘宝、京东首页icons横向滑动效果
一、效果展示淘宝：京东：二、话不多说，直接上demo案例效果代码<template> <div class="demo-page"> <h1>滚动效果</h1> <div class='icons-slide-wrapper'> <div class="icons-container" ref="iconsContainer">
2023-12-15 16:25:52
469
原创 React Hooks学习指北
自定义hooks是在基础上的一个拓展，可以根据业务需要制定满足业务需要的hooks，更注重的是逻辑单元。通过业务场景不同，我们到底需要做什么，怎么样把一段逻辑封装起来，做到复用，这是自定义hooks产生的初衷。hooks 专注的就是逻辑复用， 是我们的项目，不仅仅停留在组件复用的层面上。hooks让我们可以将一段通用的逻辑存封起来。将我们需要它的时候，开箱即用即可。
2023-12-15 15:59:32
1290
原创 发布一个持续集成的npm包
贼简单，分三步走！准备工作你需要安装 node 。你需要有一个 github 账号。并且你的项目已经推送到了github。你需要有一个 npm 账号。注册npm如果没有账号，先去注册吧。package.json版本号主版本号：当你做了不兼容的API 修改。 次版本号：当你做了向下兼容的功能性新增。 修订号：当你做了向下兼容的问题修正。开始发布前面你已经注册了npm账号，这里就可以用这个号来发布了。但是npm怎么知道你要用什么号发布呢？需要一条命令来告诉它你的账号和密码。npm adduser
2022-07-07 23:35:07
219
1
原创 Can‘t resolve ‘path‘ in ‘/Users/72cy-0101-01-0017/Desktop/vue3-elementplus-admin/src/utils‘
Can't resolve 'path' in '/Users/72cy-0101-01-0017/Desktop/vue3-elementplus-admin/src/utils'
2022-06-24 15:27:01
304
原创 vue3中vue脚手架创建的项目里 scss 中不能通过:export 导出scss变量
vue3. scss 中不能通过:export 导出scss变量
2022-06-23 19:15:23
864
3
原创 vue-i18n插件报错 Uncaught (in promise) SyntaxError: Not available in legacy mode
vue-i18n插件报错 ： Not available in legacy mode
2022-06-03 12:44:28
2080
1
原创 剖析vue内部核心运行机制-----学习笔记
响应式系统的基本原理 依赖收集追踪原理 实现 Virtual DOM 下的一个 VNode 节点 template 模板是怎样通过 Compile 编译的 数据状态更新时的差异 diff 及 patch 机制 批量异步更新策略及 nextTick 原理首先看下 Vue.js 内部的整个流程，希望能让大家对全局有一个整体的印象，然后我们再来逐个模块进行讲解初始化及挂载在new Vue()之后。 Vue 会调用_init函数进行初始化，也就是这里的init过程，它会...
2022-03-14 11:00:00
1606
原创 15分钟巩固你的HTTP知识体系
15分钟巩固你的HTTP知识体系，和谁扯皮都没问题一、简介二、HTTP协议基础及发展历史三、HTTP各种特性总览一、简介前端工程师打交道最多的就是浏览器，不管做什么都离不开浏览器，其中HTTP协议往往会被我们忽略，但其实资源缓存、CDN加载、页面性能优化等等都离不开对HTTP协议的了解。最简单的例子：输入url打开网页AJAX获取数据img标签加载图片从输入URL到看到页面发生了什么？DNS解析发起TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连
2022-02-13 21:27:40
1494
原创 探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff一、真实DOM和其解析流程所有的浏览器渲染引擎工作流程大致分为5步：创建 DOM 树 —> 创建 Style Rules -> 构建 Render 树 —> 布局 Layout -—> 绘制 Painting。第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树；第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表；第三步，构建 Rende
2021-11-08 00:05:02
748
2
原创 JS正则案例-
1.JS正则案例-密码验证特殊字符：~!@#$%^&*条件：8位及以上 数字+大小写字母+特殊字符var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@#$%^&*]).{8,}$/;
2021-07-29 11:08:55
138
原创 vueSSR学习记录
https://ssr.vuejs.org/zh/理解SSR传统服务端渲染SSR单页面应用SPA服务端渲染SSR1、传统web开发传统web开发，网页内容在服务端渲染完成，一次性传输到浏览器。2、单页应用 Single Page App单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式成为客户端渲染。spa缺点：seo非常差首屏内容到达时间慢概念- 服务端渲染：将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序优点seo首屏内
2021-07-14 23:19:06
128
3
原创 vue2.x---mustache模板引擎学习记录
mustache模板引擎1.什么是模板引擎数据变为视图的方法1.纯Dom法(非常笨拙，没有实战价值)2.数组join法(曾经非常流行)3.es6模板字符串法(ES6中新增的`${a}`语法糖，很好用)4.模板引擎(解决数据变为视图最优雅的方法)2.mustache基本使用3.mustache底层核心机理1.什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案数据变为视图的方法1.纯Dom法(非常笨拙，没有实战价值)实现代码：<!DOCTYPE html><html
2021-05-31 23:26:41
200
7
原创 webpack性能优化
webpack性能优化优化开发体验优化输出质量缩⼩⽂件范围 Loader优化resolve.modules配置优化resolve.alias配置优化resolve.extensions配置使⽤externals优化cdn静态资源使⽤静态资源路径publicPath(CDN)css⽂件的处理压缩css压缩HTMLdevelopment vs Production模式区分打包优化开发体验提升效率优化构建速度优化使⽤体验优化输出质量优化要发布到线上的代码，减少⽤户能感知到的加载时间提升代码性能
2021-05-29 14:00:50
303
1
原创 微信小程序taro学习记录
关于Taro京东- 凹凸实验室Taro 是⼀套遵循 React 语法规范的 多端开发 解决⽅案。现如今市⾯上端的形态多种多样，Web、React-Native、微信⼩程序等各种端⼤⾏其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然⾮常⾼，这时候只编写⼀套代码就能够适配到多端的能⼒就显得极为需要。使⽤ Taro，我们可以只书写⼀套代码，再通过 Taro 的编译⼯具，将源代码分别编译出可以在不同端（微信/百度/⽀付宝/字节跳动/QQ/京东⼩程序、快应⽤、H5
2021-05-29 12:20:32
614
原创 微信原生小程序云开发学习记录01
微信公众平台 注册小程序 https://mp.weixin.qq.com/⼩程序官⽅⽂档https://developers.weixin.qq.com/miniprogram/dev/framework/组件 API ⼯具⼯具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html组件viewtextbutton//⾮常简单就可以实现微信客服的能⼒<view> <te
2021-05-29 12:00:24
183
原创 uniapp学习记录
uniappuni-app的基本使用uni-app介绍 [官方网页](https://uniapp.dcloud.io/resource)环境搭建利用HbuilderX初始化项目运行项目介绍项目目录和文件作用全局配置和页面配置通过globalStyle进行全局配置创建新的message页面通过pages来配置页面配置tabbarcondition启动模式配置组件的基本使用text文本组件的用法001 - text 组件的属性002 - 代码案例view视图容器组件的用法001 - 组件的属性002 - 代码
2021-05-29 11:00:02
1060
原创 echarts笔记
这里写目录标题1.echarts入门2.echarts 常用组件3.echarts 常用图表1.echarts入门1.浏览器画图方式有两种canvas ：点阵图，缩放失真，适合图形数量非常大的图表svg：矢量图，缩放不失真，适合图形数量较少的图表2.echarts 的绘图步骤1建立dom 容器2引入 ECharts3实例化echarts4建立图表配置项5显示图表2.echarts 常用组件标题 title图例 legend工具栏 toolbox提示框 tooltip坐标轴
2021-05-25 17:43:46
1643
原创 vue2.x源码----响应式原理学习笔记
深入响应式原理当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 p
2021-05-21 23:36:38
148
4
原创 js实现发布订阅
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单发布订阅<
2021-04-25 13:59:58
343
原创 jsutlis
utlis一级目录封装运动函数一级目录封装运动函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画函数</title></head><style>
2020-12-12 16:50:40
130
原创 2020-12-12
小栗子移动端拖拽pc端拖拽移动端拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style>
2020-12-12 16:44:55
56
原创 js常用基础案例整理(持续更新)
这里写目录标题一级目录二级目录三级目录036-网页日历035-记住用户名(js代码)034-基础轮播图(js代码)033-京东放大镜效果(js代码)032-简单动画函数封装031-仿淘宝固定侧边栏+返回顶部按钮030-拖动的模态框029-发送短信倒计时案例028-倒计时效果027-模拟京东快递单号查询案例026-模拟京东按键输入内容025-跟随鼠标移动的小人024-动态生成表格案例023-删除留言案例022-新浪下拉菜单021-Tab栏切换(仿京东)020-全选与反选019-表格隔行变色018-开关灯效果0
2020-11-17 16:43:18
9354
1
原创 34条Vue之实操篇
7种组件通信方式随你选组件通信是 Vue 的核心知识，掌握这几个知识点，面试开发一点问题都没有。props/@on+$emit用于实现父子组件间通信。通过 props 可以把父组件的消息传递给子组件：// parent.vue <child :title="title"></child>// child.vueprops: { title: { type: String, default: '', }}这样一来
2020-11-16 14:21:29
435
原创 webpack与模块化
webpack 与 模块化文章目录webpack 与 模块化模块化模块化的核心ESM独立模块作用域导出模块内部数据导入外部模块数据模块化的向下兼容CommonJSAMDrequireJS`requireJS` 的 `CommonJS` 风格UMD模块化模块化已经是现代前端开发中不可或缺的一部分了把复杂的问题分解成相对独立的模块，这样的设计可以降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展从 ECMAScript2015 开始引入了模块的概念，我们称为：ECMAScript
2020-11-12 23:59:21
201
原创 webpack
webpack文章目录webpackwebpack 是什么？安装使用打包模块入口文件打包命令打包配置核心配置modeentryoutput深入执行简要流程Loadersraw-loaderfile-loaderurl-loadercss-loaderstyle-loadersass-loaderPluginsHtmlWebpackPluginclean-webpack-pluginmini-css-extract-pluginsourceMapWebpackDevServerProxyHot Module
2020-11-12 23:58:13
108
原创 正则表达式
正则表达式（Regular Expression） 1）正则的创建 2）正则的匹配方法 3）元字符 4）字符集合 5）边界 6）分组 7）反向引用 8）数量词汇 9）匹配模式// 正则表达式；["12312","2312"]// 字符串里找到对应的数字；正则实现； + 出现1次到多次； \d；数字；\D:非数字；let reg = /\d+/g;let arr = str.match(re
2020-11-12 23:34:06
90
转载 git一些常用命令学习笔记
Git文章目录Git什么是版本控制？什么是 Git？人工版本控制器版本控制工具常见版本控制工具怎么工作的？git 文件生命周期状态区域安装配置-- global检查配置创建仓库 - repository工作流与基本操作查看工作区的文件状态乱码git status 显示乱码终端乱码添加工作区文件到暂存区创建版本提交备注修改默认编辑器单行备注查看提交日志修复提交删除撤销重置从暂存区中撤销到工作区该命令既可以用于回退版本比较分支查看分支创建分支切换分支分支合并删除分支合并记录~ 与 ^rebase 操作合并冲突
2020-11-12 23:23:37
87
原创 vue一些基础组件封装
vue基础组件封装测试组件占位Dialog 弹框组件测试组件占位阿谁发的很舒服阿大放送发阿斯顿发大水发aasdfasdfasdfDialog 弹框组件效果图：dialog组件<template> <transition name="slide-down"> <div class="ta-dialog__wrapper" v-if="isShow"> <div class="ta-dialog">
2020-11-11 17:28:33
481
原创 vue一些utils
utils1.blob2base642.base64 字符串之间的转化3格式化日期相关4防抖与节流1.blob2base64let blob2base64 = async (blobData, type = 'image/jpeg') => { let blob = new Blob([blobData], { type: type }) let fileReader = new FileReader() let result = await new Promise((resolve,
2020-06-12 14:43:19
2151
原创 修改input与textarea的placeholder样式
修改input placeholder::-webkit-input-placeholder { color: red; font-size: 20px; font-weight: bolder;}修改textarea：textarea::-webkit-input-placeholder {color: #ddd;text-align: right;}修改 textarea 光标颜色textarea {vertical-align: baseline;car
2020-06-12 13:51:18
1359
原创 记录vue项目中遇到的一些问题
这里写目录标题2.某些华为机型微信授权回调问题1.利用伪元素自定义input =radio 样式2.某些华为机型微信授权回调问题就是在提交完订单后需要跳到微信授权页面然后在跳转回来。结果就是进不去确认订单页 会停留在白屏状态。原因：是因为好像是因为华为手机会自动清理存储在sessionStorage里的东西。后来放到localStorage也不行。最后在是放在cookie中 这样就可以了1.利用伪元素自定义input =radio 样式自定义input type=radio 样式时候ap
2020-06-12 13:40:02
302
原创 js简易网页特效
这里写目录标题002 网页日历001 简易版计算器002 网页日历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-05-29 18:04:04
615
原创 css实现一个元素水平垂直居中常用方法
法1.绝对定位元素的居中实现margin<style> .box { width: 100px; height: 100px; background: #c33; position: absolute; top: 50%; left: 50%; margin-top: -50px; /*高度的一半*/ margin-left: -50px; /*宽度的一半*/ }</s
2020-05-18 10:01:08
186
原创 vue 路由懒加载
一、懒加载也叫延迟加载或者按需加载，即在需要的时候进行加载，二、像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时简单的说就是：进入首页不用一次加载过多资源造成用时过长1.使用vue的异步组件，可以实现路由的懒加载 {
2020-05-13 15:24:38
114
原创 清除浮动常见方法
为什么需要清除浮动?父级没有高度子盒子浮动了影响下面布局了1. :after 伪元素法.clearfix:after { content:"", display:block, height:0, clear:both, visibility:hidden}.clearfix { /* IE6、7专有*/ *zooom:1;}2. 双伪元素清除浮动....
2020-04-30 20:14:48
1049
原创 element ui 中 el-upload 组件 用自定义函数覆盖
element ui el-upload 组件 用自定义函数覆盖 action在这里插入图片描述<div class="formWrap" v-show="showImg == 1"> <el-form-item label="图片地址：" :label-width="labelWidth"> <el-upload ...
2020-04-27 20:55:32
372
原创 自定义配置vscode快捷生成vue模板 代码
步骤:文件–>首选项—>用户代码片段新建全局json 文件 命名为 vue.json复制以下代码{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix...
2020-04-24 17:55:31
2317
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人