- 博客(57)
- 收藏
- 关注
RSS订阅原创 idea快捷键和vscode快捷键对比
快捷键名称IntelliJ IDEAVisual Studio Code选中下一个相同内容Alt + JCtrl + D向下复制行Ctrl + DAlt + Shift + ⬇上下移动行Alt + Shift + ⬆⬇Alt + ⬆⬇向下扩展空行Shift + EnterCtrl + Enter向上扩展空行Ctrl + Alt + EnterCtrl + Shift + Enter快速打开文件Ctrl + Shift + NCtrl
2023-12-14 17:36:39
877
原创 Vue3中的＜script setup＞和＜script＞的区别
只在组件被首次引入的时候执行一次，其它地方引入或再次实例化都不会再执行。函数，这意味着它将为每一个(也可以说每一次)组件实例都执行。在一个 Vue3 单文件组件 (SFC)中，所以我们可以利用这个差异性做一些事情。这个脚本块将被预处理为组件的。它们各自最多只能存在一个。
2023-11-29 16:28:31
1029
1
原创 为什么JavaScript的对象Object无法保证属性key的顺序？
添加键值后，迭代出来的key顺序不是我们添加的顺序。从结果中我们可以看到非负整数在前面，字符串在中间，最后是。之前对象的属性迭代顺序规则我没去具体了解，但是自从。之后，对象的属性迭代顺序遵循一组特定的规则，但它。的属性顺序，此时看到的顺序不是真正迭代时的顺序。属性的顺序数组，注意，不可以在浏览器中直接。在实际开发中我们经常会遇到对象。前面去，这其中原因请看下文。类型，符合上面所说的规则。
2023-07-24 20:39:57
1113
原创 Set 和 Map 数据结构
它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。数据结构最好用的用处还是数组去重，暂没遇到其它好用的场景。这有时会给我们开发带来困扰，所以当我们对顺序有要求时使用。它类似于数组，但是成员的值都是唯一的，没有重复的值。结构提供了“值—值”的对应，是一种更完善的。如果你需要“键值对”的数据结构，这给它的使用带来了很大的限制。结构提供了“字符串—值”的对应，，不能去重引用类型，比如。，本质上是键值对的集合（结构），但是传统上只能用。
2023-07-21 18:44:26
357
原创 JS中for in和for of的区别
在日常开发中我们常用到的两个遍历方法是for in和for of，简单来说就是它们两者都可以用于遍历，不过for in遍历的是数组的索引（index），而for of遍历的是数组元素值（value但他们的区别并非仅于此，详看下文。
2023-07-11 15:58:45
423
原创 什么是BFC?
从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入。是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。通俗一点来讲，可以把。
2023-07-02 17:11:05
229
原创 Vue中如何在不使用单文件组件的情况下复用一小块html代码
在实际项目开发中我经常会遇到这样一种情况：有一段小的简单html代码需要在一个组件的template中多处使用，但我又不想新建一个单文件组件来实现，因为这只是一段小的简单html代码，纯展示用的，没有任何js操作逻辑，所以觉得没必要。经过一番搜索终于找到了一个比较好的方法，使用render函数。
2023-03-16 16:38:06
1163
1
原创 indexOf与includes的区别
到底什么时候使用includes什么时候使用indexOf还是要看情况来决定，如果你想要查找某个元素在数组中的位置，你就用indexOf，如果你只是想知道数组中是否存在某个元素，你用includes方法比较合适的。.........
2022-07-21 12:52:26
1295
原创 uniapp报错：Specified ‘include‘ paths were ‘[“**/*“]‘ and ‘exclude‘ paths were ‘[]‘
刚初始化一个项目，项目中的就报以下错误：在根目录下新增一个空的文件就可以解决报错问题
2022-06-02 13:31:50
1471
原创 async await使用中的几点总结
1、含义async函数返回一个Promise对象async函数完全可以看作多个异步操作，包装成的一个Promise对象，而await命令就是内部then命令的语法糖。2、async 函数的几种使用形式// 函数声明async function foo() {}// 函数表达式const foo = async function () {};// 对象的方法let obj = { async foo() {} };obj.foo().then(...)// Class 的方法
2022-01-27 14:21:20
224
1
原创 Promise使用中的几点总结
1、调用resolve或reject并不会终结 Promise 的参数函数的执行new Promise((resolve, reject) => { resolve(1); console.log(2);}).then(r => { console.log(r);});// 2// 12、Promise.prototype.then()then可以传两个回调函数，第一个是resolved状态执行的，第二个是rejected状态执行的，但我们开发中一般只传第一个比较多，
2021-09-17 17:07:17
1271
原创 Gulp实现增量编译的方法
什么是增量编译？在一个项目中，我们用Gulp写一个gulp.watch来监听.js后缀的文件修改并进行编译，然后我们修改某一个js文件，这时gulp会编译所以的js文件，这样并不是我们想要的，这种方式会大大增加编译时长和消耗资源。所以我们就要引入增量编译的概念，增量编译就是指只编译修改过的文件，未修改的跳过。增量编译的方法1. Gulp4自带的方法gulp.lastRun()2. Gulp插件实现gulp-changed - only pass through changed files
2021-08-29 13:55:34
467
原创 微信小程序中实现EventBus功能
原理eventBus实现的原理很简单，首先新建一个对象event来存储事件名以及其对应的执行回调callbackon：就相当于往events里面注册一个事件，事件名是key，callback是valueemit：就相当于通过events中的key找到对应的回调callback执行一次实现//eventBus 事件通讯中心class Bus { constructor() { this.events = {} } /** * 监听事件 * @param {str
2021-07-24 13:36:59
1821
原创 vue-cli开发Vue项目时定义环境变量需加VUE_APP前缀
最近在用vue-element-admin为模板开发一个后台管理系统项目，发现自己在env中定义的环境变量居然获取不到值，后面看文档才发现vue-cli开发需在定义的环境变量前名加上VUE_APP前缀# just a flagENV = 'development'# base apiVUE_APP_BASE_API = 'http://localhost:9527'# proxy target urlVUE_APP_PROXY_TARGET_URL = 'https://xxx.666.cn
2021-06-18 13:21:55
1609
原创 记录uniapp和mpvue框架下组件传递函数this作用域存在差异问题
直接上代码父组件// 父组件<template> <div>我是父组件</div> <child :func="testFunc" /></template><script>import child from './child'export default { components: { child }, data () { return { hello: 'world'
2021-06-04 14:06:38
292
原创 ESLint忽略指定文件夹或文件
在项目根目录新建一个.eslintignore文件，将不想应用eslint规则检测的文件或文件夹加在里面就可以了，例如：buildconfig/*.jstest/a.jsstatic/dist
2021-05-08 11:59:12
15278
转载 NodeJS实现删除指定文件
实现代码如下const fs = require('fs');stat = fs.stat;const path = require('path');/** * 删除目录下 .d.ts 文件方法 * @param String dir 文件夹名称 */let nods = function (dir) { fs.readdir(dir, function(err, files) { files.forEach(function(filename) { var src
2021-05-08 11:00:06
3002
原创 Nodejs项目中使用引入路径别名alias
问题当我们在使用Nodejs开发项目的时候常常会遇到各种文件的import，而有的文件路径过深，就会导致如下情况：import '.../.../.../a.js'这样其实是特别麻烦，且对后期项目维护非常不友好的，下面我们通过给路径定义别名(alias)的方式来解决这个问题。方法两个方法，可以根据自身情况来使用。1. 方法一(适用于CommonJS引入的项目)如果你的项目的文件引入规则是CommonJS（例如：require('.../.../.../a.js'))，如此你就可以使用一个叫
2021-05-02 19:10:08
5106
1
原创 PHP中empty和isset的区别以及??和?:的区别
empty 和 isset1. emptyempty()用于判断一个变量是否为空null、false、0.0、0、00、′0′、array() 、′′、var $a 都会返回true2. issetisset()用于判断一个变量是否已设置0、00、′0′、array() 、′ ′、false、′false′、′null′都返回true。只有值为null的变量返回true3. is_null检测变量是否为null4. 总结项目emptyissetis_null
2021-04-09 10:08:50
741
2
原创 JS封装大额数值缩写为k、w函数
封装函数：function numFormat(num) { if (num >= 10000) { num = Math.round(num / 1000) / 10 + 'w' } else if (num >= 1000) { num = Math.round(num / 100) / 10 + 'k' } return num}console.log(numFormat(9527)) // 输出：9.5kconsole.l
2021-03-24 14:03:30
1041
原创 小程序开发中使用节流函数throttle的正确方式
问题以前在开发小程序项目时，经常遇到节流需求，然后研究了好久都没成功。今天又遇到了，终于被我弄成功了。原来是使用方法错误，终究还是Javascript的基本功差导致的。试错历程
2021-03-10 13:53:50
2796
1
原创 uniapp中实现px转rpx
问题由于本人当前微信小程序项目的框架使用的是mpvue，该框架已不再维护，所以正在转uniapp框架。迁移中首先遇到的一个问题就是px转两倍的rpx问题，因为mpvue是自带px2rpx-loader这个插件的，而uniapp没有。uniapp官方开发工具HbuilderX中有插件，但我不想用他们的开发工具，所以选择了cli（脚手架）开发。那么用脚手架开发如何来解决这个问题呢？方法在网上搜索一番后，我选择用PostCSS的一个插件来解决这个问题。插件：postcss-pxtorpx-pro安
2021-03-08 12:25:29
6583
3
原创 CSS伪元素absolute后最原始的位置
伪元素::after和::before最近伪元素用的多，总结一下她们绝对定位后的相对于主元素的最原始的位置：图片示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
2021-01-11 11:06:45
882
原创 CSS实现宽为奇数的线与其伪元素直径为偶数的圆居中对齐
问题如上图所示，如何通过伪元素::before和::after实现中间宽度为奇数px的竖线与其伪元素的上下两个直径为偶数px的圆居中对齐呢？这是我实际开发中遇到的一个问题。当然，两圆的直径也为奇数就没这么多事了。我的实际需求是： 竖线宽为1px，上圆直径为10px，下圆直径为20px。不是伪元素的话，很多方法可以实现它们居中对齐，但是用伪元素怎么做呢？下面就是我的骚操作了。思路一番冥思苦想，终于想到用transform: scale()来解决这个问题：首先我们给div.line设个borde
2021-01-11 10:40:11
378
1
原创 解决“windows无法安装到这个磁盘，选中的的磁盘采用GPT分区形式”问题
安装系统时出现“windows无法安装到这个磁盘，选中的的磁盘采用GPT分区形式”解决方法如下内：在系统提示无法安装的那一步，按住“shift+f10”，呼出“cmd”命令符，即小黑窗。然后输入“diskpart”代码，并点击回车键，进入diskpart。接着输入“list disk”代码，点击回车键，显示电脑磁盘的基本信息。4. 输入“select disk 0”代码，点击回车键，并且选择”0磁盘“。5. 输入“clean”代码，并且点击回车将删除磁盘分区进行格式化。6. 输入
2020-11-04 10:53:19
43663
10
原创 CSS中子元素margin-top对父元素产生作用的问题
问题在实际开发中遇到一个问题，子元素想通过margin-top留白时，会把父元素也拉下来。问题图片如下：问题代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
2020-10-16 18:26:12
977
原创 git pull拉取仓库代码报错问题处理
报错问题例如在一个Vue项目中，多人协作开发，src/pages/index/index.vue这个文件已被另一位协作者修改过并提交到了远端仓库，并且你也在本地修改了这个文件，此时如果你去执行```git pull``的话是会报错的，错误如下：error: Your local changes to the following files would be overwritten by mer...
2020-04-20 15:40:17
1806
原创 npm的package.json和package-lock.json更新策略
如果你之前用npm 安装产生了package-lock.json，后面的人用cnpm来安装你的package.json、package-lock.json安装可能会跟你安装的依赖包不一致，这是因为cnpm 不受package-lock.json影响，只会根据package.json进行下载。npm、cnpm与package-lock.json的操作npm install package-lo...
2020-04-19 16:09:45
26007
11
原创 Vue Loader之资源URL转换规则(. ~ @)
Vue Loader资源 URL 转换规则转换会遵循如下规则：如果路径是绝对路径 (例如/images/foo.png)，会原样保留。如果路径以.开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。如果路径以@开头，也会被看作模块依赖。如果你的webpack配置中给@配置了alias，这就很有用了。所有vue-cli创建的项目都默认配置了将@指向/src。// v...
2020-03-30 16:08:39
1322
原创 Vue的Scoped CSS指南
转换当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：<style scoped>.example { color: red;}</style><template>...
2020-03-21 16:14:19
347
原创 Vuex使用概览
State当一个组件需要获取多个状态时，我们可以使用mapState辅助函数帮助我们生成计算属性：export default { computed: { // 使用对象展开运算符将此对象混入到外部对象中 ...mapState({ // 箭头函数可使代码更简练 count: state => state.count, count2: state ...
2020-03-19 23:36:19
170
转载 CSS Scrollbar样式设置
正文内容请看这里注意事项如果我们不想全局修改Scrollbar的样式的话，在其前面补充id、class或者元素标签名即可，如下所示：// 只作用于body标签body::-webkit-scrollbar { width: 8px; background-color: #f2f2f2;}body::-webkit-scrollbar-thumb { border-radi...
2020-03-17 16:22:03
827
转载 js中~~和 | 的使用
~~的用法~~它代表双非按位取反运算符，如果你想使用比Math.floor()更快的方法，那就是它了。需要注意，对于正数，它向下取整；对于负数，向上取整；非数字取值为0，它具体的表现形式为：~~null; // => 0~~undefined; // => 0~~Infinity; // => 0--NaN; // => 0~~0; ...
2020-03-15 20:24:39
1579
原创 npm的install相关命令解释
npm install命令说明npm i xxx -S是 npm install xxx --save的简写(写入到 dependencies对象)npm i xxx -D是 npm install xxx --save-dev的简写(写入到 devDependencies对象)npm i xxx -g是 npm install xxx --global的简写(全局安装)...
2020-02-18 15:16:02
791
转载 npm淘宝镜像使用
一、最顶级的使用1、安装cnpmnpm i -g cnpm --registry=https://registry.npm.taobao.org2、然后就可以cnpm安装依赖包了cnpm i -g vue vue-cli3、cnpm config ls 查看E:\我的项目\2018-08>cnpm config ls; cli configsdisturl = "htt...
2020-02-12 21:33:18
701
原创 Flex布局下如何使用text-overflow:ellipsis省略过长文本
问题试想一下我们如何通过Flex布局实现下面这个组件呢？中间显示的文字内容过长是可以自动省略Flex布局实现方法一(推荐)HTML：<div class="container"> <div class="field"> <div class="title">文本输入</div> <div cl...
2020-01-30 14:51:45
4077
原创 Linux系统安装Nodejs详细教程
前言第一次在Linux系统上安装Nodejs，我的服务器系统是CentOS 7，找了很多教程，都不是很详细完善，特此记录一下本人详细的安装过程。下面我们就开始吧！下载Node.js方法一：下载到本地后上传到服务器下载地址是：https://nodejs.org/en/download/方法二：通过wget下载到本地目录首先我们在/usr/local文件夹下新建一个名为nodejs的文件...
2019-12-24 16:08:23
21721
11
原创 CSS3之border-radius深度解析
语法解析border-radius ： none | <length>{1,4} [ / <length>{1,4} ]<length>: 由浮点数字和单位标识符组成的长度值。不可为负值。其中每一个值得数值可以为 px、%、em 等表达形式。如果 “/” 前后的值都存在，那么 “/” 前面的值设置其水平半径， “/” 后面值设置其垂直半径。如果没有 “/...
2019-11-10 12:38:49
548
原创 仿 vue-cli 搭建一个自己的脚手架
什么是脚手架从前我总觉得脚手架是个很高大上的东西，好像得牛叉一点的人才写的出来，可望而不可即。其实并不是因为困难使我们放弃，而是因为放弃才显得困难（这是个好词好句）。只要你肯花个一天半天的时间，也能写出属于你自己的脚手架。早前脚手架这个词是从 vue-cli 这里认识的，我们通过npm install -g vue-cli命令全局安装脚手架后, 再执行vue init webpack proj...
2019-10-27 18:16:48
2190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人