- 博客(103)
- 资源 (1)
- 问答 (2)
- 收藏
- 关注
RSS订阅转载 Vue中 .env .env.development .env.production
如上图所示，如过我们运行npm run serve 在就先加载.env文件，之后加载.env.development文件，两个文件有同一个项，则后加载的文件就会覆盖掉第一个文件，即.env.development文件覆盖掉了.env文件的NOOE_ENV选项。同理如果npm run build 就执行了.env和.env.development。比如执行npm run serve命令，会自动加载.env.development文件。注意：.env文件无论是开发还是生成都会加载。（1）在vue文件中使用。
2023-02-01 11:32:33
319
1
原创 为什么“false == []”和“false == ![]”都返回true？
另外，如果抛出异常，即使没有catch子句处理异常，finally子句中的语句也会被执行。有时我真的想不通它是如何工作的，看完这5个奇怪的问题，你就知道我为啥这么说了，你知道这些古怪问题的正确答案吗？请想一想，getName执行返回的是你的好朋友fatfish，还是我们的好朋友medium？JavaScript 是一种非常优秀的编程语言，但与此同时，它也常常让我感到困惑。朋友们，请用“===”代替“==”，这样会让你的工作轻松很多，否则你可能会做噩梦。是的，问题很简单，你会看到fatfish被打印出来了。
2023-01-05 16:13:22
645
原创 15个有用的JavaScript技巧
今天这篇文章，是我从网络上整理的一些常见的 JavaScript Tips。我在我的项目中使用了所有这些实用技巧，今天我想把它们分享给你，希望也能够帮助到你。您可以使用 MouseEvent 对象的 clientX 和 clientY 属性的值来获取有关当前鼠标位置坐标的信息。您可以结合扩展运算符使用 Math.min() 或 Math.max() 来查找数组中的最小值或最大值。在 console.log() 中，将参数括在花括号中，以便您可以同时看到变量名和变量值。columns 表示包含列名称的数组。
2023-01-05 16:05:03
423
原创 解决 require args is ‘mobx-miniprogram-bindings‘ 的问题
总的来说是因为js运行时的不一样。微信小程序在使用mobx时报错。工具 -》 重构npm。
2022-12-26 18:57:04
4402
原创 如何在 JavaScript 中的字符串的字符之间添加空格
在空格 (' ') 上调用 trim() 会产生一个空字符串 ('')，这在 JavaScript 中不是真值。要在字符串的字符之间添加空格，请对字符串调用 split() 方法以获取字符数组，然后对该数组调用 join() 方法以使用空格分隔符连接字符。这是因为空格 (' ') 也是一个字符，就像一个字母，调用 split() 会使它成为数组中的一个单独元素，该元素将与其他空格组合。如果我们想避免字符的多重间距，我们可以在 split() 和 join() 之间插入对 filter() 方法的调用。
2022-12-26 08:48:02
5162
原创 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化
if (name === "小刘") {console.log("刘哥哥");} else if (name === "小红") {console.log("小红妹妹");} else if (name === "陈龙") {console.log("大师");} else if (name === "李龙") {console.log("师傅");} else if (name === "大鹏") {console.log("恶人");} else {
2022-12-26 08:46:42
111
原创 三种 js阻止事件的默认行为发生的方式
a标签点击跳转 鼠标右键弹出菜单 滑动滚轮控制滚动条等 这些都是事件的默认行为，某些时候我们不需要这些行为，就需要阻止这些默认行为。使用 事件对象.returnValue = false。使用 事件对象.preventDefault()直接在事件处理函数中return false。用addEventListener绑定事件。用attachEvent 绑定事件。
2022-12-21 08:51:40
880
原创 JS实现生产者-消费者模式
1.先创建一个缓冲区（数组）并设置缓冲区的最大容量。2.设定一个锁，用于控制生产者和消费者状态。生产者和消费者的他们有什么特点？怎么实现生产者和消费者？
2022-12-19 17:45:09
603
原创 JS 中 Object 的 keys 是无序的吗？
在最开始学习 JavaScript 时，我一直被灌输 Object 中的 Key 是无序的，不可靠的，而与之相对的是 Map 实例会维护键值对的插入顺序。实际上在 ES2015 以后，的规则变了：在一些现代的浏览器中，keys 输出顺序是可以预测的！
2022-12-19 11:06:55
159
原创 如何在 Vue.js 中将字符串的第一个字母大写
我们使用括号索引 ([ ]) 来获取字符串的 0 属性 - 索引 0 处的字符。字符串（和数组）索引在 JavaScript 中是从零开始的，因此字符串的第一个字符位于索引 0，第二个字符位于 索引 1，依此类推，直到索引 str.length-1 处的最后一个字符。如果结果字符串只需要首字母大写，您可以在 slice() 的结果上调用 toLowerCase() 方法，在连接之前将字符串的其余部分小写。如果你试图将 Vue 实例的字符串数据属性大写（就像在我们的例子中），你可以使用计算属性代替方法。
2022-12-19 11:03:53
2234
原创 手写数组方法之用于遍历的方法
forEach，map，flatMap，find，findIndex，filter，some，every，reduce，reduceRight,
2022-12-05 09:02:25
304
原创 手写数组方法之不改变原数组方法
valueOf，join，toString，concat，at，indexOf，lastIndexOf，includes，slice，flat
2022-12-05 08:56:52
364
原创 手写数组方法之会改变原数组方法
pop，push，shift，unshift，reverse，sort，splice，fill，copyWithin
2022-12-05 08:50:58
301
原创 使用“Object.hasOwn“替代“in”操作符
有时，我们想知道对象上是否存在某个属性，一般会使用“in”操作符或“obj.hasOwnProperty”，但它们都有各自的缺陷。来避免这两个问题，这比“obj.hasOwnProperty”方法更加方便、安全。如果指定的属性位于对象或其原型链中，“in”运算符将返回true。已经可以过滤掉原型链上的属性，但在某些情况下，它还是不安全。中是否具有对应的值（原型链上的属性不会读取）。方法会返回一个布尔值，表示对象。
2022-11-06 21:14:28
883
原创 在 Vue 中更优雅的封装第三方组件
一、需求场景描述实际开发的时候，为了减少重复造轮子，提高工作效率，节省开发时间成本， 免不了会使用ui组件库，比如在web前端很受欢迎的element-ui。但有的时候，我们需要在原组件的基础上做些改造，比如一个image组件， 我们需要统一在图片加载失败的时候展示的特定图，每次使用组件都加一遍， 麻烦耗时，关键是维护成本高，当需要更新这个加载出错的图片时， 得再次一个个去找到使用该组件的地方修改。再例如自定义分页组件也很常见，组件的样式，默认支持的每页数目， 封装之后再用，在可维护..
2022-07-03 11:44:39
298
原创 如何统一前端项目的 Node 版本和包管理器？
开发环境Node.jsPackage Manager （npm、yarn、pnpm）痛点问题成员机器 Node.js 版本不统一：守旧派用 12.x、保守用 14.x、激进用 17.x。项目能否正常跑起来全凭天意，在没有 CICD 流水线加持本地 npm run build 的场景下线上风险可想而知。有人习惯用 npm、有人习惯用 yarn, 代码库里面经常会存在 package-lock.json、yarn.lock 文件同时存在的情况。更痛的点还是各种奇奇怪怪问题排查起来没有头.
2022-07-03 11:38:41
283
原创 Vue面试题
面试题：Vue2.x 生命周期1. 有哪些生命周期系统自带： beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。 beforeCreate created beforeMount mounted3. 在哪个阶段有$el，在哪个阶段有$data beforeCreate 啥也没有
2022-05-25 20:39:04
120
原创 CSS面试题总结（2）
CSS清除浮动方法一：使用带clear属性的空元素在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。.news { background-color: gray; border: solid 1px black; }.news img
2022-05-25 09:13:34
134
原创 CSS面试题总结（1）
什么是CSS？CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，是一种用来表现HTML或XML等文件式样的计算机语言，是一种标准的样式表语言，用于描述网页的表示，即布局和格式。CSS选择器及其优先级选择器格式优先级权重id选择器#id100类选择器#classname10属性选择器a[ref=“eee”]10伪类选择器li:last-child10标签选择器div1伪元素选择器
2022-05-23 19:19:48
90
原创 HTML面试题总结（1）
什么是 HTML？超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML 使文本更具交互性和动态性，是构建网站及WEB应用的基石，HTML允许嵌入图像、表格、链接，并且可以用于创建交互式表单，它被用来结构化信息。HTML语义化什么是HTML语义化语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。为什么要语义化为了在没有CSS的情况下，页面也能呈现出很好地内容结构
2022-05-22 15:28:05
136
原创 浏览器快捷键
描述 Windows Mac OS Navigation 向下滚动框 Space or Page Down Space or Fn + Down Arrow 向上滚动框 Shift + Space or Page Up Shift + Space or Fn + Up Arrow 定位到页面底部 End Cmd + Down Arrow 定位到页面头部 Home Cmd + Up Arrow 回退 ..
2022-05-22 13:51:24
789
原创 4种JavaScript深拷贝的方法
浅拷贝与深拷贝浅拷贝是创建一个新对象，这个对象有着原始对象属性值的拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的是内存地址 。如果不进行深拷贝，其中一个对象改变了对象的值，就会影响到另一个对象的值。深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。1、JSON.parse(JSON.stringify(obj))一般情况下对普通对象需要进行深拷贝，可以使用这种方法进行深拷贝操作，这种是最简单且代码量
2022-05-18 13:19:41
10167
2
原创 js对象属性 通过点(.) 和 方括号([]) 的不同之处
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> </body></html><script> // js对象属性 通过点(.) 和 方括号([]) 的不同之处// 1、点操作符:.
2022-05-17 16:20:14
191
原创 设置 Git 短命令
对我这种喜欢敲命令而不用图形化工具的爱好者来说，设置短命令可以很好的提高效率。下面介绍两种设置短命令的方式。方式一git config --global alias.ps push方式二打开全局配置文件vim ~/.gitconfig写入内容[alias] co = checkout ps = push pl = pull mer = merge --no-ff cp = cherry-p
2022-05-15 21:29:23
329
原创 Git的stash命令能够将还未 commit 的代码存起来，让你的工作目录变得干净。
stash[官方文档] https://git-scm.com/docs/git-stash[git 教程]https://www.bookstack.cn/read/git-tutorial/docs-commands-git-stash.md描述官方解释：当您想记录工作目录和索引的当前状态，但又想返回一个干净的工作目录时，请使用git stash。该命令将保存本地修改，并恢复工作目录以匹配头部提交。stash 命令能够将还未 commit 的代码存起来，让你的工作目录变得干净..
2022-05-15 21:26:57
242
原创 Vue如何保存页面的当前的状态
既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况： 前组件会被卸载 前组件不会被卸载 那么可以按照这两种情况分别得到以下方法：组件会被卸载：（1）将状态存储在LocalStorage / SessionStorage只需要在组件即将被销毁的生命周期 componentWillUnmount （react）中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。
2022-05-08 16:16:39
5170
2
原创 slot是什么？有什么作用？原理是什么？
slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。 默认插槽：又名匿名查抄，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。 具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。 作用域插槽：默认插槽、具名插槽
2022-05-08 16:15:13
3842
原创 单行JS代码实现获取两个数字之间的随机整数、获取两个数字之间的随机整数、获取参数的平均值、将数字截断为固定小数点、计算两个日期相差天数、从日期中获取一年中的哪一天、生成一个随机的十六进制颜色
9、获取两个数字之间的随机整数此方法用于获取两个数字之间的随机整数。const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)random(1, 50) // 25random(1, 50) // 3410、获取参数的平均值我们可以使用 reduce 方法来获取我们在此函数中提供的参数的平均值。const average = (...args) => args.
2022-05-01 20:46:15
725
原创 单行JS代码实现生成随机字符串、转义HTML特殊字符、将字符串中每个单词的第一个字符大写、将字符串转换为camelCase、删除数组中的重复值、展平一个数组、从数组中删除虚假值、检查一个数字是偶数还是
1、生成随机字符串我们可以使用 Math.random 生成一个随机字符串，当我们需要一个唯一的 ID 时非常方便。const randomString = () => Math.random().toString(36).slice(2)randomString() // gi1qtdego0brandomString() // f3qixv40motrandomString() // eeelv1pm3ja2、转义HTML特殊字符如果您了解 XSS，其中一种解决方案是转义 HTM
2022-05-01 20:42:45
389
原创 画一条0.5px的线
采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换： transform: scale(0.5,0.5); 采用meta viewport的方式 <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。vi..
2022-04-24 21:09:41
243
原创 vue3.x+ts+vite2环境变量配置
在做项目环境变量配置前，可以先到官网回忆一下环境变量的基本使用，https://cn.vitejs.dev/guide/env-and-mode.html一、环境模式首先环境变量是可以分模式的，常用模式如下：.env # 所有情况下都会加载.env.local # 所有情况下都会加载，但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载，但会被 git .
2022-04-24 21:06:00
92
原创 JavaScript两个变量的值交换的方式
前言该文是在看别人博客的时候发现的，很有趣的一篇文章，这里摘录到自己的简书中，供给各位读者学习本文主要描述，如何不使用中间值，将两个变量的值进行交换。前三种只适用于number类型的数值交换，第四和第五种适合其他类型。一、普通做法普通的做法就是声明多一个临时变量tmp，进行数据交换过程中的缓存。这样的做法直观，易懂。但是，会增加内存的使用。 1 2 3 4 5 6 7 vara = 1, b =...
2022-04-17 22:45:14
1386
原创 vuex中 mutation和action的区别和使用
utations 类似于事件，用于提交 Vuex 中的状态 stateaction 和 mutations 也很类似，主要的区别在于mutations 只能是同步操作，，action 可以包含异步操作，而且可以通过 action 来提交 mutationsmutations 有一个固有参数 state，接收的是 Vuex 中的 state 对象action 也有一个固有参数 context，但是 context 是 state 的父级，包含 state、gettersVuex 的仓库是 st
2022-04-17 22:43:48
2026
原创 ES数组新增了哪些扩展？
一、扩展运算符的应用ES6通过扩展元素符...，好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]主要用于函数调用的时候，将一个数组变为参数序列func..
2022-04-10 20:24:45
124
原创 v-show和v-if有什么区别？使用场景分别是什么？
一、v-show与v-if的共同点我们都知道在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示在用法上也是相同的<Model v-show="isShow" /><Model v-if="isShow" />当表达式为true的时候，都会占据页面的位置 当表达式都为false时，都不会占据页面位置二、v-show与v-if的区别控制手段不同 编译过程不同 编译条件不同控制手段：v-sh...
2022-04-10 20:20:47
3470
原创 哼啊啊啊啊啊啊啊啊啊
const app = createApp(App)app.config.globalProperties.$http = axiosaxios.defaults.baseURL = 'https://www.escook.cn'app.use(store).use(router).mount('#app') <template> <table class="table table-bordered table-striped"> <!-- 表格的标题.
2022-03-31 18:17:02
207
原创 SPA单页面的理解
一、什么是SPASPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，
2022-03-24 20:09:09
338
原创 如何实现单行／多行文本溢出的省略样式？
一、前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号对于文本的溢出，我们可以分成两种形式：单行文本溢出 多行文本溢出二、实现方式单行文本溢出省略理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现实现方式也很简单，涉及的css属性有：text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换
2022-03-24 19:52:58
921
精灵图为什么叫雪碧图
2021-10-10
为什么 在HTML标签中，如果一个标签中有同名属性，属性值是靠前面的一个值
2021-10-02
TA创建的收藏夹 TA关注的收藏夹
TA关注的人