- 博客(63)
- 资源 (6)
- 问答 (4)
- 收藏
- 关注
RSS订阅
原创 TypeScript变量声明
在TypeScript中，变量声明是一项重要的功能，它允许开发人员定义变量并分配值。通过指定变量的类型和作用域，可以确保变量始终具有正确的值，并避免类型错误。同时，遵循命名规则可以使代码更易于阅读和维护。
2023-04-12 11:31:08
988
原创 发布自己的npm包注意事项
patch 补丁 执行npm version patch package.json 的版本号将会从1.0.0变成1.0.1。发布前到https://www.npmjs.com/ 查询自己的包名是否可用不然发布的时候会报错。minor 小改动 package.json 的版本号将会从1.0.0变成1.1.0。major 大改动 package.json 的版本号将会从1.0.0变成2.0.0。需要到https://www.npmjs.com/ 网站注册自己的npm 账号。.........
2022-08-30 16:16:18
507
原创 this指向全解
理解this，你要先记住以下两点：this永远指向一个对象this的指向完全取决于函数调用的位置接下来我们用代码的形式一 一举例介绍var obj = { name:'王', fun:output}var name = '赵';function output(){ console.log(this.name);}obj.fun(); // 王output(); // 赵上述代码中，fun函数被调用了两次，显而易见的是两次的结果是不一样的；obj.f
2022-04-11 10:51:58
1531
1
原创 promise 全网最详解释，包括各方法和手动实现Promises/A+ 规范(2)
接上一篇文章我们接着来说Promisepromise 全网最详解释，包括各方法和手动实现Promises/A+ 规范(1)1.Promises/A+ 规范规范的第一部分，描述了几个术语的意思。promise 是一个包含 then 方法的对象或函数，该方法符合规范指定的行为。thenable 是一个包含 then 方法和对象或者函数。value 就是任意合法 JS 值。exception 就是 throw 语句抛出的值。reason 是一个指示 promise 为什么被 rejected 的
2022-04-01 16:40:31
536
1
原创 promise 全网最详解释，包括各方法和手动实现Promises/A+ 规范(1)
1.Promise 的含义作为 Modern JavaScript 基础设施的一部分，Promises 对前端开发者而言异常重要。它是 async/await语法的基础，是 JavaScript 中处理异步的标准形式。并且，未来的 Web API，只要是异步的，都会以 Promises的形式出现。如果不理解 Promises 相关的知识和运行机制，将来可能无法完成 Web 开发的日常工作。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法
2022-04-01 15:06:01
414
1
原创 为什么会出现跨域，如何解决-详细全网最详细
什么是跨域问题就是前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口。这都是同源策略在发挥作用。同源策略同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为：
2022-03-25 16:10:47
5235
1
原创 Vue3.0的新特性（11）v-for和key，v-bind，v-for中ref,v-for和v-if优先级,全局API
v-for和key在Vue2.x中，我们都知道v-for每次循环都需要给每个子节点一个唯一的key，还不能绑定在template标签上<template v-for="item in list"> <div :key="item.id">...</div> <span :key="item.id">...</span></template> ... ...而在Vue3中，key值应该被放置在template
2022-03-23 16:28:53
3595
5
原创 浅聊vue双向绑定原理Object.defineProperty-/-Proxy
什么是双向绑定呢？vue又是怎么做的我们接下来就聊一聊什么是双向绑定？当数据模型data变化时，页面视图会得到响应更新vue又是怎么做的？vue其实现原理是对data的getter/setter方法进行拦截（Object.defineProperty或者Proxy），利用发布订阅的设计模式，在getter方法中进行订阅，在setter方法中发布通知，让所有订阅者完成响应。说这些的时候我们在刚使用vue2.x的就会遇到过数据更新了啊，为何页面不更新呢。这其实就是Object.defineP.
2022-03-16 21:53:14
1455
4
原创 深浅拷贝解析
最近到了面试季节，做为前端的热门问题我们今天来盘一盘说到深浅拷贝那就要说到JavaScript的数据类型基本数据类型和引用数据类型基本数据类型StringNumberBooleanNullUndefinedSymbol(new in ES 6)引用数据类型ObjectArrayDateRegExpFunction两者特点基本数据类型：直接存储在栈(stack)中的数据引用数据类型：存储的是该对象在栈中引用，真实的数据存放在堆内存里简而言之就是浅拷贝： 创建
2022-03-14 22:04:18
802
2
原创 Vue3.0的新特性（10）v-model
在Vue2.x中，v-model相当于绑定value属性和input事件，它本质也是一个语法糖：<child-component v-model="msg"></child-component><!-- 相当于 --><child-component :value="msg" @input="msg=$event"></child-component>在某些情况下，我们需要对多个值进行双向绑定，其他的值就需要显示的使用回调函数来改变了：
2022-03-11 10:00:23
358
原创 Vue3.0的新特性 (9) data、mixin和filter
在Vue2.x中，我们可以定义data为object或者function，但是我们知道在组件中如果data是object的话会出现数据互相影响，因为object是引用数据类型；在Vue3中，data只接受function类型，通过function返回对象；同时Mixin的合并行为也发生了改变，当mixin和基类中data合并时，会执行浅拷贝合并：const Mixin = { data() { return { user: { name: 'Jack',
2022-03-11 09:55:31
2200
原创 Vue3.0的新特性（8）Suspense
Suspense是Vue3推出的一个内置组件，它允许我们的程序在等待异步组件时渲染一些后备的内容，可以让我们创建一个平滑的用户体验；Vue中加载异步组件其实在Vue2.x中已经有了，我们用的vue-router中加载的路由组件其实也是一个异步组件：export default { name: "Home", components: { AsyncButton: () => import("../components/AsyncButton"), },}在Vue3中重新定义，
2022-03-09 20:37:47
5310
原创 Vue3.0的新特性（7）Teleport
Teleport翻译过来就是传送、远距离传送的意思；顾名思义，它可以将插槽中的元素或者组件传送到页面的其他位置：在React中可以通过createPortal函数来创建需要传送的节点；本来尤大大想起名叫Portal，但是H5原生的Portal标签也在计划中，虽然有一些安全问题，但是为了避免重名，因此改成Teleport。Teleport一个常见的使用场景，就是在一些嵌套比较深的组件来转移模态框的位置。虽然在逻辑上模态框是属于该组件的，但是在样式和DOM结构上，嵌套层级后较深后不利于进行维护（z-inde
2022-03-09 20:30:41
1407
原创 egg 实现下载
egg 最简单的下载实现如下：async download(){ const { ctx } = this; const filePath = '/path/xml' ctx.attachment('xml'); ctx.set('Content-Type','application/octet-stream'); ctx.boby = fs.createReadStream(filePath)}加入 Content-Length 支持进度条和剩余时间仅需这样实现，即可实现下载
2022-03-09 11:32:00
834
1
原创 Vue3.0的新特性（6）Fragment
所谓的Fragment，就是片段；在vue2.x中，要求每个模板必须有一个根节点，所以我们代码要这样写：<template> <div> <span></span> <span></span> </div></template>或者在Vue2.x中还可以引入vue-fragments库，用一个虚拟的fragment代替div；在React中，解决方法是通过的一个React.Frag
2022-03-03 16:02:14
1145
原创 Vue3.0的新特性（5）组合API
Composition API（组合API）也是Vue3中最重要的一个功能了，之前的2.x版本采用的是Options API（选项API），即官方定义好了写法：data、computed、methods，需要在哪里写就在哪里写，这样带来的问题就是随着功能增加，代码也越来复杂，我们看代码需要上下反复横跳：Composition API对比❝ 上图中，一种颜色代表一个功能，我们可以看到Options API的功能代码比较分散； Composition API则可以将同一个功能的逻辑，组织在
2022-03-03 14:58:30
464
原创 Vue3.0的新特性（4）响应式侦听
和computed相对应的就是watch，computed是多对一的关系，而watch则是一对多的关系；vue3也提供了两个函数来侦听数据源的变化：watch和watchEffect。我们先来看下watch，它的用法和组件的watch选项用法完全相同，它需要监听某个数据源，然后执行具体的回调函数，我们首先看下它监听单个数据源的用法：import { reactive, ref, watch } from "vue";const state = reactive({ count: 0,});
2022-03-03 14:42:55
1467
原创 nvm 安装指南 错误处理 node多版本控制器
nvm 安装与使用介绍nvm 是node多版本控制器 用于老旧和新项目切换环境下载地址与介绍 nvm 项目地址：https://github.com/creationix/nvm.git 安装包地址：https://github.com/coreybutler/nvm-windows/releases nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。 nvm-setup.zip：安装版，推荐使用。 Source code(zip)：zip压缩的源码。
2022-03-01 14:49:45
655
原创 Vue3.0的新特性（3）响应式API
我们在深入学习Object.defineProperty和Proxy讲解过Proxy优点以及Vue3为什么改用Proxy实现响应式，同时Vue3也将一些响应式的API进行抽离，以便代码更好的复用
2022-02-28 10:41:52
521
原创 Vue3.0的新特性（2）生命周期函数
vue3新增了生命周期钩子，我们可以通过在生命周期函数前加`on`来访问组件的生命周期，我们可以使用以下生命周期钩子
2022-02-28 10:29:10
719
原创 Vue3.0的新特性（1）Tree-shaking
Vue3.0从20年九月发布第一个One Piece版本，到现在一直在更新优化；除了服务端渲染的工作，其他工作已经大部分完成了，中文版的官方文档也已经放出；那么作为终端用户的我们来看下Vue3新增了哪些功能和特性。尤大大在B站直播时分享了Vue3.0的几个亮点：○ Performance：性能优化○ Tree-shaking support：支持摇树优化○ Composition API：组合API○ Fragment，Teleport，Suspense：新增的组件○ Better TypeSc
2022-02-09 11:04:22
2450
原创 ES6简单用法取代ES5,简洁代码
ES6简单用法取代ES5,简介代码一、关于取值1.直接取值2.修改key值取值3.ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。二、关于合并数据三、if中判断条件1.判断简化2.条件简化四、关于数组遍历取值1.改进 取指定值2.改进 取指范围值五、关于扁平化数组六、关于获取对象属性值七、关于输入框非空的判断八、关于异步函数一、关于取值const obj = { a:1, b:2, c:3, d:
2021-11-19 16:10:08
682
原创 正则表达式一行限制input只能输入数字和两位小数
使用简单的正则来限制input的输入内容 主要用作金额相关的业务中<el-input v-model="amount" placeholder="请输入金额" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)"></el-input>
2021-03-04 11:51:56
2370
4
原创 computed监听vux值变化请求methods 中的方法
创建vuex监听器 computed: { pipeGalleryCode() { return this.$store.state.settings.pipeGalleryCode } },因为 pipeGalleryCode() 中无法调用方法我们可以在页面中创建watch来监听pipeGalleryCode值的变化 watch:{ pipeGalleryCode(curval,oldval){ this.getStatistics()
2020-08-10 11:40:10
1093
原创 vue 实现pc端自适应 vue cli3 实现
实现vuepc端自适应方案lib-flexible + px2remLoaderlib-flexible 阿里伸缩布局方案px2rem-loader：px转rem1、安装 lib-flexible和 postcss-px2rem（命令行安装）npm install lib-flexible --save-devnpm i postcss-px2rem --save2, 引入lib-flexible在项目入口文件main.js 中引入lib-flexibleimport 'lib-fl
2020-06-12 09:59:31
9182
4
原创 钉钉小程序踩过的坑
钉钉小程序开发注意事项-2020.05.19一.模板Template作为弹框切记慎用input,原因弹框写的动画用position: absolute;或者position: fixed;定位时手机端钉钉小程序input没有使用原生属性导致无法解决键盘顶起页面的BUG，会造成页面被顶起来弹框过高会造成input不可见，如果使用请把input放到最下面。 [^适用于用于所有的定位元素块上]二．Input钉钉小程序input目前只支持text、search所以其他多余的属性都不支持如图举例：调用数字
2020-05-26 17:33:55
5974
5
原创 解决 node-sass 报错安装失败的bug
解决 node-sass 报错安装失败的bug1.先删除node_modules文件夹2.单独执行npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/3.上一句失败 将 已下载东西 重新编译 npm rebuild node-sass执行完毕后 在加载其他环境建议不要用 cnpm 安装 ...
2020-03-29 18:06:00
739
原创 echarts 图标使用rem解决刷新的问题
我们一般是在mounted中监听页面刷新人后在渲染完毕后在调用echarts mounted() { this.$nextTick(() => { this.initChart() }) }, methods: { initChart() { this.chart = echarts.init(this.$el, ...
2020-03-27 13:42:16
1567
原创 微信小程序获取组件中的所有方法和值
在写微信小程序的时候我们有的时候会遇到一些父页面调用子组件的方法这个时候我们就要用到一个属性了this.selectComponent()这个方法使用注意事项1.引入的组件要加上id如：<selectBox id='selectBox' bind:traCheckedNum="checkNum" selectData="{{position}}" styleclas...
2020-02-11 16:12:50
6357
3
原创 cdn方式使用vue-cropper及直接使用
cdn方式使用vue-cropper首先要引入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="{{asset('js/cos-js-sdk-v5.min.js')}}"></script> // 腾讯云的sdk <...
2020-01-15 13:56:51
2058
1
原创 用wx自定义小程序全局方法和全局变量
我们发现小程序API的方法都是挂载到wx这个变量上，全局可以访问到，我们是不是可以将自己自定义的方法或者变量也挂载wx这个变量上呢？比如我们创建一个js在app.js上引入，然后在index.js上访问$.jsif (wx) { let host ="https:baidu.com" wx.$ = {}; wx.$.host = host; module.exports =...
2020-01-10 10:27:59
2346
原创 解决小程序文本不能复制
微信小程序的文本，要具有长按复制功能，必须满足两个条件： 1.小程序文本要在 标签内； 2.小程序 标签要有 selectable 属性。例如： <text selectable='true'......
2020-01-08 10:16:36
18255
5
原创 解决浏览器下载文件 中文名字乱码解决
浏览器能正确识别的编码格式，只要按照这样的编码来设置对应的Content-Disposition，那么应该就不会出现中文文件名的乱码问题了。首先，文件名作为参数保存Content-Disposition里也就是header头里，content-type指定的是响应文件在浏览器显示的编码，header头里的编码没法指定，浏览器不同，Content-Disposition值可以有以下几种编码格式 。...
2020-01-06 14:55:56
4063
2
原创 Vue + webpack的安装及使用快速入门
一、安装vue1、安装node.js，安装完node.js之后，npm也会自动安装,node.js安装教程 https://blog.youkuaiyun.com/weixin_43365995/article/details/103800730查询是否安装成功的命令：node -vnpm -v2、全局安装脚手架工具vue-cli，命令如下：npm install --global vue-cl...
2020-01-02 11:28:49
290
原创 node.js 安装和配置
node.js的下载、安装及运行1.下载官网下载地址：https://nodejs.org 中文下载地址：http://nodejs.cn/download/2.安装以windows操作系统为例是一个典型的windows应用程序的安装，建议使用默认的安装路径，放在c盘。安装的时候，一路next下去，不用做任何的额外设置，装完即可。安装完成之后，可以查看其版本号：win+r打开cmd...
2020-01-02 11:13:23
439
原创 px2rem-loader和lib-flexible，lib-flexible和postcss-pxtorem和第三方框架搭配使用
VUE 做移动端自适应，使用px2rem-loader和lib-flexible，转换px为rem配置build/utils.js中的px2remLoader 方法为75配置这个值是为了适配自己的设计图75代表设计图为750px设计的const px2remLoader = { loader：'px2rem-loader', options:{ remUnit:75 }...
2019-12-13 15:27:54
3346
3
原创 解决vue和vue-template-compiler版本不一样的快捷办法
vue项目，package.json中Vue和vue-template-compiler版本不一致时，执行npm run dev有时会报错提示如下内容 in ./src/views/login/index.vueModule build failed: Error:Vue packages version mismatch:- vue@2.5.10 (E:\美好家\beauty_w...
2019-12-13 11:48:19
9541
原创 小程序 绘制圆角矩形和圆角图片
本文介绍了在小程序绘制海报中所要绘制圆角图片的一种方法参数介绍··ctx : 是指获取到的当前小程序方法 方法如下 <canvas canvas-id="DetailsshareCanvas" style="width: 600rpx;height:880rpx;position:relative;" catchtouchmove="myCatchTouch"&...
2019-09-19 10:53:36
2447
1
原创 小程序使用 canvas 生成二维码
因项目需求需要在小程序端生成海报自带二维码成图在网上找了一个算法改过来使用，希望能帮助到使用的人创建一个canvas <canvas canvas-id="shareCanvas" style="width: 600rpx;height:840rpx;position:relative;" catchtouchmove="myCatchTouch"></canvas&g...
2019-08-02 18:49:15
2530
2
原创 小程序canvas 自适应单位
我们用小程序canvas 制作分享海报或者其他的绘图时传入的值都是px;导致在不同手机中会发生位置的偏移问题；这里就需要我们根据设计图的尺寸自己去做适配转化成px单位 getRatio() { let w = 0; wx.getSystemInfo({ success: function (res) { w = res.windowWidth /...
2019-07-01 15:23:20
1967
node_modules.7z "node-sass": "^4.13.1",
2020-03-29
汉诺塔迭代算法加递归算法，js+html动画样式
2020-01-09
小程序生成二维码插件
2019-08-02
cocos Creator 使用摄像机进行背景的差速移动
2019-03-21
vite 项目打包报错
2022-06-10
vite 项目移动index.html文件
2022-06-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人