vue中常用的js方法
在 Vue 项目中，我们通常会封装一些常用的 JavaScript 方法，以便在多个组件中复用。以下是一些常见的 Vue 项目中常封装的 JavaScript 方法：。
1. 格式化时间在 Vue 项目中，我们通常需要将时间戳格式化为指定的日期格式。可以封装一个 formatDate 方法：
1234567891011121314151617181920function formatDate(date, fmt) { const o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds(), 'q+': Math.floor((date.getMonth() + 3) / 3), S: date.getMillis ...
2023-03-07面试题
1.为什么需要清除浮动，写出清除浮动的方式浮动元素在文档流中脱离了正常的位置，因此会导致父元素高度塌陷，影响布局的正确性和美观性。所以通常需要清除浮动。以下是常见的清除浮动的方式：
父元素设置 overflow: auto 或 overflow: hidden 属性：123.clearfix { overflow: auto;}
使用空标签清除浮动：12345<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="clear"></div></div>
123.clear { clear: both;}
使用伪元素清除浮动：12345.clearfix::after { content: ''; display: ...
2023-03-05面试题
1.http 有哪些缓存？分别介绍一下这些缓存的优缺点。HTTP 协议中的缓存主要分为四种类型：浏览器缓存、代理服务器缓存、网关缓存和 CDN 缓存。
浏览器缓存浏览器缓存是指浏览器在本地缓存 HTTP 响应以便下次访问时可以快速返回，从而减少对服务器的请求次数和网络带宽的消耗。优点是可以提高页面加载速度，减轻服务器负载，缺点是如果网站更新频繁，会导致缓存数据不一致，需要手动清除缓存。
代理服务器缓存代理服务器缓存是指在代理服务器上缓存 HTTP 响应，当下次请求相同的 URL 时，代理服务器可以直接返回缓存的响应，减少了请求的转发和网络传输时间。优点是可以加快响应速度，减少网络带宽消耗，缺点是缓存的数据可能会过期，需要定期更新缓存。
网关缓存网关缓存是指在应用服务器前面部署的缓存服务器，可以缓存整个页面或动态生成的内容。优点是可以加快页面响应速度，减轻后端服务器负载，缺点是需要额外的硬件和软件支持，需要维护和管理。
CDN 缓存CDN 缓存是指在全球各地部署的缓存服务器，可以缓存静态资源如图片、视频、JavaScript 和 CSS 等，通过 DNS 解析可以将用户请求转发到离用户 ...
vue3一些常用的自定义指令
一. Vue 3 中自定义指令的写法：123456789101112131415// 自定义指令名称为v-directive-nameapp.directive('directive-name', { // 指令绑定到元素时触发，el是指令所绑定的元素，binding是一个对象，包含指令的信息 mounted(el, binding) { // 指令逻辑 }, // 指令与元素解绑时触发 unmounted(el) { // 指令逻辑 }, // 指令所在元素被更新时触发 updated(el, binding) { // 指令逻辑 },});
二. 常用的自定义指令：
v-focus：自动聚焦到输入框中12345app.directive('focus', { mounted(el) { el.focus() }})
v-copy：复制指令绑定的内容到剪贴板，当元素被点击时， ...
node版本管理工具(nvm)
简介什么是 nvm、nodejs、npm？
12345nvm是一个node的版本管理工具，可以方便地安装&切换不同版本的nodeNode.js：基于Chrome V8引擎的JS运行环境（javascript代码运行环境）npm： 第三方js插件包管理工具，会随着node一起安装（Node package Manager）
下载安装下载地址：https://github.com/coreybutler/nvm-windows/releases1、 把电脑上面的 node 环境先卸载干净2、 安装时，建议选择手动安装版，然后疯狂下一步就行，不要尝试改变安装目录
检查安装在命令行输入 nvm 能出现反应就行 OK 了
开始使用安装 node 前配置一下镜像地址 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/
123安装node前配置一下镜像地址node_mirror: https://npm.taobao.org/mirrors/no ...
数组去重
JavaScript 中实现数组去重的方法有多种，其中常用的方法包括：
利用 Set 数据结构进行去重：
利用 Array.prototype.filter() 方法进行去重：
利用 Array.prototype.reduce() 方法进行去重：
利用 Object.keys() 方法和对象属性不重复的特性进行去重：
123const arr = [1, 2, 3, 3, 4, 4, 5];const uniqueArr = [...new Set(arr)];// uniqueArr: [1, 2, 3, 4, 5]
123const arr = [1, 2, 3, 3, 4, 4, 5];const uniqueArr = arr.filter((item, index, arr) => arr.indexOf(item) === index);// uniqueArr: [1, 2, 3, 4, 5]
123const arr = [1, 2, 3, 3, 4, 4, 5];const uniqueArr = arr.reduce((prev, curr) => ...
网站样式重置的几种方法
方法一：自己手写reset.css12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619 ...
判断两个数据是否相等
1. 普通数据类型JavaScript 中有 2 种方法可以判断两个数据是否相等:
使用运算符 ==，这种方法会自动进行类型转换，例如 “5” == 5 为 true。
使用运算符 ===，这种方法不会进行类型转换，例如 “5” === 5 为 false。
很多小伙伴再判断两个值是否相等都喜欢用===，ES6 中新增了一个 Object.is(val1,val2)方法对于 Object.is 来说，其运行结果在大部分情况中与===运算符相同，唯一的区别在于+0 和-0 被识别为不相等并且 NaN 与 NaN 等价。
1+0 === -0 //true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true
2. 复杂数据类型当比较两个复杂数据类型的值时，例如对象和数组，使用 == 或 === 运算符是不能得到正确结果的。 因为他们是比较对象或数组的地址而不是它们的值。可以使用如下方法：
使用 JSON.stringify() 将对象或数组转化为字符串，然后比较字符串是否相等。
...
基于vant的loading二次开发
由于 vant-loading 不满足项目要求,所以封装此组件,用于嵌套需要 loading 的元素
1.封装公共组件1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<template> <div class="common-loading-wrap"> <slot></slot> <div v-show="loading" class="common-loading"> <van-loading v-if="loading" color="var(--van-primary-color)" /> <div class="common-loading-mask">& ...
vue3学习（二）
十一. 父子组件传参
主要通过 defineProps，defineEmits, defineExpose 这三个内置对象
1. defineProps，defineEmits 的用法父组件:
1<menu @on-click="getList" :data="list" title="标题" />
子组件
12// 父传子 type Props = { title: string, data: number[] } defineProps<Props>() // 子传父 const emit = defineEmits(['on-click']) const handleClick = () => { emit('on-click', list) }</Props>
defineEmits 同时定义多个 emit
1const emit = defineEmits(['on-click1&#x ...
