前端
关注
分享
扫一扫
文章平均质量分 54
孟孟_mengmeng
道阻且长，行则将至。
展开
-
触摸屏，解决iframe无法触摸缩放以及滚动的问题
3、设置-webkit-overflow-scrolling: touch;2、设置overflow:auto;这时在电脑端是可以滑动了，但是手机端还是不行的。1、设置固定的宽和高（单位：px）找到ifream的父级元素。原创 2023-04-27 14:59:49 · 1500 阅读 · 0 评论 -
用 vite 构建 vue3 + TS 项目
vue3+ts+vite搭建项目原创 2022-06-09 17:34:19 · 2772 阅读 · 0 评论 -
问题：vue3导入模块时报错---‘HelloWorld‘ is declared but its value is never read.Vetur(6133)
vue3不支持vetur 报错'HelloWorld' is declared but its value is never read.Vetur问题原创 2022-06-09 14:27:29 · 862 阅读 · 0 评论 -
js - 继承方式
总结一下js继承的几种方式1、原型链继承核心：将父类的实例（对象）作为子类的原型父类：function Father(name) { this.name = name}Father.prototype.age = 13;Father.prototype.getEat = function (food) { console.log('吃' + food)}子类：function Son(name) { this.name = name}Son.prototyp原创 2022-03-08 11:25:09 · 254 阅读 · 0 评论 -
关于回流与重绘的小结
在谈回流与重绘之前先梳理一下，浏览器的渲染过程。一、浏览器渲染过程1、解析HTML，构建DOM树2、解析CSS，生成CSS规则树3、合并DOM树和CSS规则，生成render树4、布局render树（Layout/回流），根据生成的render树，进行回流(Layout)，得到节点的几何信息（位置，大小）5、绘制render树（paint/重绘），根据渲染树以及回流得到的几何信息，得到节点的绝对像素，绘制页面像素信息6、浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite原创 2022-02-15 09:16:49 · 366 阅读 · 0 评论 -
vue-cli3搭建多入口应用项目搭建以及webpack配置
vue.config.js官方配置指南现附上官网链接。通过vue-cli3脚手架初始化项目之后，发现webpack的config配置文件没有了。这是由于vue-cli3将webpack的基础配置全部内嵌了。那我们想要优化或者修改配置怎么办呢？vue-cli3它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。通过一下步骤自定义webpack配置：1、新建vue.config.js在项目根目录下，新增js文件vue.config.js。vue.config.js 是一原创 2022-01-18 11:05:11 · 2325 阅读 · 0 评论 -
Cannot read property ‘upgrade‘ of undefined at Server.＜anonymous＞ (/Users/mengxianwei/studywork
配置完webpack后启动报错10% building 2/2 modules 0 active ERROR TypeError: Cannot read property ‘upgrade’ of undefinedTypeError: Cannot read property ‘upgrade’ of undefinedat Server. (/Users/mengxianwei/studyworkspace/single-multi-page/single-multi-page/node_mo原创 2022-01-14 15:59:43 · 997 阅读 · 0 评论 -
解决vue多次打包后出现浏览器缓存的问题
每次打包更新版本上传到服务器上，会偶尔出现代码没有更新还是旧代码的逻辑，这就代表浏览器存在缓存的问题了。解决方案每次打包改变js的名称就OK了，在vue.config.js 下修改/添加出口output，通过时间戳命名使每次包的名称都不一样1、vue-cli3中const Timestamp = new Date().getTime(); //时间戳configureWebpack: { output: { filename: 'js/[name].'+Timestamp+'.js原创 2022-01-14 08:45:00 · 1789 阅读 · 0 评论 -
vuex持久化处理
在使用vuex时有一个弊端就是，就是一旦页面刷新，所有之前存储的状态就全部没了，这是因为js代码运行在内存中，代码运行时所有的变量和函数都是保存在内存中的，刷新的时候以前申请的内存将会被释放，并且js脚本会被重新加载，变量重新赋值。所以在我们使用vuex的时候只要一刷新数据就没了。如果我们想要持久化保存数据可以使用 localStorage 或者sessionStorage 存储在本地，保证刷新后数据不会丢失。但我们也可以使用插件实现刷新后数据不丢失在这里我推荐使用这两个插件vuex-persisted原创 2021-12-23 16:52:13 · 1208 阅读 · 0 评论 -
vuex优缺点小结
vuex是vue中的状态管理模式。它采用集中式存储管理应用的所有组件的状态。项目中也会经常用到，今天总结一下其优缺点。1、优点能够在vuex中,集中管理共享的数据,易于开发和后期维护；Vuex 的状态存储是响应式的，当 Vue 组件从 store中读取状态的时候，若 store 中的状态发生变化，能够触发响应式的渲染页面更新 (localStorage就不会)，那么相应的组件也会相应地得到高效更新。js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便限定了一种可原创 2021-12-23 16:43:34 · 6810 阅读 · 0 评论 -
Vue中父子组件生命周期执行顺序小结
在单一组件中，钩子的执行顺序是beforeCreate-> created -> mounted->… ->destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢?组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载。父beforeCreate-> 父create -> 子beforeCreate->原创 2021-12-21 16:24:15 · 714 阅读 · 0 评论 -
tabbar uni.switchTab()传参数问题
因为uni.switchTab()实现跳转无法在链接上挂参数，如果想要传参数，需要通过Storage或者设置全局变量1、发送参数页面uni.setStorageSync("serviceItemId", serviceItemId); //赋值uni.setStorageSync("currentIndex", index); //赋值uni.switchTab({ url: '/pages/playList/index'})2、接收页面 onShow(e) { let current原创 2021-12-21 14:48:12 · 3815 阅读 · 0 评论 -
uniapp微信小程序自定义tabbar，并且实现每次切换都刷新页面
0、page.json定义页面pages"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/indexPage/index", //首页 "style": { "navigationStyle": "custom", "navigationBarTextStyle": "white" } }, { "path":原创 2021-12-21 14:36:08 · 7965 阅读 · 3 评论 -
小程序页面跳转的几种方式总结
最近在做微信小程序，碰到页面跳转的问题，总结一下页面之间跳转的方式1、navigateTo(OBJECT)这是最普遍的一种跳转方式，其官方解释为：“保留当前页面，跳转到应用内的某个页面”类似于html中的 window.location.href=" "eg：wx.navigateTo({ url: 'test?id=1'})实际效果如下：小程序中左上角有一个返回箭头，可返回上一个页面。也可以通过方法 wx.navigateBack 返回原页面2、redirectTo(OBJECT原创 2021-12-02 14:56:57 · 3797 阅读 · 0 评论 -
js中 object 常用方法总结
最近总用到object的一些方法和属性，做一下总结，方便理解以及之后查阅。1、Object.assign(target,source1,source2,…)该方法主要用于对象的合并，将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性，不拷贝继承的属性。1、Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。2、 Object.assign只能进行值的复原创 2021-10-09 17:01:53 · 1596 阅读 · 0 评论 -
vue ESLint报No ESLint configuration found
1.eslint简介eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件当有不符合配置文件内容的代码出现就会报错或者警告2.安装eslint(1)npm init -y(2)npm install eslint –save-dev(3)./node_modules/.bin/eslint –init 初始化配置文件(4)init初始化配置How would you like to use ESLint? (Use arrow keys)原创 2021-09-09 14:03:35 · 2255 阅读 · 0 评论 -
小程序引入组件库报错VM128:1 Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must
小程序引入uniapp组件库就报错VM128:1 Unhandled promise rejection TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object解决方案修改一下调试基础库就好了原创 2021-07-30 10:03:14 · 326 阅读 · 0 评论 -
微信小程序项目创建步骤
1、首先去微信公众平台注册账号https://mp.weixin.qq.com/2、安装微信开发者工具 （本文安装的是stable稳定版）https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html3、安装HBuilderXhttps://www.dcloud.io/hbuilderx.html4、打开Hbulider创建uni-app项目默认模版就可以5、设置微信小程序密钥（这步很重要）小程序密钥在已经原创 2021-07-30 09:55:51 · 1161 阅读 · 0 评论 -
html,css,js加载顺序
<head lang="en"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/*.css"> <script src="js/*.js></script></head>DOM文档的加载顺序是由上而下的顺序加载；1、DOM加载到link标签（css）css文件的加载是与DOM原创 2021-06-19 17:32:32 · 2049 阅读 · 0 评论 -
关于vue框架的一些小结。（为什么使用vue框架，vue的优缺点）
1、什么是vueVue是一套用于构建用户界面的渐进式的JavaScript框架。2、Vue.js的优点体积小;更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；3、为什原创 2021-06-19 17:03:40 · 3841 阅读 · 3 评论 -
前端常见事件触发总结
常见鼠标事件双击 ： @dblclick=“方法名” ；点击（单击）：@click=“方法名” ；鼠标按下： @mousedown=“方法名” ；鼠标抬起： @mouseup=“方法名” ；鼠标移动： @mousemove=“方法名” ；鼠标离开： @mouseleave=“方法名” ；鼠标离开： @mouseout=“方法名” ；注意⚠️*mouseleave和mouseout的区别在于mouseout有冒泡行为。鼠标进入： @mouseenter=“方法名” ；鼠标进入：原创 2021-06-19 15:35:11 · 994 阅读 · 0 评论 -
JS深拷贝、浅拷贝以及如何实现深拷贝（包括日期类型的和正则类型）
基本数据类型：undefined、null、number、boolean、string、symbol引用数据类型：object（数组、函数等都属于引用数据类型）1、为什么会有深拷贝浅拷贝区别？因为引用数据类型和基本数据类型的存储方式不同，因而有了深浅拷贝之分。基本类型直接存放在栈内存中，而引用类型栈内存中存放的是该对象在堆内存的起始地址，真正数据是存放在堆内存中的。基本数据类型复制，直接开辟新的栈内存空间，两者互不影响，因为位深拷贝。而引用类型复制，则是复制栈内存中存放的地址，两地址同时指向一个堆内原创 2021-06-16 19:00:11 · 869 阅读 · 1 评论 -
Vue3.X之常用Composition-Api
Composition API : 一组低侵入式的、函数式的 API，它使我们能够更灵活地「组合」组件的逻辑。一、setup() 函数（1）在学习 Composition-Api 之前，我们需要先了解一下 setup() 函数。setup()函数是vue3的新内容，它为基于 Composition API 的新特性提供了统一的入口。在vue3中，定义的methods、data、watch、computed等都可以放到setup()函数中（2）setup()函数执行时机setup()函数会在cr原创 2021-06-08 10:08:18 · 333 阅读 · 1 评论 -
vue 3.x 之新特性
1、性能（1）双向响应原理：由vue2基于es5的Object.defineProperty改为基于 ES6的Proxy，使其颗粒度更大，速度更快，且消除了之前存在的警告；（2）重写了 Vdom ，突破了 Vdom 的性能瓶颈（3）进行了模板编译的优化（4）进行了更加高效的组件初始化2、Tree-Shaking 的支持支持了 tree-shaking （剪枝）：像修剪树叶一样把不需要的东西给修剪掉，使 Vue3 的体积更小。需要的模块才会打入到包里，优化后的 Vue3.0 的原创 2021-06-07 17:12:59 · 153 阅读 · 0 评论 -
vue 3.x 之环境搭建及项目创建
一、环境搭建1、安装node.jsnode8.9或以上版本安装成功结束如何检查是否安装成功和版本node –v2、全局安装vue-cli3.0脚手架卸载：如果已经全局安装了旧版本的vue-cli(1.x 或 2.x)，需要先卸载：npm uninstall vue-cli -g安装：也是在cmd中输入命令 npm install -g @vue/cli查看版本号：vue -V，（大写的V）出现版本号即安装成功。3、安装淘宝镜像 cnpm (非必装，网络慢的情况可安装)npm原创 2021-06-07 16:58:31 · 214 阅读 · 0 评论 -
TypeError: Cannot read property ‘_wrapper‘ of undefined
TypeError: Cannot read property ‘_wrapper’ of undefined。这个问题直接导致了整个页面崩溃假死，是一个影响十分严重的问题父组件调用子组件遇到这个问题，因为子组件dom中绑定了click事件，但是却没有在methods方法中定义这个事件或者说click绑定事件没有体现在methods里。...原创 2021-06-04 11:31:37 · 605 阅读 · 0 评论 -
简单理解Vue中的nextTick
vue.nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。1、示例模版<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1"> {{msg1}}</div> <div v-if="msg2原创 2021-06-03 09:49:28 · 279 阅读 · 0 评论 -
ES6和CommonJs的区别
1、CommonJS是运行时候加载，ES6模块是编译的时候输出接口2、CommonJS是require()同步加载模块，ES6模块是import命令是异步加载，有一个独立的模块依赖的解析阶段3、CommonJS模块输出是一个值的拷贝，ES6模块输出的值是引用一、CommonJs模块输出一个值的拷贝，ES6模块输出值的引用1、commonJsCommonJS是一个值的拷贝也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。//demo.jsvar a=3;function add().原创 2021-04-22 15:27:52 · 1619 阅读 · 0 评论 -
AMD，CMD，UMD
前端语言JavaScript和TypeScript，对其中的模块加载很晕，就研究了一下现有的模块加载方式。模块加载从大的方面来说分为服务器端加载和浏览器端加载，下面仔细说明。一种服务器端模块化的规范，Nodejs实现了这种规范，所以就说Nodejs支持CommonJS。CommonJS分为三部分：require 模块加载exports 模块导出module 模块本身根据规范一个单独的JS文件就是一个module，每个单独的module是一个单独的作用域。也就是说在一个文件里定义的变量和函数都是原创 2021-04-22 14:35:45 · 810 阅读 · 0 评论 -
vuex的简单总结
最近做项目用到vuex，今天空闲下来，稍微整理一下关于vuex的使用以及原理方便理解。1、对于vuex的理解VueX是适用于在Vue项目开发时使用的状态管理工具。举了例子说明，如果在一个项目中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。当我们的应用遇到多个组件共享状态时，Vuex 可以帮助我们管理共享状态。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中原创 2021-04-13 17:07:05 · 252 阅读 · 0 评论 -
vue自定义指令 directive小结
自定义指令1、 无参数指令v-line指令demo//使用v-line指令<div><div v-line>商店</div></div>//定义v-line指令Vue.directive("line", function (el) { el.innerHTML = el.innerHTML + " ------------ "; el.style.color = "blue";});使用Vue.directive 来自定义第一原创 2021-04-08 16:54:43 · 414 阅读 · 0 评论 -
遍历二叉树，实现函数判断其叶节点数值从左到右
function isLeafAP(root) {if (root == null) {return 0;}if (root.right == null && root.left == null) {console.log(root.val)}var left = root.left;if (left != null) {this.isLeafAP(left);}var right = root.right;if (right != null) {this.i..原创 2021-03-25 20:27:21 · 382 阅读 · 0 评论 -
关于scss的一些总结
开始前先说下 SCSS 和 SASS 的区别：SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass。两者之间不同之处有以下两点：1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(????，而 SCSS 的语法书写和我们的 CSS 语法书写方式非原创 2021-03-24 19:43:22 · 332 阅读 · 0 评论 -
vue 组件中为什么data是函数而不是对象
1、声明式渲染vue文档在声明式渲染这一节中给了我们这样的一个demo:<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})在这个demo中data是一个对象，通过 new Vue 创建的 Vue实例中，我们直接把data上的message属性通过模板渲染到页面上去了。声明式渲染的demo中dat原创 2021-03-20 16:58:38 · 382 阅读 · 0 评论 -
vue组件导航守卫函数详解 beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave
Vue导航守卫beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave三个函数。以我自己的理解就是监听页面进入，修改，和离开的功能。每个守卫接受三个参数：to: Route: 即将要进入的目标路由对象from: Route: 当前导航正要离开的路由next: Function:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next():进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confir原创 2021-03-11 09:57:55 · 1039 阅读 · 0 评论 -
统计有效服务器算法
题目：这里有一幅服务器分布图，服务器的位置标识在 m * n 的整数矩阵网格 grid 中，1 表示单元格上有服务器，0 表示没有。如果两台服务器位于同一行或者同一列，我们就认为它们之间可以进行通信。请你统计并返回能够与至少一台其他服务器进行通信的服务器的数量。解题思路：1、第一次扫描，计算出每行有多少有效服务器，每列有多少有效服务器。2、第二次扫描，判断每个有限服务器所在行和所在列是否有有效服务器。有则把这个服务器计数，否则是无效服务器忽略。具体实现：/** * @param {n原创 2021-03-10 18:54:17 · 424 阅读 · 0 评论 -
算法给出由小写字母组成的字符串 S，重复项删除操作会选择两个相邻且相同的字母，并删除它们。
给出由小写字母组成的字符串 S，重复项删除操作会选择两个相邻且相同的字母，并删除它们。在 S 上反复执行重复项删除操作，直到无法继续删除。在完成所有重复项删除操作后返回最终的字符串。答案保证唯一。示例：输入：“abbaca” 输出：“ca” 解释： 例如，在 “abbaca” 中，我们可以删除 “bb”由于两字母相邻且相同，这是此时唯一可以执行删除操作的重复项。之后我们得到字符串 “aaca”，其中又只有 “aa”可以执行重复项删除操作，所以最后的字符串为 “ca”。/** * @par原创 2021-03-09 19:16:01 · 3758 阅读 · 0 评论 -
数组转换成字符串总结
用join()方法实现字符串转换成数组，以下几种情况：var a=['a','s','d']console.log(a.join())结果为： a,s,dvar a=['a','s','d']console.log(a.join(''))结果为： asdvar a=['a','s','d']console.log(a.join(','))结果为：a,s,d...原创 2021-03-09 18:18:44 · 105 阅读 · 0 评论 -
字符串转换成数组的几种情况
1、字符串转换成数组（1）splict（）方法，方法内什么参数都不传时,该字符串整体为一个数组例如：var a='abdcjw'console.log(a.split())//结果为：["abdcjw"]var b='asd,asd';console.log(b.split())//结果为 ["asd,asd"]（2）有参数，且参数为 ‘’ 时，把每个字符转成数组的每一个元素var a='abdcjw'console.log(a.split(''))//结果为： ["a"原创 2021-03-09 18:08:55 · 14133 阅读 · 0 评论 -
computed计算属性和watch监听总结
在开发中常用到计算属性和监听属性，虽然两者实现的功能很相似，但是还是有一定差别的，以下总结了computed计算属性和watch监听。1、computed计算属性计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步更新。//计算属性是根据data中已有的属性，计算得到一个新的属性，var vm=new Vue({ el:"#app", data:{ firstname:"李", lastname:"四"原创 2021-03-06 10:13:36 · 1206 阅读 · 0 评论