Vue
文章平均质量分 54
Vue
朝阳39
钟爱编程,偏前端开发,欢迎私信我加入EC尽享编程俱乐部共同学习,交流成长!
展开
-
vue 性能优化
vue 性能优化方向原创 2024-04-15 18:11:11 · 750 阅读 · 0 评论 -
v-for 要用 key,且不能是 index和 random 随机数
v-for 要用 key 的原因可详见 vue 原理中的其核心要领在于,diff 算法中通过 tag 和 key 来判断是否是同一个节点,使用 key 能减少渲染次数,提升渲染性能。原创 2024-04-15 14:53:11 · 811 阅读 · 0 评论 -
vue-router 原理【详解】hash模式 vs H5 history 模式
在不刷新页面的前提下,根据 URL 中的hash值,渲染对应的页面。原创 2024-04-14 11:56:56 · 403 阅读 · 0 评论 -
vue2 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法
vue 的更新过程,是一种异步渲染,即并不是每一点 data 的改变都会立马触发视图更新, 而是会汇总 data 的修改,再一次性更新视图,这样可以减少 DOM 的操作次数,提高性能。vue 文件中支持指令、插值、JS 表达式,还能实现判断、循环,大大便捷了开发,但无法在浏览器中渲染,需要先将其转换成 JS 代码才行,这个转换的过程,即模板编译。vue 的响应式机制是在vue 实例初始化时建立的,即 data 函数中定义的变量,在页面初始化后,都具有响应式。1000 个节点,要计算1亿次,算法不可用!原创 2024-04-12 16:13:44 · 863 阅读 · 0 评论 -
vue 【详解】MVVM 理解
M —— Model 模型,即数据V —— View 视图,即DOM渲染VM —— ViewModel 视图模型,用于实现Model和View的通信,即数据改变驱动视图渲染,监听视图事件修改数据原创 2024-03-28 20:52:16 · 139 阅读 · 0 评论 -
vue2【详解】mixins —— 抽离公共逻辑
mixins 用于在 Vue 中便捷复用变量、方法、组件引用、生命周期等。原创 2024-03-22 21:47:05 · 577 阅读 · 0 评论 -
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
插槽:用于在子组件的指定位置插入指定内容,类似在电梯里挂的若干广告显示屏,可以给指定的位置传入指定的广告。原创 2024-03-22 16:42:47 · 1342 阅读 · 0 评论 -
vue2 自定义 v-model (model选项的使用)
父组件 father.vue。子组件 child.vue。原创 2024-03-22 15:51:16 · 1373 阅读 · 0 评论 -
vue2【详解】生命周期(含父子组件的生命周期顺序)
vue2 生命周期原创 2024-03-08 06:57:59 · 1648 阅读 · 0 评论 -
vue2 自定义事件(可用于兄弟组件通信)
点击按钮后。原创 2024-03-06 23:32:17 · 599 阅读 · 0 评论 -
vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
/ 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置。// 在容器范围内移动时,被拖拽元素的最大left值。// 在容器范围内移动时,被拖拽元素的最小left值。// 在容器范围内移动时,被拖拽元素的最大left值。// 在容器范围内移动时,被拖拽元素的最小left值。// 按下鼠标时,鼠标相对于被拖拽元素的坐标。// 鼠标在拖拽区按下时触发拖拽。//此处+1为容器的边框1px。//此处+1为容器的边框1px。// 获取到vue实例。// 获取容器dom。原创 2024-01-17 15:59:51 · 894 阅读 · 0 评论 -
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
得到公历日期 20240111。原创 2024-01-09 18:10:52 · 797 阅读 · 0 评论 -
vue 自定义网页图标 favicon.ico 和 网页标题
在内添加。原创 2024-01-09 15:53:15 · 1519 阅读 · 0 评论 -
el-select 支持拼音搜索(含插件 pinyin-match 的使用)
/ matchResult 的值为 true/false。原创 2023-12-27 10:36:20 · 1092 阅读 · 0 评论 -
vue 项目/备案网页/ip网页打包成 apk 安装到平板/手机(含vue项目跨域代理打包成apk后无法访问接口的解决方案)
则在打包成 apk 后会无法访问接口,因为app无跨域限制,不能使用跨域代理,需使用访问接口的绝对路径,如:原接口 “/myAPI/dmis/login” 需改为 “http://43.140.200.74:8810/dmis/login” 才能使用。若是 vue 项目,则保留新建的 test 项目中的 manifest.json 文件,将其他文件全部删掉,将 vue 项目打包后的文件拷贝到 test 项目中,范例如下图。默认配置了很多模块,如扫码、相机相册等,没涉及时建议取消,可减小apk包的大小。原创 2023-12-25 17:32:08 · 1910 阅读 · 0 评论 -
el-select 全选
【代码】el-select 全选。原创 2023-12-20 15:49:15 · 595 阅读 · 0 评论 -
uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)
/ 子组件调父组件的方法const'close'void</</</</</</</</</</</</</</</padding;;position;;.title;padding;text-align;font-size;;;color;right;top;.dt;font-size;color;;position;width;原创 2023-12-08 20:57:24 · 2360 阅读 · 0 评论 -
css 巧用 ::after 和 ::before 实现竖排分类导航
/ 移除最后一项和高亮项的灰色线条。原创 2023-12-08 18:27:13 · 514 阅读 · 0 评论 -
css 巧用 ::after 实现 tab 切换动效
【代码】css 巧用 ::after 实现 tab 切换动效。原创 2023-12-08 16:24:31 · 585 阅读 · 0 评论 -
vue 限制在指定容器内可拖拽的div
/ 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置。// 在容器范围内移动时,被拖拽元素的最大left值。// 在容器范围内移动时,被拖拽元素的最小left值。// 在容器范围内移动时,被拖拽元素的最大left值。// 在容器范围内移动时,被拖拽元素的最小left值。// 按下鼠标时,鼠标相对于被拖拽元素的坐标。//此处+1为容器的边框1px。//此处+1为容器的边框1px。// 获取容器dom。原创 2023-12-06 17:52:59 · 596 阅读 · 0 评论 -
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
效果预览技术要点——自适配全屏背景https://blog.csdn.net/weixin_41192489/article/details/119992992技术要点——密码输入框自定义图标切换显示隐藏https://blog.csdn.net/weixin_41192489/article/details/133940676技术要点——记住账号(支持多账号)核心需求和逻辑勾选“记住账号”,一旦登录成功过,下次登录能在账号输入框的输入推荐建议列表中,选择该账号未原创 2023-11-27 21:07:40 · 378 阅读 · 0 评论 -
WebSocket 【实用教程】
WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信,位于OSI模型的应用层。原创 2023-11-23 10:43:03 · 408 阅读 · 0 评论 -
vue实战——404页面模板001——男女手电筒动画
src\views\otherPages\404.vue<template> <div class="pageBox"> <svg width="100%" height="auto" viewBox="0 0 636 324" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="OBJECTS">原创 2023-11-15 16:00:21 · 573 阅读 · 0 评论 -
vue实战——登录过期【详解】
现在普遍的登录权限校验方式是,当登录成功时,前端页面会获得一个 token ,每个 token 都设置了过期时间,通过解析 token 即可判断出 token 是否过期。token 过期,即登录过期。原创 2023-11-10 17:42:52 · 1380 阅读 · 0 评论 -
vue实战——路由访问权限【详解】
Vue Router 路由守卫。相关的 vuex 代码。原创 2023-11-10 15:21:21 · 238 阅读 · 0 评论 -
vue实战——登出【详解】
【代码】vue实战——登出【详解】原创 2023-11-10 14:45:32 · 214 阅读 · 0 评论 -
vuex——重置vuex数据
登出系统时,需将 vuex 中存储的数据,恢复为最初的默认状态。原创 2023-11-10 14:18:38 · 995 阅读 · 0 评论 -
vue 本地/PC端访问微信云数据库
新建文件 vue.config.js若部署上线,需配置nginx反向代理,可参考下方链接。原创 2023-05-20 16:49:47 · 1144 阅读 · 1 评论 -
vue 在线聊天实战范例(含选择发送表情、图片、视频、音频,自定义右键快捷菜单,一键复制,左右聊天气泡)
最终效果完整代码index.vue<template> <div class="page"> <div class="leftBox"> <h1>访客</h1> <div class="chatBox"> <div class="chatRecordBox"> <div v-for="(item, index) in chatRec原创 2023-05-18 15:01:35 · 4197 阅读 · 7 评论 -
vue 组件封装 -- 添加【呼吸】动画效果(两种: 淡入>>淡入,淡入>>淡出>>淡入)
常用于展示某异步操作持续执行中。原创 2023-04-05 20:06:08 · 1058 阅读 · 0 评论 -
纯前端导出表格数据 -- csv格式 (含表格末尾的自动合计行)
核心代码详见代码中的备注<template> <div class="page"> <el-button type="primary" size="small" @click="exportOut">导出</el-button> <div class="tableBox"> <el-table :data="tableData" border :summary原创 2023-03-30 16:57:06 · 1537 阅读 · 0 评论 -
vue 渲染树型数据(含树型数据转化为一维数组的方法,包括每个节点的深度和深度列表)
vue 渲染树型数据(含树型数据转化为一维数组的方法,包括每个节点的深度和深度列表)原创 2023-03-13 14:08:02 · 861 阅读 · 0 评论 -
vue 官方测试工具 unit-jest 实用教程(含实战范例:登录组件的测试)
vue 官方单元测试工具的使用原创 2023-01-11 15:46:29 · 669 阅读 · 1 评论 -
vue 批量绑定属性(你可能没这样用过 v-bind)
v-bind 批量绑定属性原创 2023-01-05 17:14:43 · 2116 阅读 · 2 评论 -
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue 快捷键开发原创 2022-12-08 09:15:50 · 1857 阅读 · 0 评论 -
vue 组件封装——可自由拖拽移动的盒子
可自由拖拽移动的盒子原创 2022-12-07 16:57:53 · 969 阅读 · 0 评论 -
element UI 组件封装--搜索表单(含插槽和内嵌组件)
轻松创建搜索表单原创 2022-11-22 09:44:33 · 1254 阅读 · 1 评论 -
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
在表单中,可能部分表单项需封装成自定义组件,如何在表单提交时,能同步触发自定义组件的表单校验?原创 2022-11-21 15:44:31 · 1343 阅读 · 0 评论 -
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
一文搞定波形图!原创 2022-10-28 22:24:15 · 4383 阅读 · 1 评论 -
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
点我在线预览监听键盘事件根据按键值判断输入是否正确,若正确则添加属性 type 为 success ,字符变绿 ;输入错误则添加属性 type 为 danger,字符变红 (type 值来自 el-tag 对应的效果)当前关的字符输入完后,按任意键都会判定通关结果,输入全部正确才能通关判定结果后,按回车键/空格键,若通关则开始下一关,若失败则重新挑战为提升用户体验,每一次输入都会配音效,并统计输入正确和错误的次数element UI 需升级到 2.15原创 2022-07-27 16:41:26 · 544 阅读 · 0 评论