muzidigbig-CSDN博客

原创 Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序

随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。一、什么是 vue 生命周期Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片二、生命周期函数Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/

2021-01-16 12:24:24 29668 8

原创 js编程黑科技，装逼指南，高逼格代码，让你惊叹不已

1.如何装逼用代码骂别人SB(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]2.如何用代码优雅的证明自己NB([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]3.另外一种undefinedvar data = void 0; // undefined4.论如何优雅...

2019-04-03 16:56:36 7252

原创前端好用工具推荐

1.图片处理工具Jinaconvert工具网站地址：https://jinaconvert.com/cn/这款图片处理工具也相当的强大，想要的各种各样的格式（JPG, PNG, GIF, BMP, TIFF, ICO, SVG和更多图片格式）都可以转换，在编程和生活中都可以用得到，赶紧收藏起来吧。2.代码在线测试工具 https://tool.lu/可以对js、css、...

2019-04-03 12:20:17 1007

原创 js-函数（闭包、私有、递归、自调）、变量(隐士)和作用域

JavaScript 函数将脚本编写为函数，就可以避免页面载入时执行该脚本。打印定义的函数名就相当于打印这整个函数函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。创建函数的语法：function 函数名(var1,var2,...,var...

2018-06-21 16:51:05 2216 1

原创 pc端和移动端默认样式重置(rem布局)

首先说一下，为何要用重置样式除了省心之外，还有两个好处1.方便设计师/程序员发挥白纸的感觉确实好。各种margin，padding，border的为0。。。2.便于发现前端代码的遗漏用了reset后，如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”，会非常扎眼（任何人都看得出来），开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没r...

2018-06-05 19:20:31 1576 1

原创 vue.js 三种方式安装(vue-cli)

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。下面介绍三种 Vue.js 的安装方法： 1.独立版本我们可以在Vue.js的官网上直接下载vue...

2018-05-29 07:49:05 325496 118

原创文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中、盒子居中

在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<t...

2018-05-23 10:37:12 31524 2

原创 html默认css样式的标签及去除(全局)

1.标签的默认样式和清除默认样式（统一全局样式）的代码大多数标签都有自己的默认样式，比如遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地...

2018-05-19 09:27:11 39752

原创微信小程序接入支付功能并实现支付

因此，在本文中，我们将介绍如何在微信小程序中实现微信支付。个人感觉类似微信小程序开发添加的request合法域名, 上面添加的这个目录,应该和你在后期在程序后台写的最终方法调用名一致,假设这里你设置的是 https://abc.cn/mypay/payOP。需要注意的是，在调用支付模块之前，需要先引入支付模块，并进行相应的设置和参数传递。2. 设置API密钥: 依次找到商户平台->账号中心->API安全->设置APIv2密钥设置后,可以把密钥拷贝出来记住,下面的code部分也需要该信息。

2024-03-26 17:42:02 749

原创 Vue3 组件之间的通信

使用defineEmits(['xxx'])

2024-03-22 21:43:27 1021 1

原创 Vue3基础

什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。- 类似于vue2.x中的 mixin。- 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。Vue Mixin 用法(实质是抽离出一个公共的vue实例)_vue app.mixin 公共函数-CSDN博客Vue3.x 中 hooks 函数封装和使用_mxin和钩子的区别-CSDN博客在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。

2024-03-22 21:41:32 1342

原创修饰符.sync与v-model区别

1、相同点都是语法糖，都可以实现父子组件中的数据的双向通信。2、区别点使用格式：传值方式：注意：v-model 只能有一个；.sync 可以有多个。此外，.sync是Vue 2中的指令，而在Vue 3中，v-model取代了.sync的位置，并且可以在一个组件中使用多次。修饰符.sync与v-model区别

2024-03-20 13:26:35 782

原创前端面试题

1、vue2和vue3的主要区别1、性能优化：Vue3对虚拟DOM进行了优化，例如使用了更高效的算法，缩减了代码量。此外，Vue3还利用Proxy代理优化了响应式系统，提高了性能。2、新特性：Vue3引入了Composition API，是一种函数式API。Composition API使得组合逻辑更加容易，能够更好地重用组件逻辑。3、Tree-shaking：Vue3支持更好的Tree-shaking（摇树优化）能力，使得项目打包后更加精简，加载速度更快。4、Typescript支持：Vue

2024-03-18 23:52:19 697

原创 JS的四种设计模式

将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值。就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送。只能被实例化(构造函数给实例添加属性与方法)一次。简单的工厂模式可以理解为解决多个相似的问题。

2024-03-18 21:25:12 523

原创 HTTP和HTTPS的区别，HTTPS加密原理是?

总之，HTTPS通过加密和认证技术保证数据传输的安全性，是一种更加安全可靠的网络传输协议，比HTTP更适合传输敏感信息和保护用户隐私。HTTP和HTTPS都是网络传输协议，主要用于浏览器和服务器之间的数据传输，但它们在数据传输的安全性、加密方式、端口等方面有所不同。

2024-03-16 23:35:28 954 1

原创微信小程序基础面试题

微信小程序自定义 TabBar 是指开发者可以自己定义底部的 TabBar，而不是使用微信小程序原生的 TabBar。自定义 TabBar 可以让小程序的底部导航更加灵活多样化，同时也可以更好地满足用户的需求。自定义 TabBar 的实现方法是在小程序的 app.json 文件中定义一个 tabBar 字段，通过设置tabBar.custom 属性为 true，告诉小程序使用自定义 TabBar。同时，还需要在 tabBar.list 字段中设置自定义 TabBar 的样式和图片等信息。

2024-03-15 16:52:51 874

原创前端接口防止重复请求实现方案

虽然大部分的接口处理我们都是加了的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做。

2024-03-15 00:20:22 1066

原创前端大屏适配几种方案

缺点：1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。通过监听浏览器窗口的大小，来改变scale的比例，从而实现数据大屏适配。（百度、网易等大数据适配的解决方案均是这个）我们整个大屏的尺寸设置和设计图一样，只是通过css的scale放大缩小属性，来控制实际展示的大小。方案二：scale（缩放）强烈推荐。空白的部分用背景图片填充就好了。1920*1080的设计稿。

2024-03-13 12:18:29 1521

原创 Vue首屏优化方案

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。

2024-03-11 20:00:01 1363

转载 js实现实时刷新(setInterval、WebSocket、EventSource)

可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历看下面的代码：当结果返回之后再延时触发下一次的请求，这样虽然没办法保证两次请求之间的间隔时间完全一致但是至少可以保证数据返回的节奏是稳定的，看似已经实现了需求但是这么搞我们先不去管他的性能就代码结构也算不上优雅，为了解决这个问题可以让服务端长时间和客户端保持连接进行数据互通h5新增了和 EventSource 用来实现长轮询，下面我们来分析一下这两者的特点以及使用场景。

2023-12-06 21:10:57 1114

原创 http面试题，三次握手四次挥手

在浏览器中输入网址按下回车经历了一个怎样的过程？总的来说分为以下几个过程：1、DNS解析：将域名解析为IP地址;2、TCP连接：TCP三次握手;3、发生HTTP请求;4、服务器处理请求并返回HTTP报文;5、浏览器解析渲染页面;6、断开连接：TCP四次挥手;

2023-12-02 20:37:15 1550

原创 Vue中实现自定义指令（directive）生命周期及应用场景

/ 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.})new Vue({router,store,

2023-11-30 11:40:15 1847

原创 Vue3.x 中 hooks 函数封装和使用

Vue3 自定义 Hooks 是组件下的函数作用域的，而 Vue2 时代的 Mixins 是组件下的全局作用域。Vue2 时代 Option Api ，data、methos、watch.....分开写，这种是碎片化的分散的，代码一多就容易高耦合，维护时来回切换代码是繁琐的！utils 是通用的工具函数，而 hooks 是对 utils 的一种封装，用于在组件中共享状态逻辑和副作用。它的主要作用是 Vue3 借鉴了 React 的一种机制，用于在函数组件中共享状态逻辑和副作用，从而实现代码的可复用性。

2023-11-30 10:25:28 1419

原创 Vue性能优化方法

1 在项目中，有一个比较大的组件需要加载，但是这个组件并不是每个页面都需要用到。我们大家都知道我们vue页面中所有的dom都是通过js执行然后才渲染完成的，我们的html代码实际上仅仅只有几十行，那么我们如果加载js时很慢页面就会出现一段白屏阶段，那么这个白屏阶段给用户的体验就不是很好，我们是否可以给一些显示给用户看呢？当我们的js加载完成之后我们的img就会被覆盖了，所以这种效果是特别好的，因为静态资源是在我们的项目当中直接有的，所以加载效率会特别的快，所以尽量让图片的大小变小这样会更好的提高项目效率。

2023-11-29 19:59:51 1046

原创 Vue3自定义指令（directive）

Vue2自定义指令（directive）Vue3自定义指令（directive）

2023-11-29 02:45:33 521

原创 js-md5的简单使用

MD5（单项散列算法）的全称是Message-Digest Algorithm 5（信息-摘要算法），经MD2、MD3和MD4发展而来。1.输入任意长度的信息，经过处理，输出32位的信息；2.不同的输入得到的不同的结果（唯一性）；3.根据32位的输入结果不可能反推出输入的信息（不可逆）1.防止被篡改，发布文件时同时发布文件的MD5值，在对方收到文件后再次进行MD5计算，最终获得的结果一样，说明未被篡改；

2023-11-28 11:09:58 2416

原创 FileReader与URL.createObjectURL实现图片、视频上传预览

把那么大一个视频编码成dataUrl放到内存浏览器肯定崩溃，用createObjectURL生成的url应该是指向硬盘中的视频而不用加载到内存。关于URL.createObjectURL方法的讲解和应用可以看。关于FileReader的讲解可以看。

2023-11-24 09:08:23 1064

原创 Vue.observable 是什么

Observable翻译过来我们可以理解成Vue.js2.6新增，让一个对象变成响应式数据。Vue内部会用它来处理data函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器在Vue 2.x中，被传入的对象会直接被变更，它和被返回的对象是同一个对象在Vue 3.x中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。

2023-11-23 21:22:48 675

原创 import 和require的区别

import 和require的区别import：编译时加载（效率更高）【由于是编译时加载，所以import命令会提升到整个模块的头部】（2）ES6 的模块自动采用严格模式，不管你有没有在模块头部加上 “use strict”;（3）CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。（1）CommonJs模块默认采用非严格模式。require ： CommonJs模块。CommonJs模块和ES6模块的区别。require：运行时加载。import ：ES6模块。

2023-11-22 11:14:05 120

原创前端下载文件的几种方式使用Blob下载文件

在前端下载文件是个很通用的需求，一般后端会提供下载的方式有两种：1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等）第一种方式比较简单，但是使用场景有限。第二种方式通用性更好。blob转file

2023-08-17 18:02:30 8126 1

原创 x-www-form-urlencoded、application/json到底是什么

在http协议中规定了GET、HEAD、POST、PUT、DELETE、CONNECT 等请求方式,其中比较常用的就是post和get，其中post用来向服务器提交数据，post只规定了提交的数据必须放在请求的中，但是并没有规定传输数据的编码方式。比较主流的有如下的几种编码方式1.application/x-www-form-urlencoded （HTTP中默认的提交数据的方式）2.multipart/form-data3.application/json4.text/xml

2023-08-13 09:43:58 2078

原创 vue-virtual-scroller的使用，展示巨量数据，长列表优化，虚拟列表

二、vue-virtual-scroller的使用，长列表优化，虚拟列表，纵想丝滑对于长列表数据有 10万多条来说，我们大部分的操作都是：1.懒加载，分页，2.Object.freeze 冻结数组取消响应式，因为大多时候都是展示3.高清图替换成缩略图，因为很多时候长列表的图尺寸都比较小，所以可以用小图来代替以上能解决大部分的长列表问题，在可以分页的情况下。但是，还有两个问题未解决，那就是：1.不能分页的时候怎么办2.当用户向下滑动加载了很多很多的内容时，可能是1000个10000

2023-08-06 22:35:01 5647

原创 load、unload和pagehide、pageshow

load 页面第一次加载时触发，前进或后退使用缓存不会触发pageshow 页面每次展示都会触发，前进或后退使用缓存会触发pageshow 包含 load触发时机：load先触发，pageshow后触发。pagehide先触发，unload后触发。

2023-08-04 09:58:56 631

原创 vue强制刷新的方法、组件销毁

在开发过程中,有时候会遇到这么一种情况：1.切换页面页面没有更新2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案,需要的朋友可以参考下1.强制刷新页面，出现短暂的空白闪烁。2.h5页面在安卓机方法不兼容。vue组件会在什么时候下被销毁?1.页面关闭2.路由跳转3.v-if为false4.改变key值

2023-07-29 12:50:02 6823 2

原创 javaScript隐式类型转换和显示类型转换

所谓隐式转换，就是当时，两边数据不统一，编译器会自动将两边数据进行数据类型转换成统一的再计算1、算术运算符：加（+）、减（-）、乘（*）、除（/）、取模（%），++，--，大小于（>、

2023-07-28 16:59:54 373

原创 vue params传参刷新网页数据丢失解决方法

上面没用到localStorage是因为如果用户跳转到页面A后，直接关闭浏览器，再打开浏览器输入网址，就能从本地存储找到该数据，但是。存储在localStorage里的数据如果不是主动去清除的话，就算浏览器关闭了，下次打开浏览器他还是会存在。上面的做法虽然满足了刷新网页数据不丢失，但是没满足第二个条件，数据出现在url地址里了。，这样虽然可以让数据不出现在url地址里，但是刷新网页会导致数据丢失。传参时，由于数据是拼接在url地址后面的，所以刷新网页不会导致数据丢失。传参，数据不会出现在url地址里。

2023-07-28 10:55:15 1614

空空如也

空空如也