window.innerHeight 是浏览器可视区的高度； document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离； imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）； 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

性能优化方案: 函数型组件 子组件拆分 局部变量 活用v-show、减少v-if 使用keep-alive 活用延迟装载(Defer) 分批处理(Time slicing) 非响应模式(non-reactive) 仅渲染可视化部分 一、函数型组件描述:函数型组件(无状态组件)可以忽略整个组件的生命周期的一些加载，没有vue上下文，只关心对内容的渲染! 二、子组件拆分描述:子组件拆分，将一些重度渲染的内容放到子组件去做处理，减少父组件生命周期加载负荷，关系到父组件、与子组件生命周期加载之间的顺序流程! 三、局部变量描述:vue中所绑定的属性都是响应式的，减少对响应式的数据频繁更改，在对响应式数据作为引用并更改时，尽量将响应式的数据作为局部变量做处理！计算属性中的base值若发生变化，则计算属性会在做一次相应的计算处理，那么以下对base值做了1000次处理，因此计算属性便会处理1000次！然而将base做为常量接收时，便不会对原计算属性中的base值做处理，base值不做改变，计算属性(有缓存，值若不发生变化，计算属性就会引用原有的值)便就不会触发处理行为! 四、v ...

前端 scss文件报错 Base-level rules cannot contain the parent-selector-referencing character ‘&’. 解决办法报错的地方 [data-theme=#{$themes-key}] & 12345678@mixin theme($themes) { @each $themes-key, $themes-map in $themes { $themes-map: $themes-map !global; [data-theme=#{$themes-key}] & { @content; } }} 修正后 12345678@mixin theme($themes) { @each $themes-key, $themes-map in $themes { $themes-map: $themes-map !global; [data-theme=# ...

styles > theme.scss12345678910111213141516171819202122232425262728293031323334353637383940414243$themes: ( // 亮 light:( // 背景颜色 them-bg-color: #fff, them-main-bg-color: #fff, them-font-color: #000, them-sidebar-shadow-color: 1px 1px 20px rgba(0, 0, 0, .4) //布局 // basis-color: $blove-color, // menu-hover-color: #FFFFFF, // them-title-background:#D2D8EA, ...

这里主要以 vuepress 和 vue 后台系统 为例 一、项目打包文件路径配置 vuepress123{ base: '/blog/'} vue vue.config.js 123{ publicPath: process.env.NODE_ENV === 'production' ? '/front-system/': '/'} vue-router 123456const router = new VueRouter({ mode: 'history', // base: process.env.BASE_URL, base: '/front-system/', routes: containRouters}) 二、nginx 配置文件1234567891011121314151617181920212223242526272829303132333435363738394041424344 ...

伪数组概念伪数组就是和数组同样拥有 length属性，但不同的是，伪数组却没有数组中所内置的一些方法，filter,slice,join… 伪数组有哪些arguments 参数列 DOM dom元素集合 伪数组转化为真实数组12345<ul> <li></li> <li></li> <li></li></ul> 1234let liList = document.querySelectorAll('ul li')Array.prototype.slice.call(liList);// 或者Array.from(liList) 判断是不是伪数组1234Array.isArray(liList)//或者console.log(weiArrayinstanceof Array)console.log(arr instanceof Array)

12345let num = 1234522.469761let formatNum = num.toLocaleString('en-US', { minimumFractionDigits: 3 // 默认小数部位取 3 并四舍五入})console.log('formatNum', formatNum) // 1,234,522.470 如果 num 是小数的话，格式的结果就有问题了，例如：num 为 1234.4697923,则相对的结果 1,234.47。原因该函数有个配置参数：minimumFractionDigits 默认小数部位取 3 并四舍五入。

进制转换 1234567891011let num = 10// 十进制准换2进制console.log(num.toString(2))let num2 = 1010101// 0x**** 结果为16进制let num3 = 0x1010101// 二进制转换10进制,第2个参数是 2 到 36 之间的整数! // 如果想要把数字转换为2进制，参数为2即可，如果不传，则默认为基数10进制!console.log(parseInt(num2 /*,2*/))

errorHandler123Vue.config.errorHandler = function(err, vm, info) { console.log(`Error: ${err.toString()}\nInfo: ${info}`);}; err指代 error 对象，info是一个 Vue 特有的字符串，vm指代 Vue 应用本身。记住在一个页面你可以有多个 Vue 应用。这个 error handler 作用到所有的应用。 warnHandler12345// msg和vm都容易理解，trace代表了组件树。Vue.config.productionTip = false;Vue.config.warnHandler = function(msg, vm, trace) { console.log(`Warn: ${msg}\nTrace: ${trace}`);}; warnHandler用来捕获 Vue warning。记住在生产环境是不起作用的。 ...

一、效果预览 文档连接vuepressvuepress-theme-reco界面样式细化调整 sidebar侧边栏自动生成提示：在写 md文档时不要 一个文件夹 一个 md文件，这样会生成不规则的侧边栏！建议一组下多个md文档, 例如 vue 文件下 ，多个 相关的 vue md文档! 我的目录 123456789101112131415161718192021222324252627282930313233343536373839|-- knowledge| |-- backEnd| |-- frontEnd| | |-- images| | |-- inductive| | | |-- css| | | | `-- images| | | |-- elementui| | | | `-- images| | | |-- es6| | | |-- html| | | |-- javascript| | | | `-- images| | ...