<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[lwaner的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/lwaner</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; lwaner]]></copyright><item><title><![CDATA[Vue3的多根节点组件与父子组件之间的事件继承]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/141897436</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/141897436</guid><author>lwaner</author><pubDate>Wed, 04 Sep 2024 16:45:29 +0800</pubDate><description><![CDATA[Vue.js 3.x 版本不再对组件的 template 选项进行“唯一根节点”的限制，而是允许 DOM 结构具备多个根节点，即下列结构的全局组件在 Vue.js 3.x 版本中是允许的。]]></description><category></category></item><item><title><![CDATA[Vue 3 组合式 API]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/141862469</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/141862469</guid><author>lwaner</author><pubDate>Wed, 04 Sep 2024 16:23:35 +0800</pubDate><description><![CDATA[也就是组件是按照不同的选项来进行规划的，而不是按照组件的功能组成来进行规划的。版本的新增语法，该语法可以在大型组件中按照组件的各个功能对代码进行功能区域的划分，这样可以更加方便的管理并维护代码，同时也更好地体现了代码之间的逻辑关系。钩子函数的回调函数中，回调函数是一个使用箭头函数书写的格式。当单击页面中的命令按钮时，无序列表显示另外六个星座的名称。数据进行了侦听，同时使用了侦听属性的immediate 属性，即立即执行的侦听属性特性。➢ 钩子函数的参数是一个回调函数，具体的代码要书写在这个回调函数中。]]></description><category></category></item><item><title><![CDATA[组件的自定义事件]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/141850954</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/141850954</guid><author>lwaner</author><pubDate>Tue, 03 Sep 2024 10:16:11 +0800</pubDate><description><![CDATA[父子组件之间的通信，最主流的方法就是前面章节讲解的 props和$emit()方法。父组件通过自定义属性向子组件传递数据，子组件使用 props选项接收父组件传递过来的数据；父组件通过绑定自定义事件接收子组件传递过来的数据，子组件通过 this.$emit()方法调用父组件的自定义事件，来向父组件传递数据。本节针对组件的自定义事件，为读者讲解 Vue.js 3.x 框架中有关组件自定义事件的规定和语法要求。]]></description><category></category></item><item><title><![CDATA[pdf文件渲染到canvas]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/141564357</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/141564357</guid><author>lwaner</author><pubDate>Mon, 26 Aug 2024 15:27:04 +0800</pubDate><description><![CDATA[使用场景：拖拽或本地选取pdf文件、图片绘制到画布，且实现画布内编辑图片（旋转、拖拽、放大、缩小）等操作]]></description><category></category></item><item><title><![CDATA[多级父子组件的通信技术]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/140329078</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/140329078</guid><author>lwaner</author><pubDate>Thu, 11 Jul 2024 14:47:47 +0800</pubDate><description><![CDATA[在一个实际的项目中，一个父组件可能有多层次结构的子组件体系。如果这个父组件要向第三层、第四层甚至更深的子组件传递数据，则要一级一级的通过自定义属性来实现，这显然降低了工作效率。Vue.js 3.x 框架提供了 Provide/Inject 功能来快速实现这种多级父子组件之间的通信技术。在这里，由父组件提供数据，所以父组件被称为“Provide”（供应方），子组件接收数据，所以最组件被称为“Inject”（注入方）。本节就带领读者学习Vue.js 3.x 框架新增的 Provide/Inject 功能。]]></description><category></category></item><item><title><![CDATA[Vue 项目中 history 路由模式的使用]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/140328590</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/140328590</guid><author>lwaner</author><pubDate>Wed, 10 Jul 2024 17:02:01 +0800</pubDate><description><![CDATA[在最近帮客户开发的一个项目中，由于项目的特殊性，需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中，总结问题的解决方案并记录下来，希望能够保留这篇文档，以备将来遇到同样问题可以顺利解决。]]></description><category></category></item><item><title><![CDATA[VUE 修改密码功能+密码强度校验]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/140019327</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/140019327</guid><author>lwaner</author><pubDate>Thu, 27 Jun 2024 17:33:04 +0800</pubDate><description><![CDATA[【代码】VUE 修改密码+密码强度校验]]></description><category></category></item><item><title><![CDATA[vue h5项目预览pdf文件+电子签名]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/138144854</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/138144854</guid><author>lwaner</author><pubDate>Mon, 13 May 2024 15:15:45 +0800</pubDate><description><![CDATA[vue h5项目预览pdf文件+电子签名。1、vue安装pdfh5。签字板canvas.js。]]></description><category></category></item><item><title><![CDATA[vue element-ui 表格横向滚动条在合计项下方]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/137968300</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/137968300</guid><author>lwaner</author><pubDate>Fri, 19 Apr 2024 16:07:00 +0800</pubDate><description><![CDATA[1.隐藏bodyWrapper滚动条，显示footerWrapper滚动条。在el-table上加上ref=“detailTable”监听footerWrapper滚动条。]]></description><category></category></item><item><title><![CDATA[vue 表格循环多级表头]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/137535560</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/137535560</guid><author>lwaner</author><pubDate>Tue, 09 Apr 2024 09:02:37 +0800</pubDate><description><![CDATA[【代码】vue 表格循环多级表头。]]></description><category></category></item><item><title><![CDATA[js实现数组去重]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/136398425</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/136398425</guid><author>lwaner</author><pubDate>Fri, 01 Mar 2024 16:01:15 +0800</pubDate><description><![CDATA[五、js中数组也是对象，可以根据对象属性的特性。遍历数组，如果该值不是对象的属性，则在对象中添加等于该值的属性，并且同时把该值加入新数组。一、使用数组的indexof方法，如果element的index不相等则说明element相同，则过滤掉。三、遍历两个数组，将原数组的值和新数组的值一一进行比较，如果原数组的值不存在则加入新数组中。四、先将数组进行排序，然后遍历数组，将数组中每个值与其后一个值比较，如果不同则存入新数组。六、双重循环遍历数组，如果值相同，使用splice方法删去后一个相同的值。]]></description><category></category></item><item><title><![CDATA[js中一些常用的Math方法]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/131901425</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/131901425</guid><author>lwaner</author><pubDate>Mon, 24 Jul 2023 17:38:33 +0800</pubDate><description><![CDATA[Math.floor(n)：返回小于等于n的最大整数。Math.ceil(n)：返回大于等于n的最小整数。Math.random()：返回[0,1)随机数。Math.sqrt(n)：返回n的算术平方根。Math.round(n)：对n四舍五入取整。Math.pow(a,b)：返回a的b次方。Math.cos(a)：返回a弧度的余弦值。Math.tan(a)：返回a弧度的正切值。Math.abs(n)：返回n的绝对值。Math.max()：返回最大值。Math.min()：返回最小值。]]></description><category></category></item><item><title><![CDATA[截取字符串的三种方法]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/131832853</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/131832853</guid><author>lwaner</author><pubDate>Thu, 20 Jul 2023 16:08:45 +0800</pubDate><description><![CDATA[字符串截取]]></description><category></category></item><item><title><![CDATA[axios请求拦截器]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/129853456</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/129853456</guid><author>lwaner</author><pubDate>Thu, 30 Mar 2023 11:09:17 +0800</pubDate><description><![CDATA[axios特性：
1、axios 是一个基于promise的HTTP库，支持promise所有的API
2、浏览器端/node端（服务器端）都可以使用，浏览器中创建XMLHttpRequests
3、支持请求／响应拦截器
4、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
5、批量发送多个请求
6、安全性更高，客户端支持防御XSRF
使用场景
通常在出现请求数多的情况下，我们将会用到 axios 的一个API：拦截器。
页面发送http请求，很多情况我们要对请求和其响]]></description><category></category></item><item><title><![CDATA[JavaScript 正则表达式详解]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/127587070</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/127587070</guid><author>lwaner</author><pubDate>Sat, 29 Oct 2022 14:59:41 +0800</pubDate><description><![CDATA[正则表达式属于字符串范畴，由两部分组成：原义字符、元字符。
1、原义字符：书写在正则表达式中表示为字面意思的字符。
2、元字符：书写在正则表达式中表示为特定含义的字符。
基本元字符、范围元字符、重复元字符、转义字符、贪婪匹配符、后向引用。1、. 匹配任意字符。
2、* 匹配前一个字符出现的次数为0次或多次。
3、? 匹配前一个字符出现的次数为0次或1次。
4、+ 匹配前一个字符出现的次数为1次或多次。
5、^ 匹配以后面的字符开头。
6、$ 匹配以前面的字符结尾。
7、| 匹配|两端出现的字符中的任意一个，]]></description><category></category></item><item><title><![CDATA[Vue 2.0与 Vue 3.0的版本区别]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/122055658</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/122055658</guid><author>lwaner</author><pubDate>Wed, 24 Aug 2022 17:53:27 +0800</pubDate><description><![CDATA[Vue.js 2.x
Vue.js 3.x




基本结构
let vm=new Vue({data:{//数据区} })







Column 1
Column 2




centered 文本居中
right-aligned 文本居右



]]></description><category></category></item><item><title><![CDATA[vue项目数字滚动效果（支持整数、浮点数、金额带千分号）]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/125600489</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/125600489</guid><author>lwaner</author><pubDate>Wed, 06 Jul 2022 09:04:49 +0800</pubDate><description><![CDATA[数字翻牌器]]></description><category></category></item><item><title><![CDATA[vue项目防止按钮重复点击调取接口]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/124118858</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/124118858</guid><author>lwaner</author><pubDate>Tue, 12 Apr 2022 10:57:51 +0800</pubDate><description><![CDATA[场景
1.保存提交按钮不小心点击了多次。
2.由于服务器请求时间过长等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。
3.resize、scroll，输入框内容校验等频繁操作。
原因
由于axios提交数据为异步提交，点击提交按钮是通过xmlhttprequest向后端发送异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多]]></description><category></category></item><item><title><![CDATA[常用正则校验汇总]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/122110813</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/122110813</guid><author>lwaner</author><pubDate>Tue, 28 Dec 2021 16:44:48 +0800</pubDate><description><![CDATA[常用正则校验
1、手机号 /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
2、银行卡号校验 /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/
3、身份证 /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/]]></description><category></category></item><item><title><![CDATA[vue-router的实现原理]]></title><link>https://blog.youkuaiyun.com/lwaner/article/details/122055181</link><guid>https://blog.youkuaiyun.com/lwaner/article/details/122055181</guid><author>lwaner</author><pubDate>Tue, 21 Dec 2021 09:43:02 +0800</pubDate><description><![CDATA[官网文档，…, 下面这种路由表的写法比较优雅，我把路由单独写在一个文件routes.js .
router／routes.js 文件代码
const routes = [
  {
    path: '/',
    redirect: '/recommend'
  },
  {
    path: '/recommend',
    component: () =&gt; import('../components/recommend/view.vue')
  },
  {
    path: '/sin]]></description><category></category></item></channel></rss>