web前端
从入门到实战的一系列学习
valives
这个作者很懒,什么都没留下…
展开
-
vue3为什么舍弃了this.$set
因为vue2是用object.definedProperty来实现数据响应的,他无法监听深层数据的变化。所以需要使用this.$set来实现数据的修改和添加。而vue3是通过proxy代理来实现数据的响应,通过ref和reactive将值和对象类型变为响应式对象,所以这样对它的修改和添加就能被vue捕获到,从而实现页面的自动刷新。所以直接对对象本身进行修改或者添加就行了,this.$set自然就没用了。原创 2022-12-08 09:30:10 · 3052 阅读 · 0 评论 -
阻止谷歌对密码框进行默认填写的几种办法。
使用readonly参数使密码框默认不能填写,再通过onfocus事件触发removeAttribute方法将readonly属性移除。原创 2022-12-06 09:04:55 · 341 阅读 · 0 评论 -
vue获取dialog对话框中dom节点的办法。
但是el-dialog的dom节点是在dialog渲染出时才会有,但是这个时候vue的生命周期已经走完渲染了,所以在这种时候还想拿到则需要使用nexttick包裹起来进行获取。vue2在加载的生命周期里使用,Vue3 setup写法直接把内容写成函数然后在外部直接调用接口。原创 2022-11-03 17:38:30 · 1349 阅读 · 0 评论 -
i18n,通过tm来传值并调用函数的办法。
我们在使用i18n时,有时候会需要调用函数然后返回相应的值进行显示,这时候就不能用。原创 2022-09-11 17:23:43 · 646 阅读 · 0 评论 -
使用Object.key和delete来将对象中值为空的属性删除。
有些时候,我们在接口传值时,不需要把值为空的属性传过去,即可使用该方法来快速的删除属性。原创 2022-09-11 17:07:15 · 954 阅读 · 0 评论 -
element-plus表单验证bug记录
使用form表单进行提交时,表单验证validate根本没有反应,连失效都没有生效,原因在于使用validator来进行自定义表单校验时,写方法时,没有返回回调函数,使用validator必须要返回一个回调函数,即使else你完全不用,也必须要return一个callback,不然表单验证直接失效。原创 2022-09-11 17:03:29 · 863 阅读 · 1 评论 -
el-table,selection多选通过接口拿到数据后进行反显
【代码】el-table,selection多选通过接口拿到数据后进行反显。原创 2022-09-11 16:54:00 · 1058 阅读 · 0 评论 -
vue3创建和获取循环动态ref
此时每个元素的值便都存boxRefs数组中了,使用方法和使用数组无异,如下。然后在需要循环赋值ref的元素上使用setRef,具体如下。原创 2022-09-11 16:46:52 · 5712 阅读 · 0 评论 -
vue3 在script标签中使用i18n的办法
vue2,在script中使用i18n的办法和在页面中一样使用$t即可,但是这个在vue3中并不生效。解决办法是,创建好i18n后,把i18n给 export default暴露出去。而在global中,就有i18n的t,tc等方法。原创 2022-08-28 21:28:27 · 1458 阅读 · 0 评论 -
vue实现v-for和v-if一起使用的方法
所以我认为的解决办法是。在使用v-for的的组件外,再包裹一层template标签。再在上面使用v-if,因为template只是包装元素,他并不会在页面中进行任何的渲染。所以也能达到v-if和v-for共同使用。我们一般知道,v-if和v-for因为优先级的问题,所以不能在一起使用,但是有些时候又有这种场景的需要并且也不想改变页面布局。...原创 2022-08-28 21:10:43 · 2376 阅读 · 0 评论 -
v-if来实现触发方法
当我们需要在v-if重新渲染的同时还能够触发方法时,可以把方法直接写在v-if中,通过&&连接。通过短路判断该方法是否触发。原创 2022-08-08 18:14:08 · 810 阅读 · 0 评论 -
HTML 实现打电话
HTMLa标签的href属性tel点击可以实现调用手机。*请改成要拨打的手机号。原创 2022-07-20 13:31:43 · 6368 阅读 · 0 评论 -
前端控制台报错#Uncaught (in promise) TypeError: Cannot read properties of undefined (),用nextTick解决。 vue3
在页面渲染是,控制台报错Uncaught (in promise) TypeError: Cannot read properties of undefined (xxxx),但是页面依然成功渲染了。原因是接口请求是异步的,而页面上最初进行渲染的时候,还没有拿到接口的值,所以报错了但是正常渲染了,解决方法是通过nexttick加if判断。也就是将接口请求的办法写在nexttick中,下面是模拟代码:在页面上可以看到打印了两次1,因为第一次是没有获取到值的,通过这个操作可以让控制台不报错。......原创 2022-07-12 11:22:29 · 12977 阅读 · 1 评论 -
vue-infinite-scroll无限滚动组件
该组件主要用于滚动到底部后自动触发v-infinite-scroll绑定的方法原创 2022-07-05 17:27:56 · 1420 阅读 · 0 评论 -
typescript as unknown as 可能解释简记
as unknown as 是用来代替 as any的开发中经常会遇到类型定义的不太好原创 2022-07-05 12:26:48 · 4270 阅读 · 0 评论 -
vue3终止watch监听的办法
vue3终止watch监听的办法是:将watch赋值给一个变量,当达到条件调用watch赋值的那个变量就可以终止监听了。如:原创 2022-07-04 18:02:09 · 8395 阅读 · 4 评论 -
vue对element plus按需引入流程
第一步按照官方文档要求在终端中导入插件官方提供的是vite和webpack方法,这里选择webpack方法。但是创建的vue项目文件夹中并没有webpack文件。我们只需要在vue.config.js文件中进行引入就行了。但是我们不能直接按照官方文档的webpack方法引入,还需要添加一个configureWebpack命令在plugin之前最后具体内容如下:...原创 2022-07-02 12:44:30 · 329 阅读 · 0 评论 -
快速创建一个值一样的数组
输出原创 2022-06-29 11:43:45 · 260 阅读 · 0 评论 -
对象的字面量实现switch效果
字面量是用来为变量赋值时的常数量对象字面量是封闭在花括号对({})中的一个对象的零个或多个”属性名:值”列表。如对象的字面量实现switch效果效果如图原创 2022-06-21 18:14:14 · 92 阅读 · 0 评论 -
简易双向绑定
vue2.0双向绑定简易实现。原创 2022-06-21 14:36:11 · 142 阅读 · 0 评论 -
JS执行流程简记
异步分为宏任务(ajax请求,定时器,文件操作)和微任务(Promise.then、.catch、.finally,process.nextTick)原创 2022-06-18 16:17:53 · 154 阅读 · 0 评论 -
通过sleep实现每秒输出一个数。
最后输出0,1,2,3,4,每个输出间隔一秒原创 2022-06-14 09:54:20 · 77 阅读 · 0 评论 -
手写call和apply【JavaScript】
都是改变this指向。call传的是数据,apply传的是数组。原创 2022-06-12 15:01:21 · 66 阅读 · 0 评论 -
预编译简记
预编译的流程为:首先创建AO(activation object)对象,然后找形参和变量的声明来作为AO对象的属性名,值是undefined,然后统一形参和实参,最后找函数变量的声明,它会覆盖变量的声明。上面这个代码预编译情况为:原创 2022-06-02 10:17:25 · 46 阅读 · 0 评论 -
谷歌浏览器设置小于12px字体的办法
谷歌浏览器默认情况下字体最小只能设置到12px,小于12px的设置会无效化。解决办法:通过缩放来实现,如transform:scale(0.8),把它变为原来的0.几倍,即可实现设置小字体的效果。原创 2022-05-29 15:57:25 · 638 阅读 · 0 评论 -
防抖和节流简记
节流:一定时间内只调用一次函数防抖 :固定时间内,只执行最后一次的事件。用游戏做比方就是,节流是技能固定的cd,只有cd结束了才能重新释放技能,防抖是在技能引导期间重新按该技能的话就会重新计算时间。...原创 2022-05-28 18:09:28 · 206 阅读 · 0 评论 -
wx.request POST传递中文时显示乱码处理方法
微信小程序post传数据时,nodejs拿到的是乱码的中文,解决办法就是修改请求头:header修改为:‘content-type’:‘application/x-www-form-urlencoded;charset=utf-8’,即可,如图所示:原创 2022-04-14 16:47:27 · 853 阅读 · 0 评论 -
nodemon的配置和使用
在我们开发使用node.js时,每次修改文件后都要重新启动才能生效,非常浪费时间。而nodemon就能解决这项问题。它可以自动检测到目录中的文件更改;然后自动重新启动应用程序来调试基于node.js的应用程序。使用时首先安装成功后在package.json文件中找到script调试,将原来的start改成就能进行使用了...原创 2022-04-09 11:11:33 · 715 阅读 · 0 评论 -
nodejs拿到RowDataPacket中的值
拿到RowDataPacket中的值原创 2021-12-23 19:30:45 · 743 阅读 · 0 评论 -
JavaScript 可以直接通过ID来操作dom元素,不用进行获取
写代码时发现;JavaScript没有获取id,但却依然能够使用这个id节点进行操作,并且也能正常打印。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev原创 2021-11-17 22:25:12 · 4641 阅读 · 0 评论 -
基于HTML和css的静态网页仿写
具体效果为:采用的技术主要有:position定位浮动布局弹性盒子布局a链接 伪类表格表单等等首先全局设置为:*{ margin: 0%; padding: 0%; }ul,ol{ list-style: none;}a{ text-decoration: none; }html,body{ width: 100%; height: 100%;} #footer{ width: 100%; he原创 2023-03-07 11:22:03 · 3427 阅读 · 0 评论 -
前端跨域问题
跨域是一个页面想要获取另一个页面资源,如果两个页面的协议、域名、端口号、子域名不同,那么所进行的访问都是跨域的,而浏览器一般为了安全都限制了跨域访问,也就是不允许跨域访问资源。同源策略:从一个域上加载的脚本不允许访问另外一个域的文档属性 ,是浏览器上为安全性考虑实施的非常重要的安全策略 如果不限制跨域的话,安全性就会大大降低,很多恶意网站上的JavaScript脚本就能在用户登录时轻易获取用户名和密码。而克服跨域限制的方法有:(1)通过jsonp跨域(2)通过修改document.d原创 2021-10-18 14:07:05 · 141 阅读 · 0 评论 -
单标签末尾什么时候应该加完成闭合
单标签末尾什么时候应该加"/"完成闭合?如果文档声明使用XHTML和HTML4规范所有单独出现的,没有独立关闭标签的都需要在标签内使用"/"自我关闭.比如:<br/> <img/> <input/>等如果文档声明使用HTML5规范就可以不用加上"/"。如:<br> <img> <input>等由于浏览器的容错机制,多数情况下,错误的使用/并不会使展示的网页效果出现影响。不过,如果是用非浏览器的东西来进行解析,原创 2021-10-14 10:25:50 · 244 阅读 · 0 评论 -
JavaScript简介
JavaScript简介文章目录JavaScript简介JavaScript是什么Javascript特点Javascript引入内嵌式外链式JavaScript数据类型变量声明函数写法标准写法匿名函数法对象方法构造函数法对象事件处理JavaScript HTML DOMgetBoundingClientReect()方法JavaScript是什么JavaScript 是一种具有面向对象能...原创 2020-04-09 16:33:24 · 329 阅读 · 0 评论 -
canvas画布创建
文章目录canvas简介创建画布准备画笔坐标和起点绘制线条的方法绘制路径描边和填充canva绘制矩形和清除矩形绘制圆形绘制图片小例子canvas简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。创建画布<...原创 2020-04-11 10:49:06 · 842 阅读 · 0 评论 -
HTML视口相关的设置
文章目录视口概念meta标签媒体查询兼容js文件加载断点的设置百分比布局视口概念 视口在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器,分为两种视口,一种是可见视口即设备大小,另一种是视窗视口即网页宽度meta标签 HTML5中,标签可以用于配置视口属性。<meta name="viewport" content="user-scalable=no, width=...原创 2020-04-16 15:42:08 · 3946 阅读 · 0 评论 -
普通的轮播图
如图所示代码如下`<!DOCTYPE html><html ><head> <title> Bootstrap轮播插件</title> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible"content="ie-edge"> <meta name="viewport" content="width=device-wi原创 2020-05-19 10:22:40 · 143 阅读 · 0 评论 -
网页上的视频播放器
效果如图:代码详情如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...原创 2020-05-03 10:42:39 · 606 阅读 · 0 评论 -
HTML5增加音频和视频
文章目录video标签的用法video标签常用属性值video标签的视频格式DOM video对象audio标签audio对象DOM audio对象video标签的用法 在HTML5之前,网页中只能处理文字和图像数据,在HTML5中为网页提供了处理视频数据的能力,使用<video>标签来定义视频播放器,它的功能不仅仅是一个标签而已, <video> 标签的控制栏,...原创 2020-04-14 19:38:03 · 354 阅读 · 0 评论 -
bootstrap的用法
文章目录什么是bootstrap?bootstrap的框架怎么使用什么是bootstrap? Bootstrap来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Boots...原创 2020-05-04 10:51:05 · 210 阅读 · 0 评论