Vue
文章平均质量分 67
Ashley的成长之路
成为六边形战士!无论处于什么环境,向下生根,向上开花
展开
-
利用Vue3的新API(customRef)实现防抖效果
使用customRef实现数据更新防抖原创 2024-03-04 19:30:00 · 464 阅读 · 0 评论 -
Vue状态管理库-Pinia
vue的全局状态管理库Pinia的使用原创 2024-02-21 18:28:56 · 1298 阅读 · 0 评论 -
vue3组件通信方式汇总
vue3通信方式汇总原创 2024-02-20 16:57:37 · 1198 阅读 · 0 评论 -
Vue2 VS Vue3 生命周期
Vue2 和Vue3 生命周期对比原创 2024-01-28 16:15:04 · 836 阅读 · 0 评论 -
vue3中文档查漏补缺小笔记
个人有个习惯,就是隔一段时间有空的话就会重新看看技术栈的官方文档,每次重新看都会有新的意外的收获,就像在不同年龄的时候去看同一本书,总是伴随着不一样的体验,这感觉不错(????) 本文主要记录一下,我自己之前对于vue没注意到的一些语法或者知识点,所以内容比较散和没有结构,所看文档 为vue3中文文档 :介绍 | Vue.js目录1、模板语法->动态参数2、模板语法->缩写3、Data Property4、方法5、防抖和节流6、计算属性(co...原创 2021-11-07 15:57:57 · 709 阅读 · 0 评论 -
vue3.0性能优化点之静态标记(PatchFlag)
vue3.0性能优化点之静态标记(PatchFlag)原创 2021-11-04 17:02:19 · 4981 阅读 · 2 评论 -
vue3的composition api中watch和watchEffect的使用差异
watch和watchEffect的使用差异原创 2021-10-09 08:53:41 · 559 阅读 · 0 评论 -
vue组件通信方式总结
vue各个组件之间的作用域是独立的,数据能互相引用,在实际开发中,组件之间的数据交互无可避免,所以总结一下,可以通过哪些方式实现组件之间通信。一、组件之间的关系可以分为三大类 父子组件通信 兄弟组件通信 跨级组件通信二、通信方法如下 props/$emit (父子组件常用) $children/$parent provide/inject ref/refs eventBus Vuex (兄...原创 2021-04-27 14:33:06 · 162 阅读 · 1 评论 -
vue源码之工具函数中的looseEqual
在vue的源码中,工具集合util.js里有一个looseEqual 函数,这个算法的思想挺重要,代码当然也是写的很漂亮的,拜读大神写的代码,真的是非常享受的一个过程!!!本次主记录looseEqual,这个算法用于比较两个对象是否相等,因为在js中,对象是无法使用==来比较的, 因为对象是引用数据类型,比是地址。ES6有一个方法来判断两个对象是否相等 Object.is() 这个方法判断的是a和b是不是同一个指针的对象,即是不是同一地址,无法比较两个对象里的每个子项是否相同。1、先贴上源...原创 2021-03-08 17:18:16 · 715 阅读 · 0 评论 -
vue基于element封装分页组件
写管理后台,分页组件必不可少,提取一个分页公共组件,便于全局调用。在这个组件中把当前页、每页条数、每页条数选项、总条目数、组件布局、页码按钮的数量 都写成可通过props接收从页面传进来的参数,同时每个参数都设置默认值,这样用户就不用每个参数都要传值,在用户没有传值的参数中,就使用默认值,这样很好的提高了组件灵活性,满足多种场景需求。1、在vue项目的components文件夹下新建 pagination.vue文件,代码如下:通过props接收父组件传入的值,通过 自定义事件 $emi..原创 2020-12-08 16:53:23 · 727 阅读 · 8 评论 -
vue调试神器devtools的使用
工欲善其事,必先利其器!1、下载插件 官方推荐的仓库从克隆、安装 到编译会遇到各种报错,我直接把编译好的vue-devtools.crx放在了百度盘上,可直接下载 插件下载链接:链接: https://pan.baidu.com/s/12WKcFHZJromIdkn6-9U7fA 提取码: 65xh2、在浏览器地址栏输入:chrome://extensions/ 打开浏览器的扩展程序页面,将vue-devtools.crx文件直接拖到页面中,就可以看到多了vue-devt...原创 2020-09-16 15:17:59 · 1313 阅读 · 0 评论 -
解决element的el-input 输入框浏览器自动填充账号密码问题
浏览器会默认将已保存的账号密码 填充到input type值为password的输入框内,如果在登录页面,这是期望的,但是如果在注册页面、新增账号等页面,这就是超出需求了,如下:可以通过以下方法解决, 在type为passworld的input中加auto-complete="new-password"属性即可此外,我看到element官方文档的也有这个属性 用on 和off控制即可,我试了,两种方法都可以ps:刚好遇到这个问题,简单记录一下...原创 2020-05-11 14:10:45 · 15323 阅读 · 7 评论 -
vue项目按需引入Echart以及动态渲染Echart图表
最近做大数据展示平台,需要用到很多图表去实现数据可视化,图表比较多,但其实用到的就是 饼图、柱状图和折线图,如果完整引入,会多很多不必要的插件和增大包的体积,最近一直在上性能优化的课,明白 完整引入和按需引入的差别,所以认真去了解了Echart如何按需引入,在此记录一下:1、安装babel-plugin-equire插件,装在devDependencies 里,即装在开发环境里,不需要装在生产环境里npm install babel-plugin-equire -D2、在.b...原创 2020-09-01 12:23:16 · 2507 阅读 · 1 评论 -
pc端使用rem进行适配 (vu-cli3/4+lib-flexible+postcss-pxtorem)
1、使用vue-cli3 创建好项目 vue create responsive-website-template2、安装lib-flexible依赖原创 2020-07-24 17:15:38 · 3542 阅读 · 33 评论 -
在vue中使用WebSocket通信
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。很多人可能会问,我们不是已经有HTTP了吗?为什么还要推出websocket?万物产生必有因,HTTP请求有一个很大的缺陷,那就是,他只能由客户端发起通信,WebSocket 的全双工通讯很好的弥补了这一缺陷。 在websocket没有出现之前,很多网站为了获取实时数据,...原创 2020-04-25 10:31:47 · 1665 阅读 · 0 评论 -
在vue中wgs84和gcj02互相转化,地球坐标系转火星坐标系
在开始转化前先理清几个名词的定义,以及为什么要转化?WGS-84坐标系:也叫地球坐标系,他是国际上通用的坐标系,谷歌地图用的就是WGS-84(谷歌中国除外),使用GPS芯片或者 北斗芯片的设备获取到的经纬度就是符合WGS-84坐标系的。GCJ-02坐标系:也叫 火星坐标系或国测坐标系,他是由中国国家测绘局独创的坐标体系;它是一种对经纬度数据的加密算法,即 加入随机的偏差,国...原创 2020-01-07 15:13:14 · 4850 阅读 · 4 评论 -
vue数组的深克隆和浅克隆
在开发过程中,前端获取到后端的数据之后,通常直接复制后就使用,比如:var _data = res.data; //浅克隆 data是一个数组这就是浅克隆的写法,因为后端返回的data是一个数组,而数组是引用数据类型(自行了解基本数据类型和引用数据类型)如果我们接下来的代码对 _data 进行的处理操作,res.data也会一起改变,这是因为浅克隆, 克隆的是一个地址,下面我用...原创 2020-01-02 14:48:31 · 4704 阅读 · 0 评论 -
解决element 弹出多个message消息提示 问题
在新版本的element中,官方对 message消息提示 做了修改,修改成一个请求对应一个提示语,这就会导致一个多条消息提示共存的一个问题,而很多情况下,这多条消息提示的内容是一样的,从用户的体验来说,并不友好我们可以通过 重写 message 来解决这个问题首先 先写一个resetMessage.jsimport { Message} from '...原创 2019-11-08 10:56:04 · 13138 阅读 · 2 评论 -
win10开放端口、vue局域网访问
在vue项目中,启动之后,可以看到两个访问网址,一个本地访问地址(Local),一般为http://localhost:8080/ 还有一个是局域网访问网址(Network),一般是http://你本机的ip:端口/, 当你的vue项目运行起来之后,与你同在一个局域网内的其他人可以通过这个ip地址访问你的项目,公司现在流行前后端分离开发项目,有了这个局域网访问网址,很大程度的...原创 2019-06-10 18:40:55 · 6185 阅读 · 8 评论 -
vue-router 路由怎么传递一个或多个参数?
在前端开发过程中,经常会遇到 在页面跳转的时候 ,需要把一个或多个参数传到 目标页面,那么如何实现带一个参数或多参跳转呢? vue-router中传递参数主要分两大类:编程式的导航 router.push 声明式的导航 <router-link>本文主要演示一下编程式导航 router.push 传递参数的实现。编程式导航又分两种方式:第一种是...原创 2019-06-04 19:53:35 · 34463 阅读 · 7 评论 -
browserslist 目标浏览器配置
browserslist的作用:可以根据提供的目标浏览器的环境来智能添加css前缀,达到兼容旧版本浏览器的目的;这样避免了一股脑的添加,也避免冗余的兼容代码,以提高代码的编译质量。//packpackage.json 页{ "browserslist": [ //注意是一个数组 "> 1%", //全球超过1%人使用的浏览器 ...原创 2019-07-29 18:14:25 · 2225 阅读 · 0 评论 -
element table改指定行、列或单元格的样式
如果遇到技术需求是 改指定行 或指定列 亦或者 指定单元格 的样式,可以通过以下方式实现例如,要求表格第一列 ,左内边距 40px通过设置 el-table的cell-style、header-cell-style 实现,element 官网 有如下介绍首先,首先先写好回调方法,因为在项目的 多个地方会用到这个逻辑,所以,我将这个方法放到js文件中,用混合 (m...原创 2019-08-31 18:58:07 · 24651 阅读 · 6 评论 -
vue i18n+element +lockr 实现语言切换 国际化
在一些项目中需要做国际化,即显示语言切换,最常见的就是中英文切换,基于vue前端框架、结合element+vue-i18n即可实现,同时使用vue的本地存储插件 lockr 记录语言状态,可以防止因为刷新 而丢失语言状态。1、 首先 先在vue项目中安装 vue-i18n 和 lockr 执行语句:npm install vue-i18n --save ...原创 2019-06-12 21:18:59 · 1117 阅读 · 0 评论