vue学习笔记
chen_sir_sh
忙于生活,暂无个人简介。
展开
-
后端返还二进制excl表格数据时候,如何实现在前端下载表格功能及出现表格打开失败的异常处理。
后端返还一个二进制流的excl表格数据,前端需要对其解析,然后可提供给客户进行下载。思路:把二进制流数据转换给blob对象,然后利用a标签进行前端下载。以上问题需要更改一下接口请求数据的返回方式,如果正常情况下就可以解决下载问题。这样就可以解决下载的问题了。原创 2024-04-01 20:53:53 · 358 阅读 · 0 评论 -
vue学习笔记——Vue3循环生成表单时,对每一行新生成的数据添加表单验证的方法
把rules的验证规则循环写在element ui的el-form-item的标签上,动态绑定prop的值,使用index生成不同的prop来进行动态绑定。每次添加一个人员的时候,就是增加一个对象push到数组内,进行循环表单验证。在form表单内,动态生成一个数组类型的一组数据,要求对生成的每一组数据内容进行表单验证。例如动态添加人员,并对每个人的人员的信息输入框进行表单验证。原创 2024-03-22 11:08:51 · 471 阅读 · 0 评论 -
解决使用element ui时el-input的属性type=number,仍然可以输入e的问题。
其他的中文特殊字符都不可以输入,但是只有e是可以输入的,原因是e也输入作为科学计数法的时候,e是可以被判定为数字的,使用element ui时el-input的属性type=number,仍然可以输入e,但是有些场景是需要把e这种情况屏蔽掉的,我们可以使用如下的方法。在进行键盘事件输入时,进行监听,禁止e的输入。通过以上方法就可以解决。原创 2023-08-18 13:53:55 · 2436 阅读 · 4 评论 -
vue3 兄弟子组件相互调用方法的实现思路及解决方法
再在B组件内发射一个自定义事件,在组件C接受这个自定义事件的时候,进行A组件内的表单验证函数,书写一个回调函数(返还想要的参数,例如表单是否验证成功的布尔值)。vue实际开发过程中,可能需要在某一个子组件调用另一个子组件的方法,从而实现业务需求。最后在B组件内接收在这回调函数所返还的值,进行自己的业务逻辑代码的书写。利用共同的父组件C,我们可以在C组件通过ref来调用A组件的方法。如上就涉及到到组件B需要调用组件A的form验证方法。以上代码是逻辑实现,仅供参考。例如以下的一个业务场景。原创 2023-07-18 15:22:34 · 3568 阅读 · 2 评论 -
Vue3使用i18n插件实现多种语言切换的功能
i18n.ts为翻译文件的入口文件,此文件需引入全局main.ts文件内。index.ts为范围文件内容的导出文件。原创 2023-06-30 14:33:26 · 1346 阅读 · 4 评论 -
vue开发时,后端一次性返还过多数据时,利用slice方法对数据进行懒加载,使table滚动条滚动到底部时加载数据。
在处理后台返还数据较多时,前端不可能一次性把所有的数据加载在table列表内,我们可以监听滚动条,前端利用slice方法,来截取数据,从而 进行数据懒加载的实现。通过以上方法可以简单实现数据的懒加载。原创 2023-05-06 10:05:33 · 585 阅读 · 0 评论 -
Vue 网页端(pc)微信授权登录的流程与方法
1.在当前页面利用微信提供的api接口,生成二维码图片,用户扫码完成过后,跳转到微信授权登录中间页,判断微信返还的状态,是已注册还是未注册。以上的前提是配置好微信开放平台的回传的url地址。前端拿到后端返还的参数,配置在wxlogin的组件内,即可成功得到二维码图片。redirect_uri这里的url指的是扫码成功后所跳转回的url。我们可以在跳转完成回去的页面的生命周期内,进行对微信登录状态的判断等。像微信的api请求后获取到返还的url,再给前端,前端直接跳转到。重要的是配置回传跳转的路径。原创 2023-04-24 11:30:34 · 2890 阅读 · 0 评论 -
vue3使用element ui plus实现文件上传功能,可实现自定义处理上传列表,文件类型限制。
有的时候会对element ui 的上传文件功能模糊,简单做一个思路梳理和组件使用。代码内贴有注释,详细介绍代码使用规则。原创 2023-04-21 11:04:34 · 4103 阅读 · 0 评论 -
前端Vue开发,多关键字搜索时,搜索结果高亮显示(解决输入英文时,会错误的把html标签渲染的问题)
html标签,这个时候把html标签转化为一个特殊的符号,把这些所有的特殊符号的代表内容放如到一个数组内,再紧接着高亮渲染html标签,完成后,把原先特殊符号进行替换,依次替换成需要显示的html标签,即可。输入英文字符时,把html标签渲染出来的问题,比如在进行多关键字搜索时,可能会进行a;因为是多关键字搜索,首先考虑的是把关键词转换为一个数据,把关键词和文本信息进行一次循环比对,发现是重复的,就进行高亮显示,如果之前的第一个关键词已经关键词显示,那么此时文本已经存在了。//符合的html定义一个数组。原创 2023-02-20 14:30:06 · 1027 阅读 · 4 评论 -
Vue2和Vue3中常用的父组件调用子组件的方法。
子组件父组件。原创 2023-02-16 15:47:17 · 2217 阅读 · 0 评论 -
Vue2和Vue3时,利用Object.assign()方法对对象数据进行初始化或置空功能的实现。
点击新增按钮进行form表单的输入填写,当再重新打开弹框时,需要把弹框的内容重置。//this.$options.data() 获取该组件初始状态下的data。或者在实现重置按钮功能的时候,需要对某些数据进行置空的操作。//this.$data 获取当前状态下的data。通过vue2的内置方法来进行实现。原创 2023-02-15 17:04:05 · 3151 阅读 · 0 评论 -
Vue中对文案内容进行复制的两种解决方法:
在vue内实现复制文案功能,通过查阅文档,大多都是需要使用clipboard的插件,但其实只是简单的复制功能的话,可以使用如下的两种方法。原创 2023-02-08 17:03:31 · 443 阅读 · 0 评论 -
使用Element-Ui-Plus时,对select-v2进行自定义操作,可以自定义添加筛选后无数据的选项进行添加。
在最近的开发需求中,需要对element-ui-plus的select-v2的组件进行自定义的改装,即在搜索状态完成后,select-v2提供了一个属性方法,即allow-create的属性, 为了使 allow-create 正常工作,但是我们发现,使用这个属性后,如果输入的是已经存在的。使用自定义的空状态的插槽,设置一个添加按钮,监听该按钮,当发现无搜索数据时,点击添加按钮,就把。如果发现无搜索内容,可进行自定义的进行添加当前的select的input框内。当前的input的值替换为搜索框输入的值。原创 2023-01-13 14:50:41 · 2177 阅读 · 0 评论 -
解决使用element-plus时使用el-select-v2组件时,选中后无法移除focus的状态的方法。
我们可以使用element-ui-plus的el-select-v2的组件,实现复合搜索和下拉框的功能。原创 2023-01-12 16:19:40 · 2296 阅读 · 0 评论 -
使用Element ui的from表单验证时,绑定的值无法在验证函数中获取值,恒为undefined的问题分析。
在最近使用element ui的form表单功能进行开发时,通过prop绑定时,无法正确的获取value值,一直输出为undefined,通过调查发现,目前el-form的model主要用表单验证的,也就是配合el-form的rules和el-form-item的prop来使用的。上面是个错误的示范,如果把要验证的数据放在了model绑定的对象外,那么就无法获得数据,验证规则内会一直得到undefined。当你已经对该属性进行绑定后,那么接下来,你的表单的prop默认绑定的值就是model绑定的对象的值。原创 2022-12-13 18:29:14 · 2477 阅读 · 3 评论 -
解决element ui 使用table嵌套table时,在展开下拉列表时,自动关闭的bug
解决element ui 使用table嵌套table时,在展开下拉列表时,自动关闭的bug原创 2022-10-26 17:35:50 · 1087 阅读 · 0 评论 -
Vue2中Provide和Inject和Vue3中Provide和Inject爷孙组件传值响应式使用方法
在vue项目开发时,如果遇到爷孙组件时,应该如何快速处理呢?原创 2022-10-25 10:13:04 · 465 阅读 · 0 评论 -
如何在vue3内进行生成表格的功能?
如何在vue3内进行生成表格的功能?原创 2022-10-12 16:58:08 · 966 阅读 · 0 评论 -
vue2模板写法
【代码】vue2模板写法。原创 2022-09-27 15:16:08 · 750 阅读 · 0 评论 -
vue3 兄弟组件传值方法 使用中间件mitt------进行兄弟元素传值
在onmounted生命周期内接收值的兄弟组件引入,接受自定义事件和值。在发送值的兄弟组件引入,发送自定义事件,并进行传值。建立中间件bus.ts文件,导入mitt依赖。原创 2022-09-06 16:00:00 · 545 阅读 · 0 评论 -
vue学习笔记——Vue3-router误用导致route.push is not a function或router.push is not a function报错。
在VUE3内,我们进行路由跳转的时候我们使用的是useRoute()和 useRouter() 来进行前端的路由跳转的,报错解决在做实际项目时候,有时候会粗心大意把这两种搞混,导致如下的报错;错误代码: let router = useRoute(); router.push({ path: "/home" })正确代码: let router = useRouter(); router.push({ path: "/home" })通过检查发现,我想用的pu原创 2022-02-10 09:51:21 · 14959 阅读 · 3 评论 -
vue学习笔记——Vue3+element plus实现表单验证的方法
最近想实现vue3+element plus来实现表单验证,发现[element plus](https://element-plus.gitee.io/zh-CN/component/form.html#%E5%8A%A8%E6%80%81%E5%A2%9E%E5%87%8F%E8%A1%A8%E5%8D%95%E9%A1%B9)的官方沿用的还是vue2的方法来进行表单验证。通过查阅其他资料,写了一版关于vue3+element plus的表单验证模板,代码及注释如下:<template>原创 2021-12-23 18:23:28 · 11845 阅读 · 2 评论 -
vue学习笔记——父子组件传值,父传子,子传父
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-12-21 18:19:55 · 657 阅读 · 0 评论 -
vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。
VUE3出现了很多新的API,下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型,ref有value这个属性const name1 = { age: "14", name: "bob1" };const name2 = ref({ name: "bob2" }); // 使用ref创建一个数据类型 相对于reactive,ref有value属性name2.value = "bob3"console.log(name1); // {age:原创 2021-12-01 12:02:19 · 2495 阅读 · 1 评论 -
vue学习笔记——Vue3+element ui 如何在table组件内实现下拉列表的功能
在使用element ui plus时,想要在table组件内加入一个下拉列表的功能,发现在文档内没有展现,通过查阅其他文档发现可以使用如下的方法进行实现。下方是组件的完成代码,复制在项目内可直接看到效果。代码如下:<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="Date" width="180" />原创 2021-11-29 11:24:16 · 4769 阅读 · 2 评论 -
vue学习笔记——使用Vue3时出现 “export ‘createRouter‘ was not found in ‘vue-router‘ 报错的解决方法
通过npm下载router后,执行命令发现会出现如下报错。"export 'createRouter' was not found in 'vue-router'router的js代码如下:根据调查发现,是router的版本不符合VUE3通过下载新的router方法就可以,命令如下 npm install vue-router@next --save...原创 2021-11-25 16:39:27 · 3368 阅读 · 0 评论 -
vue学习笔记——Error: Connection lost: The server closed the connection. node搭建服务器连接mysql不定时出现此报错的解决方法。
问题描述:使用node搭建服务器与mysql进行连接的时候,有的时候经常会出现Error: Connection lost: The server closed the connection.的报错,每次启动服务器之后,过一段时间就会报错,导致服务器断开连接。在网上查了一些解决方法,经过试验发现,下面的方法比较好用。解决方法:在进行服务器连接数据库的时候,连接成功后,设置一个定时器,每五分钟自动查询一次,使服务器持续运行即可。代码如下;const connection = mysql.createCon原创 2021-08-17 17:32:44 · 2947 阅读 · 0 评论 -
vue学习笔记——使用vue+express搭建项目,利用前端路由history,每次刷新页面请求接口报404错误解决方法
使用express搭建后台,把vue打包好后的静态文件直接放到public文件。vue使用history进行路由配置的时候,前台刷新页面后,会导致出现404的页面。如下图。阅读vue的官方文档后发现了解决方法,简单记录一下。首先下载connect-history-api-fallback中间件npm install--save connect - history - api - fallback然后在app.js内引入该中间件var app = express(); //express框原创 2021-07-30 16:01:16 · 904 阅读 · 0 评论 -
vue学习笔记——过滤器的使用
vue 过滤器的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-06-28 22:07:28 · 156 阅读 · 0 评论