- 博客(181)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 vue3在watch和watchEffect的使用
在初始化阶段结束后，会立即执行一次副作用的代码，这样可以保证在watchEffect第一次调用前的响应式数据的值是被追踪的。在组件渲染时，会执行这个副作用函数。watchEffect 是每次代码加载watchEffect都会执行，且不需要传入监听内容，会自动收集函数内的数据源作为依赖，当依赖发生变化时会重新执行函数(有点像computed的味道)，而且不会返回新值和老值。Vue3 的 watch 是一个函数，能接收三个参数，参数一是监听的属性，参数二是接收新值和老值的回调函数，参数三是配置项。
2023-09-19 15:58:34
614
原创 js浏览器实现简单的实时扫一扫功能
描述：利用vue-qrcode-reader插件实现h5/wap端简单的扫一扫功能参考文档：https://gruhn.github.io/vue-qrcode-reader/demos/Validate.html官方文档安装插件npm i --save vue3-qr-reader或yarn add vue3-qr-reader注意项目运行必须在https下，http的链接下无法调取摄像头的功能vue中的代码<template> <div class="page-sc
2023-05-16 11:06:41
2096
原创 js 数组去重
1、双重for循环法2、for + includes法3、indexOf 与 lastIndexOf 比较法var arr = [1, 2, 2, 3, 5, 2, 3, 1]; var deduplicate = function (arr) { arr.forEach(function (item) { if (arr.indexOf(item) !== arr.lastIndexOf(item)) { arr.splice(arr.last
2023-05-16 10:44:28
95
原创 js 实现月份的切换，初始化当前月，前进到前一个月份，后退到后一个月份。
月份的选择，初始化当前月，前进切换到前一个月，后退后退到后一个月。1、初始化当前月份的日期，放到数组dayArr里2、计算当前月份的第一天是星期几3、计算当前月份有几天4、计算前一个月最后一天是几号5、补齐页面显示前一个月的日期6、补齐页面显示后一个月的日期7、详细步骤在js注释页面效果图
2022-11-04 14:54:23
1286
原创 vue 项目中使用import引用本地图片
图片在项目里的存放路径,import 引入之后可以直接作为js的变量使用。奇葩的使用方式，图片需要放在项目里然后被使用。
2022-11-03 15:07:47
2700
原创 el-tree设置单选，点击完成后收起
当页面布局空间不足的时候可以使用，点击出现树形下拉，选择完成后收回去，这里设置的是树形组件只能单选。expanded 属性是设置每个节点的展开和收起，遍历每一个节点设置expanded 为false来收起树的节点。setCheckedNodes 设置目前勾选的节点，使用此方法必须提前设置 node-key 属性。node-key是必须加上的，标记每一个节点...
2022-08-05 15:16:25
1166
原创 git忽略ssl认证和git每次提交代码都要输入帐号和密码
当你通过HTTPS访问Git远程仓库，如果服务器的SSL证书未经过第三方机构签署，那么Git就会报错。这是十分合理的设计，毕竟未知的没有签署过的证书意味着很大安全风险。解决办法第一步，克隆远程仓库时，用env命令设置GIT_SSL_NO_VERIFY环境变量为"ture"，并同时调用正常的git clone命令。完整的命令如下：Bash代码或者连成一行：第二步，在克隆完毕的仓库中将http.sslVerify设置为"false"。完整的命令如下：Bash代码以上方法应该是Git处理可信任的SSL
2022-07-08 16:05:43
2336
原创 Vue的七种常用好理解组件通信方式
七种组件通信方式：props / $emitrefslocalStorage / sessionStoragevuex(状态管理工具)eventBusprovide/inject$children / $parent
2022-07-08 16:02:11
807
原创 vue项目配置环境变量
环境变量的理解：前后端分离的项目中，前端会有很多环境：测试环境，灰度环境，正式环境等，我们的项目再上线的时候会发布不同到不同的环境中去测试，当每个环境都需要打包的时候，手动修改配置就很繁琐而且难免出错，比如每个环境对应的服务器地址不同。所以使用环境变量来区分不同环境。...
2022-06-15 16:34:12
902
3
原创 vue中通过JS让页面全屏显示
在vue项目中做一个可以控制页面全屏展示的效果，点击页面上的按钮，实现全屏效果正常页面：代码实现:实现全屏主要是通过requestFullScreen()方法用来在全屏模式下打开一个元素。此方法需要特定的前缀才能在不同的浏览器中工作。使用document.exitFullscreen()方法取消全屏模式。使用注意事项1、requestFullscreen方法只能由用户触发。2、页面跳转需先退出全屏3、进入全屏的元素，将脱离...
2022-06-14 15:36:08
5753
2
原创 vue 中axios发送请求参数乱码
解决办法，请求头里配置简单说明一下** content-type**Content-Type 标头告诉客户端实际返回的内容的内容类型。Content-Type（内容类型），一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张图片的原因。语法格式：Content-Type: application/json; charset=utf-8表示 传输类型是json
2022-06-09 09:50:17
2430
原创 Ant Design 3.x 升级到4.0的过程
1、执行npm i -g @ant-design/codemod-v4 全局安装2、这是代码会有改动，git status 查看代码状态3、git commit 本地合并4、antd4-codemod src （会把你现在所有组件不支持antd4.0的自动改为支持antd4.0如果中途报错了，可以根据错误修改，然后再运行antd4-codemod src，反复操作一直提示无错误）第一次执行完成如下图有五处需要手动修改的，按照去修改5、安装compatible npm i @ant-des
2022-05-30 15:34:11
2094
原创 antd 项目运行报错 Declaration or statement expected TS1128
TS1128: Declaration or statement expected这里查到的是package.json 里"typescript": “3.8.2”, 鼠标移上去，看到最新版本是4.7.2，修改版本 执行npm install重新跑一下，ok
2022-05-30 15:32:01
1211
原创 vue 打包错误 Module build failed: TypeError: this.getOptions is not a function
错误内容错误原因是因为安装的sass-loader 版本太高解决方法降低版本执行 npm install [email protected] --save-dev然后npm run dev 重启项目如果还报错Module build failed: Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.说明版本还是高需要降低到4.0.0版本执行 npm install [email protected] --save-dev
2022-04-21 14:50:52
1288
原创 浏览器页面的渲染过程
1、HTML 的加载页面上输入 URL 后，会先拿到 HTML 文件。HTML是一个页面的基础，所以会在最开始的时候下载它，下载完毕后就开始对它进行解析2、其他静态资源的下载HTML 在解析的过程中，如果发现 HTML 文本里面有一些外部的资源链接，比如 CSS、JS 和图片等，会立即启用别的线程下载这些静态资源。在 head 中遇到 JS 文件时，HTML 的解析会停 下来，等 JS 文件下载结束并且执行完，HTML 的解析工作再接着来，防止 JS 修改已经完成的解析结果3、DOM 树的构建DO
2022-04-14 14:14:56
368
原创 单页面应用的前端路由原理是什么
什么是单页面应用单页面应用指的是第一次进入页面的时候会请求一个html文件，切换到其他组件的时候，虽然路径会发生相应的变化，但是没有新的html文件请求，原理是JS会感知到url的变化，然后js会动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前的页面上，这个时候的路由不是由后端做的而是由前端来做的，来判断页面到底显示哪个组件，这个过程就是单页面的应用。单页面应用的优缺点优点：页面切换快：因为页面每次切换的时候，并不需要做html文件的请求，这样就减少了很多http发送的时延。缺点：单页
2022-03-14 18:26:27
146
原创 写一个防抖函数和节流函数
防抖的解释：在一定时间内，多次触发，只运行最后一次，多次触发时，则会把前面执行的函数去掉，重新开始计时，直到没有触发后，执行最后一次。适用场景：input远程搜索，在输入完成后，才会进行搜索。/** * 函数防抖 在一段时间内，多次执行，则会把前面执行的函数去掉，重新开始计时，直到没有触发后，执行最后一次 */export const Debounce = (fn, t = 500) => { let timeout = null return function() { if
2022-03-10 10:56:06
213
原创 TypeScript中的基础类型
TypeScript 包含的基础类型总结起来有：布尔值数字字符串数组元组枚举任意值Any空值 VoidNull 和 undefinedNeverObject1、布尔值 → boolean同js一样有两个值——true 和 false定义：let isNew: boolean = true;2、数字 → number同js一样有整形和浮点数类型定义：let age: number = 22;3、字符串 → string同js一样，字符串的值使用单引号或者双引号包裹定义：
2022-03-09 11:14:59
565
原创 js 对象的prototype,__proto__的理解
js中对象分为两种：普通对象和函数对象。Object ，Function 是JS自带的函数对象。普通对象和函数对象// 普通对象的定义方法 let a = new Object(); // typeof a === object let b = {}: // typeof b === object let c = new function(){}; // typeof c === object// 函数对象 let a2 = function() {};
2022-03-03 17:16:15
2237
原创 TypeScript 配置文件tsconfig.json 的作用
生成配置文件 tsconfig.json新建文件夹 创建一个简单的ts项目npm install -g typescript //全局安装tstsc --init // 生成配置文件新建一个index.html 文件和helloworld.ts编译ts文件ts helloworld.ts //会生成一个同名的js文件，在index.html中引入设置当helloworld.ts改变时自动编译tsc --watch helloworld.ts // 当helloworld文件发生改
2022-02-28 18:58:24
538
原创 TypeScript 中静态类型和动态类型
静态类型：对于静态语言最主要表现就是一个变量，声明时它的类型就明确的，而且呢，在变量声明过后它的类型就不允许被修改了。动态类型：动态类型语言就是在运行阶段才能够明确一个类型，而且变量的类型也可以随时发生变化。静态类型与动态类型JavaScript 使用动态类型，而 TypeScript 使用静态类型。使用动态类型，您可以重新分配变量，因为数据类型可以更改。这在静态类型中是不可能的，因为定义了数据类型意味着如果您尝试分配不同的数据类型，它将显示编译错误。所以静态类型能使错误更早得暴露，代码更智能，编
2022-02-23 18:59:05
925
原创 TypeScript 简介 一起来认识TypeScript
TypeScript 由来TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统产生的意义和特点1、TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。2、TypeS
2022-02-22 16:41:13
1092
原创 vue中created、beforeMount、mounted、computed、watch、methods区别与执行顺序
computed是在DOM执行完成后立马执行（如：赋值）created执行时挂载阶段还没有开始，模版还没有渲染成html，所以无法获取元素。created钩子函数主要用来初始化数据。mounted钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。methods方法有一定的触发条件，如click等。watch用于检测vue实例上数据的变动默认加载的时候先computed再watch，不执行methods；等触发某
2021-12-22 15:23:11
6548
原创 git 暂存操作
1、git stash 把改动的代码暂存到起来2、git stash llist 显示暂存代码的列表3、git stash pop stash@{id} git stash apply stash@{id} 恢复暂存区git stash pop stash@{id}命令会在执行后将对应的stash id 从stash list里删除，而 git stash apply stash@{id} 命令则会继续保存stash id4、git stash drop <stash@{id}>
2021-12-13 10:18:38
6078
原创 js中用作用域链来解释闭包的原理
闭包和作用域链闭包：有权访问另一个函数作用域中变量的函数，可以突破作用链。实现变量和函数的无序访问。作用域链：当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链，由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。Tipes: 利用闭包可以突破作用链,作用域链能合理的解释闭包的原理。提问环节：闭包为什么会造成变量不被回收造成内存泄漏？首先我们都知道闭包是有权访
2021-12-09 09:52:17
236
原创 css媒体查询 @media使用方式
使用公式：@media 媒体类型 and （媒体特性）{css样式}媒体类型all 所有设备braille 盲文embossed 盲文打印handheld 手持设备print 文档打印或打印预览模式projection 项目演示，比如幻灯screen 彩色电脑屏幕speech 演讲tty 固定字母间距的网格的媒体，比如电传打字机tv 电视媒体特性1、最大宽度max-width / 宽度 width“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等
2021-12-08 19:03:18
1057
原创 DOM解析规则
DOM的解析渲染流程一、大致分为五步：1.解析HTML2.构建DOM树3.DOM树与CSS样式进行附着构造呈现树4.布局5.绘制二、解析渲染过程1.DOM Tree：浏览器将HTML解析成树形的数据结构。2.CSS Rule Tree：浏览器将CSS解析成树形的数据结构。3.Render Tree: DOM和CSSOM合并后生成Render Tree（渲染树）。4.layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而
2021-11-16 13:59:30
264
原创 element 中设置el-date-picke 禁用今天及其以后的日期禁止选择,设置时间跨度30天
element组件date-picke 设置今天开始以后的我日期都不可选。官方文档提供一个disabledDate 属性，返回值是一个回调函数，可以实现下面看代码给组件绑定options 属性，设置disabledDate 的值是一个函数 函数的返回值是Boolean <el-date-picker class="dateCom" v-model="form.date" type="daterange" value-format="y
2021-11-15 16:33:19
4532
原创 js 实现微信红包算法
微信红包算法5块钱生成五个红包，要注意的有1、生成5个随机数2、5个随机数加起来必须等于53、红包要设置最小值 如最小值不能小于0.014、红包要设置最大值，如果第一个红包为5，剩下四个红包没法分，这里设置最大值为4.95、处理金额的浮点数，两位小数下面是代码var RedPackage = function (money, num) {// Num 数量 arr 红包数组 all 红包总金额 money 剩余金额 var money = money, Num = num,
2021-10-15 14:58:04
1392
5
JavaScript.jpeg
2020-07-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人