前端
文章平均质量分 59
温其如玉_zxh
道阻且长,行则将至。
展开
-
Vue组件传参方式总结(Vue2、Vue3)
依赖注入不仅可以父子传值,也可以传递给更深层次的子组件。如果提供的值是响应式数据,那么注入的值也是响应式的。所谓注入就是读取的意思。的值是实时同步的,所有组件都可以访问到,由于内容过多,本文不做详细介绍,附另一篇详细介绍。Pinia 使用方法内容有点多,本文限于篇幅,不做介绍,附一篇详细介绍使用方法的博客链接。的写法接收时需要断言类型,如果不确定是否使用需要加一个。如果是对象类型,需要使用。如果是对象类型,需要使用。使用方法的博客链接。原创 2023-06-13 15:56:56 · 1233 阅读 · 0 评论 -
前端上传图片并回显
考虑到上传文件是会多次使用的,所以把核心部分抽离出来,单独写到一个文件中。以下代码是用 TypeScript 写的,如使用 JavaScript 开发,去除类型断言即可。回显有两种方法,一种是长传到服务器,再将从服务器返回的文件流或图片地址展示出来;另一种是将图片转成 base64 ,再将 base64 展示出来。表示只能使用拍照,在移动端可以使用。// 清除 input 中的值。隐藏,通过点击按钮触发。原创 2023-06-06 15:55:14 · 2309 阅读 · 0 评论 -
vite.config.js 配置及优化
【代码】vite.config.js 配置及优化。原创 2023-05-29 17:09:46 · 569 阅读 · 0 评论 -
JS实现深拷贝的几种方法
通过递归的方式深度遍历对象,将每个属性的值进行复制。需要处理被复制对象为值类型的情况以及属性值中包含对象的情况。需要注意的是,为了防止循环引用导致死循环,需要记录已经遍历过的对象。是一个一致性、模块化、高性能的。原创 2023-05-27 16:50:18 · 4344 阅读 · 0 评论 -
Ant Design Vue表格(Table)及分页(Pagination )使用
最近在写一个新项目,UI框架用的是,因为之前一直用的Element UI,没有用过这个组件库,没想到二者区别这么大,因此踩了不少坑,其中就有Table和Pagination,花了一会时间才弄明白,在此记录并分享一下此次经历。注意:是 Vue3 项目。原创 2023-04-06 20:12:36 · 10101 阅读 · 1 评论 -
前端引入外部 js文件
这是最简单的方法,不过想来不是你想要的方法,因为这种方法在项目加载时就会引入,你可能需要在不同环境下判断是否需要引入,比如微信中引入,钉钉中不引入等。所以还有其它方法来引入。只能引入静态文件,外部文件是无法引入的。不过你可以将文件下载下来引入,这也是一种解决办法。你可以在引入前添加判断条件,来决定是否要引入。文件,专门用来写这类内容。原创 2023-03-31 17:42:54 · 4758 阅读 · 0 评论 -
Pinia使用方法及持久化存储
Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态。它跟Vuex有一定的相似度,但还是有很大的区别。愿意看这篇博客的人,想必已经看过了官方文档,官方文档很详细,包含各种使用情景和理论,因此本文不说理论,只说具体的使用方法,想深入研究的建议去看官方文档,本文适合拿来即用。Pinia 官方文档。原创 2023-03-24 15:38:48 · 20355 阅读 · 19 评论 -
nvm--node版本控制器使用说明
最近在写旧项目vue2和新项目vue3的时候,遇到了node版本兼容问题,一天要安装卸载重复 10 多遍,心态爆炸了,实在扛不住了,于是搜了一下 windows 的 node 版本控制器,没想到还真被我搜到了,就是这个nvm,可以自由的切换 node 版本,整个人瞬间心情愉悦了,下面来记录一下使用方法。原创 2023-03-14 10:29:53 · 266 阅读 · 0 评论 -
VSCode 开发配置,一文搞定(持续更新中...)
明明很短的标签,一行就可以显示,但是格式化后却频频换行,看着是不是别扭,别着急,按照下面的配置,轻松搞定它。这种密密麻麻的下划线,看着是不是很难受?取消这个配置,即可隐藏它。选择需要的代码片段或者创建一个新的,这里以。原创 2023-03-09 19:31:19 · 3249 阅读 · 1 评论 -
你真的弄懂this指向了吗
在说 this 指向之前,请观察以下代码,并说出它们的输出结果:第 1 组:标准函数let o = {// 输出值是什么?// 输出值是什么?第 2 组:箭头函数let o = {sayColor();// 输出值是什么?// 输出值是什么?call()apply()bind()是为了灵活改变函数this 指向而发明的,他们的主要用途也是用来改变 this 指向。当然,由于这些方法本身的特性,也可以用来做些其它的事情,比如计算数组最大值、最小值等。原创 2023-03-09 13:54:40 · 252 阅读 · 0 评论 -
JS垃圾回收机制
在说垃圾回收之前,我们首先需要了解的是,什么是垃圾?为什么要进行垃圾回收?JS中的函数,变量,对象等都需要占用一定的内存,当这些东西不再被使用的时候,就变成了垃圾已经调用完毕的函数作用域及其内部的值值为 null 值无法被访问到的值上面已经说了,JS中的所有的变量都会占用内存,当这些变量变成垃圾的时候,如果不进行回收,内存就会被一直占用,随着程序的运行,垃圾也会越来越多,总有一刻,内存会被占满,程序也就无法运行了。原创 2023-03-08 14:10:42 · 686 阅读 · 0 评论 -
html2canvas使用文档
大部分情况下使用默认配置即可,如有需要,可根据配置项标修改。以 vue 举例,这样写起来比较方便。如果想要将图片导出,可以这样写。原创 2023-03-06 18:04:14 · 4186 阅读 · 0 评论 -
Flex布局
flex 布局意为弹性布局,也称弹性盒子,任何容器都可以指定为flex 布局。相比于传浮动paddingmarginposition等布局,flex布局更加灵活,更加强大,也更容易实现自适应,同时也可以做到很好的兼容性,当然,这并不是说flex可以取代其它布局,只是在可以使用flex时候,更加推荐使用flex 布局。原创 2023-03-03 16:49:56 · 491 阅读 · 0 评论 -
浏览器输入url到页面渲染完成经历了哪些步骤
确认字符 (Acknowledge character),在数据通信中,接收站发给发送站的一种传输类控制字符,表示发来的数据已确认接收无误。传输控制协议(Transmission Control Protocol),是一种面向连接的、可靠的、基于字节流的传输层通信协议。的时候就已经开始了,并不是等到接收完成后才开始,解析的过程是自上而下,先解析当前节点的所有子节点,再解析兄弟节点及其子节点。SYN=1, ACK=1, seq=y, ack=x+1(确认字符为1,序列号为x+1,此处seq为。原创 2023-03-01 21:36:17 · 2060 阅读 · 0 评论 -
CSS把图片设置为背景
先列出几种常用的搭配,方便CV,想了解具体的可以看后面详细介绍第 1 组:刚好填充整个背景区域,不重复background-image : url("~@/路径");第 2 组:从左上角开始,垂直水平重复填充background-image : url("~@/路径");// 宽度 30px ,高度自适应。原创 2023-02-23 17:56:29 · 13104 阅读 · 0 评论 -
JavaScript的执行顺序
在说JavaScript的执行顺序之前,我们先回答一下以下几组程序的输出结果第 1 组} , 0);output(2);// 2 3 1第 2 组resolve();resolve();resolve();resolve();});});});resolve();});});看完上面两组案例,是不是会产生这样的疑惑,为什么输出的结果是这样的,别着急,下面我们来详细分析。原创 2023-02-21 17:45:41 · 315 阅读 · 2 评论 -
Git:husky > pre-commit(node v14.21.2)
此方法简单直接,但不推荐,代码的风格建议还是统一的好,方便阅读和管理。代码风格校验不符合规定,并非是程序错误。文件,删除它即可解决。原创 2023-02-21 11:34:19 · 539 阅读 · 0 评论 -
vue-axios封装与使用
Axios是一个基于promise网络请求库,作用于node.js和浏览器中。这是一个使用率很高的前端网络请求库,几乎所有的前端项目都会使用,本文主要介绍的是如何在vue项目中使用axios,并对其进行全面的封装。注意:本文内容主要来自于个人开发经验,如有不当之处,敬请谅解,也欢迎大家在评论区指出。原创 2023-02-20 15:15:04 · 1277 阅读 · 0 评论 -
前端上传文件
以vue举例,原生现在应该很少有人去写了。原创 2023-02-17 11:06:18 · 3610 阅读 · 0 评论 -
WebPack5学习笔记
这篇文章是学习笔记类型,内容会逐级深入,看完后可以对webpack有基本认知,且可以自行对项目进行配置。原创 2023-02-09 16:25:18 · 499 阅读 · 0 评论 -
Error: Cannot find module ‘diagnostics_channel‘
才有的功能,低于此版本的无法使用,可能是安装了新的淘宝镜像导致的。原创 2023-02-09 11:16:51 · 2673 阅读 · 0 评论 -
ERROR in [eslint] Failed to load plugin ‘import‘ declared in ‘.eslintrc.js‘: Cannot find module
插件,但启动配置没有做更改的原因。启动服务时报了这个错。原创 2023-02-09 09:37:19 · 3148 阅读 · 0 评论 -
安装cnpm和淘宝镜像
使用快捷键 win + R,并输入 cmd,回车输入以下命令。可以在 windows 搜索框搜索,可快速查找到此程序。有时会因为版本过高而报错,这时可以指定安装较低版本。以管理员身份运行此程序后输入以下指令。这个很简单,直接全局安装即可。原创 2023-02-03 17:56:50 · 2044 阅读 · 3 评论 -
前端常用网站资源(建议收藏)
提示:链接默认为官方网址,少数为个人收藏或本人博客文档地址待补充…原创 2023-01-28 16:15:13 · 79 阅读 · 0 评论 -
ES6数组新特性及操作方法总结
扩展运算符是`...`,可以将数组转为用逗号隔开的参数序列,它的用法有很多,以下列举几种原创 2023-01-17 19:41:27 · 249 阅读 · 0 评论 -
vue解决跨域问题
vue解决跨域问题很简单,只需要修改cli中的配置,在文件中修改以下内容即可,没有此文件的可以自行创建。原创 2023-01-16 16:16:44 · 998 阅读 · 0 评论 -
vue中~@和@的区别
以@开头的url,会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向的别名。指向的是src目录,且只能在和中使用,在中使用会报错。原创 2023-01-07 17:01:38 · 2758 阅读 · 1 评论 -
CSS那些超好用的样式
和三角形原理相同,但是需要设置宽度或者高度其中之一,边框依然只保留其中一个颜色,其余皆设置为透明,但两边要比保留的那一边要小。元素本身没有画三角形的样式,但是边框两边是斜角,所以只要把元素宽高设为0,再把边框设成透明,保留其中一个边框即可。以tab栏下划线举例。原创 2023-01-07 16:49:18 · 1345 阅读 · 0 评论 -
vant中Field输入框禁止输入空格
vant输入框组件在vue中禁止输入空格,按照不同引入方式,使用不同的方法原创 2022-08-22 11:50:12 · 3339 阅读 · 0 评论 -
H5接入微信公众号方法(超详细)
H5接入微信公众号方法(超详细)原创 2021-12-30 14:55:30 · 27097 阅读 · 0 评论 -
前端实现拖放功能
前言前段时间有一个朋友问我前端能否实现拖放功能,大体是用拖放来调整列表顺序。虽然我没有做过,但我见过有这种功能这样的网站呀,所以毫不犹豫的说绝对可以实现(反正不是我写)。谁知道才过去不到一周,我自己所就职的公司也要添加一个拖放功能,而且还升级了,比拖放改变列表顺序难度更大。。。。,没办法,做呗。好在我在我朋友问我的时候去网上查了下资料,看到了html5中有这么一个功能。话不多说,开始干吧。实现方法一、什么是拖放菜鸟教程-拖放功能简单来说,就是把一个元素拖到另一个地方,并完成相应的功能。官原创 2021-11-01 11:42:47 · 4009 阅读 · 0 评论 -
前端自适应实现方法
前端自适应实现方法(移动端)原创 2021-10-12 19:54:05 · 19205 阅读 · 3 评论 -
js获取并计算当前、过去、未来时间
一、获取时间获取当前时间的:年、月、日、时、分、秒注意:月份需要加1const now = new Date()now.getFullYear() // 当前日期的年now.getMonth() // 当前日期的月,返回 0-11,代表1-12月now.getDate() // 当前日期的日now.getHours() // 当前日期的时now.getMinutes() // 当前日期的分now.getSeconds() // 当前日期的秒获取当前周now.getDay() //原创 2021-10-05 22:26:56 · 1554 阅读 · 0 评论 -
scss颜色变量的使用方法
一、前言原创 2021-09-17 17:54:21 · 2871 阅读 · 0 评论 -
ES6解构赋值详解
一、解构赋值二、对象中部分属性赋值原创 2021-09-14 20:25:07 · 388 阅读 · 0 评论 -
在vue中使用echats的详细步骤及注意事项
一、安装echats// 使用npmnpm install echarts --save// 使用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -save二、引入echats原创 2021-06-04 17:15:37 · 463 阅读 · 0 评论 -
在vue中使用axios(详细通用版)
axios封装方法原创 2021-05-25 15:07:59 · 9159 阅读 · 4 评论 -
vue中怎么引入字体包(超详细)
vue中怎么引入字体包一、创建文件并添加字体包1、在src里面的assets文件中创建text文件(没有assets文件可以自己创建一个,也可以不用此命名);2、把字体包放入text文件,并创建一个text.css文件(命名随意),把字体包引入text.css文件中,font-family建议使用英文。text.css文件内容@font-face { font-family: "JDZY"; src: url('./font.woff'); font-weight: no原创 2021-05-24 10:15:15 · 15569 阅读 · 0 评论 -
vuex使用方法(详细实用)
vuex用法原创 2021-05-22 16:06:13 · 11996 阅读 · 1 评论 -
form表单常用方法(各种常用校验及计算)
form表单常用方法手机号校验export const checkPhone = (data) => { let value = true let code = /^1[3456789]\d{9}$/; if (!code.test(data)) { value = false; console.log('手机号格式错误') } return value}电子邮箱校验export const checkEmail =原创 2021-05-19 19:34:41 · 680 阅读 · 0 评论