- 博客(40)
- 收藏
- 关注
RSS订阅
原创 前端主流框架
Web前端三大主流框架是：React1.声明式设计：React采用声明范式，可以轻松描述应用。2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活：React可以与已知的库或框架很好地配合优点：1.速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。2.跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。3.模块化：为你程序编写独立的模块化UI组件，..
2022-02-25 10:05:28
7600
1
原创 微信小程序的基础语法（必看）
1. 简述微信小程序的运行机制热启动 ：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。2. 分析一下小程序的优劣势优势： 无需下载，通过搜索和扫一扫就可以打开 良好的用户体验：打开速度快 开发成本比App要低 安卓上可以添加到桌面，与原生App差不多 为用户提供良好
2021-10-19 16:16:23
8345
1
原创 微信小程序中的父子组件通信（详细）
父组件向子组件传参首先定义子组件 微信小程序中定义组件一般我们定义在components文件中 在app.json中 创建"pages": [],之后在父组件中引入子组件 首先在父组件的json中直接引入.json在wxml页面中使用双标签 后在子组件的json中设置这样组件引用完成；
2024-03-26 11:03:50
436
原创 uniapp 自动更新版本并安装
这个数据是我项目中的用户基本信息 我是放在本地存储中的；里面有目前这个项目的版本号；通过之前的版本号（就是存在用户基本信息中的）和在App.vue中拿到的现在项目的版本号对比；首先 我们在app打包的时候回去设置版本号，用来了解当前版本具体更新了哪些功能；所以在app更新的时候，首先去获取我们的版本号；然后在项目的首页中进行版本号对比 看是否需要更新；获取版本号后并且保存在了本地存储中；
2024-03-12 16:07:25
507
原创 提交功能如何防止多次点击的影响
首先创建一个js，可以使用防抖（debounce）函数来包裹。方法，确保在上一次操作完成之前，新的点击不会执行该方法；然后在全局注册或者单页面引用；实例是我开发的uniapp；
2024-01-30 14:53:01
138
原创 微信小程序view显示在echarts图层上面
小程序使用echarts时，有固定的导航栏或者条件搜索框时，会覆盖在上面，网上搜都是叫使用cover-view组件，但是cover-view只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。局限性非常大，往往不能满足项目需求。
2023-11-30 18:04:17
489
原创 js将字符串的计算公式转为数组
来匹配字符串中的字母、数字和括号，并将匹配结果存储在一个数组中。然后，我们遍历这个数组，对于每个匹配项，如果它是字母或数字，就将它添加到结果数组中；如果它是括号，就将括号中的每个字符都添加到结果数组中。最终，我们得到了所需的数组。我们首先使用正则表达式。
2023-05-30 17:02:29
197
原创 一些VUE中开发使用方法
arr.splice(index,1,data) 表示从索引为index开始删除，一共删除一个；arr.filter() 对数组每⼀项都运⾏传⼊的函数，函数返回true的项会组成数组之后返回;arr.map() 对数组每⼀项都运⾏传⼊的函数，返回由每次函数调⽤的结果构成的数组;一般处理的数据都是数组对象格式的，数据量过大，就要对数组进行循环；arr.push()在数组的末尾添加;
2023-04-27 11:15:06
216
1
原创 vue使用jq将文本逐字显示
后端返回我们html格式的文本，在页面中进行逐字显示，如同打字的效果。页面中 import $ from "jquery";#thank_content1 是你渲染的div。方法参数的text 是后端返回的text文本。首先安装jq，在页面中引用。我是用vue2开发。
2023-04-07 15:23:40
680
原创 使用vw做项目适配
在面对不同分辨率下的电脑或者笔记本，去看同一个vue项目，可能我们的页面样式布局会有很大的问题，所以要在项目初期搭建的时候，就要考虑去做项目的适配。这次是优化之前的项目，去做一个自适应，是一个后台管理，因为之前开发使用了sass,就导致转rem不生效。下载插件：cnpm i postcss-px-to-viewport。我先使用了第一中方法，去把我们设置的单位px转化为rem。在根目录下新建postcss.config.js。这个之前借鉴过，自己整合了一下。然后重启项目就可以。
2023-02-21 10:18:43
250
原创 vue3中使用svg，没有使用ts
在src下新建icons文件，在下创建svg文件用来存放svg图片，同级创建index.js。路径是components/SvgIcon/index.vue。2，然后在根目录下的vue.config.js中进行配置。路径尽量写一样，不一样的注意配置是修改为自己的路径。3.在components中写一个svg组件。5.然后在main.js中全局配置。4.写svg存放地址以及配置文件。
2023-02-07 10:55:20
191
转载 icon可以使用点击事件嘛
使用了一个Element UI中的icon图标，想对它设置点击事件，发现不生效。.onclick = " "，这样并不起作用。因为icon是以伪元素的形式存在的，这样是无法获取事件的。转载自：https://www.jianshu.com/p/1e7eadff54a8。icon元素.style.pointerEvents = " none"利用这个提示，首先获取icon元素，然后再利用。就可以实现对icon元素的事件禁用。
2022-12-08 17:20:38
1997
原创 在vue中使用动画插件
p cdata-wow-duration="2s" data-wow-delay="1s" class="wow lightSpeedIn">这是动画文字之前项目需求要对文字进行动画展示，所以用到了两个动画的插件，总结一下，方便以后采用，也是借鉴网友的和官网。主要的动画样式时在class中设置 wow时必须有的。关于一些动画的样式可以去官网查看，还附带动画的效果。在特定的情况下进行动画时，就可以使用三元判断。在页面初始化就执行动画，或者在方法执行时。可以去设置上演示一下，也是很方便的。
2022-12-01 15:00:56
2117
转载 vue使用px2rem让项目适配不同分辨率
然后再根目录下新建一个rem.js的文件。然后再main.js中引入刚才的js文件。然后再vue.config.js中设置。整理下来防止丢失 ，自己使用后。
2022-12-01 08:54:57
614
原创 echarts正负条形图设置y轴在0刻度线上
还有一种是通过series中有一个label，可以通过设置这个字体位置，字体样式达到我们需要的效果，还会随着echarts图大小变化。在label中通过设置offset还有position，去调整位置，达到效果！不过这种没有响应式，我们echarts图大小变化后，就会出现偏差。首先设置x轴都为正数，并且设置0轴固定在中间位置。x轴的坐标就设置完毕了，接下来设置y轴的数据。如果害需要鼠标移入出现提示框，就设置。y轴可以通过偏移量去设置。
2022-11-17 16:36:02
3537
2
原创 vue中限制校验
vue中我们常用eslint对我们的代码进行校验，但有时会十分不方便。可以通过/* eslint-disable */去设置一部分代码不去进行eslint校验。
2022-11-14 16:06:29
352
原创 关于js继承
继承在js中占有非常重要的地位，那么在js中有很多中继承的方式，不过每一种继承方式都有优缺点。下面就列举几种继承的方式。实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已一、原型链继承实现： 将父类的实例挂载到子类的原型上优点： 实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性缺点： 1、新实例无法向父类构造函数传参。 2、继承单...
2022-03-07 14:19:54
180
原创 js的继承
1.原型链继承：<script> //父类 function Person(){ //实例属性 this.name="张三" this.sex="男" this.say=function(){ alert("hi") } } //通过原型给Person添加一个age属性 Person.prototype.age=30 //定义一个子类 来继承我们的Person类 function Student(name){ this.name=name }
2021-12-17 15:57:14
104
原创 es6面向对象
对象：万物皆是对象，体现在程序上就是属性和方法的集合定义一个对象：特性、 静态的、 称为属性（变量），动作 、能干什么、 动态的的 、称为方法1.new 操作符 + Object 创建对象 var person = new Object(); person.name = "lisi"; person.age = 21; person.family = ["lida","lier","wangwu"]; person.say = function(){...
2021-12-17 15:28:19
166
原创 js数据类型的判断
typeof 检测基本数据类型 typeof(null) object typeof(undefined) undefined instanceof instanceof 检测的是原型 instanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型 var str="123" var arr=[1,2] console.log(str instanceof String) 无效 console.log(arr ins..
2021-12-17 15:21:10
208
原创 canvas根据坐标绘制矩形
<template> <div class="canvas" ref="canvas-container"> <canvas class="box" ref="canvas" :width="rateWidth" :height="rateHeight"> </canvas> </div></template><script>//rate 换算比例(以宽为换算标准)//originWidt.
2021-12-16 15:36:23
1120
原创 封装时间戳
export function formatDate(time){ var date = new Date(time); var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours(), min = date.getMinute...
2021-11-25 15:41:31
436
原创 vue中对数组追加并去重
Batch_cleaning(data) { this.title.push(data.label); this.title=Array.from(new Set(this.title)); },利用es6中的set方法
2021-11-24 09:44:18
1615
原创 数组方法（自己总结）
增push() 添加到数组末尾unshift() 在数组开头添加任意多个值splice 传⼊三个参数，分别是开始位置、0（要删除的元素数量）、插⼊的元素concat() 会创建⼀个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组删pop() 删除数组的最后⼀项shift() ⽤于删除数组的第⼀项splice() 传⼊两个参数，分别是开始位置，删除元素的数量slice() ⽤于创建⼀个包含原有数组中⼀个或多个元素的新数组，不会影响原
2021-10-28 20:55:29
115
原创 数组去重（自己总结）
数组去重的场景将数组var arr =[1,1,‘true’,‘true’,true,true,66,66,false,false,undefined,undefined, null,null, NaN, NaN, 0, 0, ‘a’, ‘a’,{},{}]中重复的值过滤掉1、ES6-set使用ES6中的set是最简单的去重方法<script> var arr=[1,2,3,4,1,2,3] //先将数组转换为set var set=new Set(arr)...
2021-10-28 20:52:53
98
原创 diff算法（自己总结）
什么是diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单来说Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。有两个特点比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较diff算法的步骤用 JavaScript 对象结构表示 DOM 树的结构；然.
2021-10-28 20:49:43
1035
原创 插槽（自己总结）
什么是插槽在子组件中用<slot></slot>划出一块区域来显示父组件中的页面结构，显示的结构在父组件的子组件标签中设置就行）插槽怎么显示数据显示的结构在父组件的子组件标签中设置就行 插槽分为几种默认插槽 具名插槽 作用域插槽 作用域插槽怎么用 在子组件<slot></slot>通过v-bind绑定一个属性，挂载变量<slot name="content" v-bind:us="user"></slo...
2021-10-28 20:37:52
104
原创 git hook工具——husky和eslint（自己总结）
husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push 如何使用husky呢？这里我们可以使用自动配置命令：npx husky-init && npm install这里会做三件事：1.安装husky相关的依赖：2.在项目目录下创建 .husky 文件夹：npx huksy install3.在package.json中添加一个脚本：接下来，我们需要去完成一个...
2021-10-22 11:49:59
1509
原创 防抖与节流（自己总结）
函数防抖(debounce)在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。<body> <input type="text" id='unDebounce'></body></html><script> //防抖函数 function _debounce(fn, delay) { var delay = delay || 200; var timer; ret
2021-10-21 18:35:20
147
原创 项目的打包优化（自己总结）
项目结束后打包前webpack配置目的：提高打包速度 减小项目体积、提高首屏加载速度 提高用户体验（骨架屏）1.首先设置静态资源路径module.exports = { publicPath: './', // 静态资源路径（默认/，打包后会白屏） outputDir: 'dist', // 打包后文件的目录 （默认为dist） assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 默认为‘’没有单独目录j.
2021-10-21 10:44:20
629
原创 vue2与vue3数据双向绑定的区别（笔记）
vue2是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。但是vue2双向数据绑定存在问题：1.Vue 无法检测property的添加或移除。由于 Vue 会在初始化实例时对property执行getter/setter转化，所以property必须在data对象上存在才能让 Vue 将它转换为响应式的。2.当你利用索引直接设置一个数组项时，...
2021-10-21 10:22:57
290
原创 前端vue基础知识（必看）
5.1 Vue项⽬中有封装过axios吗？主要是封装哪⽅⾯的？axios的 API 很友好,可直接使用，但是随着项⽬规模增⼤，如果每发起⼀次HTTP 请求，就要把这些⽐如设置超时时间、设置请求头、根据项⽬环境判断使⽤哪个请求地址、错误处理等等操作，都需要写⼀遍,这种重复劳动不仅浪费时间，⽽且让代码变得冗余不堪，难以维护。为了提⾼我们的代码质量，我们应该在项⽬中⼆次封装⼀下axios再使用如何封装 设置接⼝请求前缀：根据开发、测试、⽣产环境的不同，前缀需要加以区分 请求头 : 来实
2021-10-19 16:13:49
911
原创 TypeScript基础知识（笔记）
一、原始数据类型1.布尔值在 TypeScript 中，使用boolean定义布尔值类型2.数值使用number定义数值类型3.字符串使用string定义字符串类型4.空值在 TypeScript 中，可以用void表示没有任何返回值的函数5.Null 和 Undefined在 TypeScript 中，可以使用null和undefined来定义这两个原始数据类型二、任意值任意值（Any）用来表示允许赋值为任意类型在任意值上...
2021-10-11 19:19:59
215
原创 vue路由传参的方式
第一种，使用query进行传参。query方式，必须定义path属性，通过query传参，然后在目标页面通过this.$route.query来接受参数。好处：刷新页面数据不会丢失。但是只能穿字符串，如果不是字符串，会转换为字符串，再传。this.$router.push({ path:'/home', query:{ id:id }})//路由配置{ path:'/home', name:Home, component:Hom
2021-09-02 10:52:30
459
原创 vuex的基本概念
1.什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化2.vuex能做什么 存储组件公共数据 3.vuex的核心vuex共有六大核心state：存储数据，存放vuex中的数据。mutations：存储方法 用来直接操作state中的数据。我们现在mutations中定义一个方法，设置两个参数分别是status和自定义参数，然后在页面中使...
2021-08-30 16:30:46
469
3
原创 vue基础语法(插值操作)
插值操作Mustachev-oncev-htmlv-testv-prev-cloak可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。...
2021-08-29 21:36:34
180
3
原创 如何封装axios
Axios 封装及接口管理utils/request.js 封装 axios ,开发者需要根据后台接口做修改。1.service.interceptors.request.use 里可以设置请求头，比如设置 token。2.config.hideloading 是在 api 文件夹下的接口参数里设置，下文会讲。3.service.interceptors.response.use 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录。import axios from 'axios
2021-08-29 21:27:19
158
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人