Vue
文章平均质量分 57
Vue
朝阳39
钟爱编程,偏前端开发,欢迎私信我加入EC尽享编程俱乐部共同学习,交流成长!
展开
-
vue3【实战】可撤销重做的 input 输入框
/ 自动聚焦到输入框,避免失焦。// 自动聚焦到输入框,避免失焦。原创 2024-06-03 16:38:47 · 664 阅读 · 0 评论 -
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
喜欢原创 2024-05-06 20:22:52 · 679 阅读 · 0 评论 -
vue3 原理【详解】Proxy 实现响应式
为了解决,vue3 改用 Proxy 实现响应式。原创 2024-05-06 17:22:11 · 529 阅读 · 1 评论 -
vue3【详解】vue3 比 vue2 升级了哪些重要的功能?
vue2 使用 new Vue() 初始化实例vue3 使用 Vue.createApp() 初始化实例。原创 2024-04-27 03:42:42 · 1140 阅读 · 1 评论 -
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
Vue 3 中的数据基于实现响应式( vue2 中的数据通过方法和对数组变异方法的重写,实现响应式)原创 2024-04-27 03:37:13 · 1787 阅读 · 2 评论 -
vue3【详解】 vue3 比 vue2 快的原因
vue3使用的 Proxy 在处理属性的读取和写入时,比vue2使用的defineProperty 有更好的性能(速度加倍的同时,内存还能减半!原创 2024-04-19 11:32:22 · 990 阅读 · 0 评论 -
vue3【实用教程】侦听器 watch,自动侦听 watchEffect(),$watch,手动停止侦听器
侦听明确指定的状态变化执行回调。原创 2024-04-18 21:21:58 · 1345 阅读 · 0 评论 -
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
以为例:自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop,用于获取自定义的修饰符 modelModifiers : {原创 2024-04-18 16:58:47 · 3211 阅读 · 1 评论 -
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
按安装导航,一直 next 即可。node -v。原创 2024-04-17 17:55:37 · 516 阅读 · 0 评论 -
vue3【详解】选项式 API 实现逻辑复用
逻辑封装 useMousePosition.js。页面使用 index.vue。原创 2024-04-17 15:31:12 · 407 阅读 · 0 评论 -
vue3 生命周期(生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期)
vue3 支持两种风格书写:选项式 API 和组合式 API。原创 2024-04-16 14:30:21 · 1043 阅读 · 0 评论 -
vue 性能优化
在 beforeDestory 生命周期中执行,避免内存泄露,页面会越来越卡,最终卡死。原创 2024-04-15 18:11:11 · 696 阅读 · 0 评论 -
v-for 要用 key,且不能是 index和 random 随机数
v-for 要用 key 的原因可详见 vue 原理中的其核心要领在于,diff 算法中通过 tag 和 key 来判断是否是同一个节点,使用 key 能减少渲染次数,提升渲染性能。原创 2024-04-15 14:53:11 · 713 阅读 · 0 评论 -
vue-router 原理【详解】hash模式 vs H5 history 模式
在不刷新页面的前提下,根据 URL 中的hash值,渲染对应的页面。原创 2024-04-14 11:56:56 · 356 阅读 · 0 评论 -
vue2 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法
vue 的更新过程,是一种异步渲染,即并不是每一点 data 的改变都会立马触发视图更新, 而是会汇总 data 的修改,再一次性更新视图,这样可以减少 DOM 的操作次数,提高性能。vue 文件中支持指令、插值、JS 表达式,还能实现判断、循环,大大便捷了开发,但无法在浏览器中渲染,需要先将其转换成 JS 代码才行,这个转换的过程,即模板编译。vue 的响应式机制是在vue 实例初始化时建立的,即 data 函数中定义的变量,在页面初始化后,都具有响应式。1000 个节点,要计算1亿次,算法不可用!原创 2024-04-12 16:13:44 · 753 阅读 · 0 评论 -
vue 【详解】MVVM 理解
M —— Model 模型,即数据V —— View 视图,即DOM渲染VM —— ViewModel 视图模型,用于实现Model和View的通信,即数据改变驱动视图渲染,监听视图事件修改数据原创 2024-03-28 20:52:16 · 129 阅读 · 0 评论 -
vue2【详解】mixins —— 抽离公共逻辑
mixins 用于在 Vue 中便捷复用变量、方法、组件引用、生命周期等。原创 2024-03-22 21:47:05 · 533 阅读 · 0 评论 -
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
插槽:用于在子组件的指定位置插入指定内容,类似在电梯里挂的若干广告显示屏,可以给指定的位置传入指定的广告。原创 2024-03-22 16:42:47 · 1146 阅读 · 0 评论 -
vue2 自定义 v-model (model选项的使用)
父组件 father.vue。子组件 child.vue。原创 2024-03-22 15:51:16 · 1150 阅读 · 0 评论 -
vue2【详解】生命周期(含父子组件的生命周期顺序)
1——beforeCreate:在内存中创建出vue实例,数据观测 (data observer) 和 event/watcher 事件配置还没调用(data 和 methods 属性还没初始化)【执行数据观测 (data observer) 和 event/watcher 事件配置】2——created:实例已完成数据观测 (data observer),property 和方法的运算,watch/event 事件回调。原创 2024-03-08 06:57:59 · 1440 阅读 · 0 评论 -
vue 自定义事件的实现(可用于兄弟组件通信)
点击按钮后。原创 2024-03-06 23:32:17 · 559 阅读 · 0 评论 -
vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
/ 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置。// 在容器范围内移动时,被拖拽元素的最大left值。// 在容器范围内移动时,被拖拽元素的最小left值。// 在容器范围内移动时,被拖拽元素的最大left值。// 在容器范围内移动时,被拖拽元素的最小left值。// 按下鼠标时,鼠标相对于被拖拽元素的坐标。// 鼠标在拖拽区按下时触发拖拽。//此处+1为容器的边框1px。//此处+1为容器的边框1px。// 获取到vue实例。// 获取容器dom。原创 2024-01-17 15:59:51 · 828 阅读 · 0 评论 -
vue 开发规范
datas 模拟数据(接口联调后删除)mock 模拟接口(接口联调后删除)blogIndex.vue 博客首页。components 模块内的组件。components 公共组件。views 业务模块/页面代码。pages 模块内的页面。assets 静态资源。原创 2024-01-16 15:50:29 · 538 阅读 · 0 评论 -
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
得到公历日期 20240111。原创 2024-01-09 18:10:52 · 706 阅读 · 0 评论 -
vue 自定义网页图标 favicon.ico 和 网页标题
在内添加。原创 2024-01-09 15:53:15 · 1301 阅读 · 0 评论 -
el-select 支持拼音搜索(含插件 pinyin-match 的使用)
/ matchResult 的值为 true/false。原创 2023-12-27 10:36:20 · 993 阅读 · 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 · 1779 阅读 · 0 评论 -
el-select 全选
【代码】el-select 全选。原创 2023-12-20 15:49:15 · 568 阅读 · 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 · 2066 阅读 · 0 评论 -
css 巧用 ::after 和 ::before 实现竖排分类导航
/ 移除最后一项和高亮项的灰色线条。原创 2023-12-08 18:27:13 · 454 阅读 · 0 评论 -
css 巧用 ::after 实现 tab 切换动效
【代码】css 巧用 ::after 实现 tab 切换动效。原创 2023-12-08 16:24:31 · 542 阅读 · 0 评论 -
vue 限制在指定容器内可拖拽的div
/ 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置。// 在容器范围内移动时,被拖拽元素的最大left值。// 在容器范围内移动时,被拖拽元素的最小left值。// 在容器范围内移动时,被拖拽元素的最大left值。// 在容器范围内移动时,被拖拽元素的最小left值。// 按下鼠标时,鼠标相对于被拖拽元素的坐标。//此处+1为容器的边框1px。//此处+1为容器的边框1px。// 获取容器dom。原创 2023-12-06 17:52:59 · 525 阅读 · 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 · 332 阅读 · 0 评论 -
vue3 教程(中)
组件触发的事件不会冒泡,父组件只能监听直接子组件触发的事件。父组件–在引入的子组件上绑定事件子组件–用 defineEmits() 声明事件</< script setup > defineEmits([ 'enlarge-text' ]) // 多个事件则为 defineEmits(['inFocus', 'submit']) </ script >原创 2023-11-23 16:18:11 · 139 阅读 · 0 评论 -
WebSocket 【实用教程】
WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信,位于OSI模型的应用层。原创 2023-11-23 10:43:03 · 350 阅读 · 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 · 513 阅读 · 0 评论 -
vue实战——登录过期【详解】
现在普遍的登录权限校验方式是,当登录成功时,前端页面会获得一个 token ,每个 token 都设置了过期时间,通过解析 token 即可判断出 token 是否过期。token 过期,即登录过期。原创 2023-11-10 17:42:52 · 1187 阅读 · 0 评论 -
vue实战——路由访问权限【详解】
Vue Router 路由守卫。相关的 vuex 代码。原创 2023-11-10 15:21:21 · 203 阅读 · 0 评论 -
vue实战——登出【详解】
【代码】vue实战——登出【详解】原创 2023-11-10 14:45:32 · 195 阅读 · 0 评论 -
vuex——重置vuex数据
登出系统时,需将 vuex 中存储的数据,恢复为最初的默认状态。原创 2023-11-10 14:18:38 · 895 阅读 · 0 评论