- 博客(57)
- 收藏
- 关注
RSS订阅原创 display和visibility与重排和重绘
display:none和visibility:hidden都能把网页上某个元素隐藏起来，但是两者有区别：1、display:none1、不为被隐藏的对象保留其物理空间。html对象在页面上彻底消失（display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间）。2、是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子孙节点，属性无法显示。3、修改常规文档流元素的display通常会造成文档的重排（reflow）重绘（repaint）。2、visibility
2022-05-26 23:57:32
1568
原创 自定义指令-处理图片加载出错
处于用户体验的考虑，一般图片都是要处理出错时的展示默认图片1、普通实现最简单的方法就是组件引入图片，然后用逻辑中断来控制图片的展示<template> <div> <img :src="默认图片 || 后台返回的图片" alt=""> </div></template><script>import 默认图片 from '默认图片路径'export default {};</script&
2022-05-22 00:00:46
217
原创 IntersectionObserver的实用功能
需求当数据覆盖背景图（固定的，不随着滚动）时，需要顶部tab栏固定，也就是监听数据滚动，触发一个事件来满足需求tab栏就没写了，比较懒样式实现<template> <div class="App"> <div class="bg"></div> <div class="content"> <ul> <li>1</li> ...
2022-05-20 23:24:53
300
原创 git在commit之后撤回本地提交
开发时，一般常用的命令git add . // 提交暂存区git commit -m '提交信息' // 提交本地仓库git status // 查看文件当前状态（知否有已修改文件）git branch // 参看分支git checkout 分支名 // 切换分支git pull // 拉取代码// 本地解决冲突后进行提交代码git push撤回commitgit reset --soft HEAD^ // 这里的HEAD^就是回退上一个版本gi
2022-05-19 08:37:43
480
原创 vue-awesome-swiper简单使用
首先先下包npm i vue-awesome-swiper@4.1.1 swiper@5.2.0或者yarn add vue-awesome-swiper@4.1.1 swiper@5.2.0组件引入import { Swiper, SwiperSlide } from 'vue-awesome-swiper'import "swiper/css/swiper.css";开始使用<template> <div class="box">
2022-05-16 23:23:32
447
原创 封装对话框组件（view ui）
入参：1、图标2、标题3、标题底部是否显示边框线4、右侧按钮文字，默认显示确认5、是否展示取消按钮返回值：1、单击确定，返回给父组件操作逻辑代码 2、单击取消，返回父组件操作逻辑代码代码<template> <div> <Modal width="400" v-model="showModal...
2022-05-13 23:46:03
267
原创 IntersectionObserver实现上拉加载更多
实现原因今天帮别人解决需求，又不能用插件，又要实现上拉加载，还要快......实现代码<template> <div class="box"> <ul> <li v-for="(item, index) in list" :key="index"> {{ item }} </li> <div ref="loading"></div
2022-05-11 22:42:12
531
原创 使用vite创建项目
实现电脑需要安装好node环境Node.js 中文网 直接官网下载即可node -v 查看版本号安装npm淘宝镜像源npm config set registry https://registry.npm.taobao.org检查镜像源是否安装成功npm config get registry开始构建项目npmnpm init vite@latestyarnyarn create vite配置项打开项目，安装依赖npm i 或者..
2022-05-09 22:36:42
768
原创 vue2与vue3的区别
区别： 数据双向绑定 VDOM（虚拟DOM） Fragments Tree-Shanking的支持 Composition API数据双向绑定 以前有介绍过Vue2和Vue3响应式区别_思ۣۖิิۣۖิ❧❦空❧❦的博客-优快云博客VDOM 在vue2中，每次更新真实DOM之前都是对虚拟DOM全量对比 vue3中则是只对比带有标记的，这样大大的减少了非动态内容的对比消耗...
2022-05-08 21:19:09
336
原创 封装一个全局的提示框
目录结构：prompt index.js Prompt.vue先封装组件Prompt.vue<template> <div class="box" v-if="isShow"> <div class="flex"> {{ message }} </div> </div></template><script>export defa...
2022-05-06 23:38:10
291
原创 vue中路由的resolve新窗口打开
路由跳转的几种方式1、router-link（不带参）<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}">2、router-link（带参）params<router-link :to="{name:'user', params: {name: '张三'}}">// 路由配置 path: "/home/:name"// 获取参数 this.$route.p
2022-05-05 23:52:35
984
原创 使用cryptoJs对密码简单加密
介绍Crypto-js是一个JavaScript加密解密库,使用该库进行加密解密的在线工具文件众多,总结起来就2种,一个是核心文件core-min.js，其他的都是具体的某一种加密方法.安装、引入 crypto-jsyarn addcrypto-js// 引用const cryptoJs = require('crypto-js') 加密函数function fn(password) { password = cryptoJs.MD5(password).toSt..
2022-04-28 23:17:26
1435
原创 日期格式转换
一：简单日期格式化 const newDate = (d, str = '-') => { let year = d.getFullYear() let month = d.getMonth() + 1 let day = d.getDate() month < 10 && (month = '0' + month) day < 10 && (day = '0' + day) return [year, month, day
2022-04-27 22:58:53
166
原创 vue的set方法原理
set的使用vm.$set( target, key/index, value )target: 对象/数组key/index： 属性名/下标value: 值向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为Vue无法探测普通的新增属性源码：export function set (target, key, val){ if (process.env.NODE_ENV !== 'producti..
2022-04-24 23:33:42
693
原创 SPA首屏加载优化
首屏加载就是从输入网址址，到所有资源渲染到页面，首屏加载可以说是用户体验中最重要的环节，由于单页面应用，资源体积过大，首次进行全部加载耗时，导致白屏加载过慢在页面渲染的过程，导致加载速度慢的因素可能如下：网络延时问题 资源文件体积是否过大 资源是否重复发送请求去加载了 加载脚本的时候，渲染内容堵塞了解决方法减小入口文件体积比如路由懒加载和异步组件，配置路由时采用动态加载路由形式 { path: '/404', component: () => im
2022-04-21 23:40:35
362
原创 react函数组件性能优化-避免不必要的重新渲染
纯组件-浅层对比对于引用类型来说：只比较对象的引用（地址）是否相同例如：const obj = { number: 0 }const newObj = objnewObj.number = 2console.log(newObj === obj) // true所以PureComponent内部比较：最新的state.obj === 上一次的state.obj ，如果为true，就不重新渲染组件注意：不要直接修改源数据，错误做法：state = { obj: { .
2022-04-13 23:10:45
1957
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人