Vue.js
文章平均质量分 84
Vue.js
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
Vue 指令详解 - 权限示例
在介绍 Permission 指令之前,我们先来简单了解一下自定义指令是什么。Vue的自定义指令通过方法来创建。bind:指令第一次绑定到元素时调用。在这里可以执行一次性的初始化设置。inserted:被绑定元素插入父元素时调用。注意,父元素可能还未存在,所以不能进行DOM操作。update:被绑定元素所在的组件更新时调用,但是可能发生在其子组件更新之前。可以比较更新前后的值,执行相应的操作。:被绑定元素所在的组件及其子组件全部更新后调用。可以执行操作,例如更新DOM。unbind:指令与元素解绑时调用。转载 2023-12-05 11:06:36 · 124 阅读 · 0 评论 -
Jenkins + GitLab + Harbor + Kubernetes实现CI/CD
说到Kubernetes的CI/CD,可以使用的工具有很多,比如 Jenkins、Gitlab CI 以及Tekton等等,这篇文章分享Kubernetes结合Jenkins、Gitlab、Harbor实现一个CI/CD流水线。系统管理-->节点管理-->Configure Clouds,配置完成点击测试连接,如果显示kubernetes集群版本信息,说明配置正确。涉及的部署资源清单比较多,由于文章篇幅原因,文章中仅提供部署清单目录结构及配置步骤,如需部署清单,可在公众号后台留言。从gitlab拉取代码。转载 2023-12-05 11:04:22 · 145 阅读 · 0 评论 -
Vue3 中组件通信的四种方法
都知道,在 Vue 或者 React 应用中,我们无时无刻不在关注组件之间的通信。今天我们就以 Vue 为例,总结一下组件通信的方式有哪几种。今天的内容主要包括以下四部分:父组件如何访问子组件实例;子组件如何访问父组件实例;如何使用 Provide/Inject 完成子组件到父组件的多级访问;通过事件监听器如何实现父子组件间的通信。话不多说,让我们正式开始。转载 2023-12-05 11:00:09 · 239 阅读 · 0 评论 -
在vue中更优雅的封装第三方组件
v-bind="$attrs"的妙用是在创建更高级别的组件,在封装第三方组件时,可以自动将在父作用域中使用的v-bind的属性自动绑定,并向下传入被封装的使用了v-bind="$attrs"的组件。一段摘自 vue 官网的介绍包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),转载 2023-12-05 10:53:40 · 50 阅读 · 0 评论 -
Vue3中 router 带来了哪些变化?
*我想,就介绍这么多吧,上文介绍到的只是改进的一部分,感觉还有很多很多东西需要我们去了解和掌握,新版本给我们带来了更灵活的编程,让我们共同期待 vue 3.0 到来吧。转载 2023-09-19 09:38:58 · 212 阅读 · 0 评论 -
Vite 打包 chunk 优化
同时,通过这次优化,也告诉我们在开发 JS 模块的时候要尽量避免模块副作用,将模块级别中的函数调用比如模块的初始化等,交给模块的使用方来做。这样的后果是 Vite 构建出来的文件数量更多,而 Webpack 构建出来的代码量更多(重复代码加上 Webpack 运行时的代码)。但是,用 Webpack(5.41.0)构建出来只有三个文件(index,a,b),其中 a 和 b 中都有 c 的代码。可以看到,a b c 的代码都合并到了一个 chunk 中,看来这个问题就这么简单的搞定了!但是可以当做纯函数。转载 2023-08-09 09:38:36 · 319 阅读 · 0 评论 -
万字总结 JS 数据结构与常用的算法
首先,为什么我会学习数据结构与算法呢,其实主要是有两方面第一,是我在今年的flag里明确说到我会学这个东西第二,学了这些,对自己以后在工作或者面试也会带来许多好处然后,本文是最近学习的一个。转载 2023-08-09 09:36:38 · 55 阅读 · 0 评论 -
前端图片编辑实现
点 9 图是一种特殊的图片样式,可以确保图片拉伸时,所设定的。转载 2023-08-09 09:40:39 · 231 阅读 · 0 评论 -
19 个实用的 ES6 代码片段,解决常见的 JavaScript 问题
【代码】19 个实用的 ES6 代码片段,解决常见的 JavaScript 问题。转载 2023-08-09 09:40:52 · 71 阅读 · 0 评论 -
前端开发技术栈(工具篇):2023深入了解快速开发工具vite的安装和使用(详细)
Vite是新一代前端开发与构建工具,能够显著提升前端开发体验。Vite意在提供开箱即用的配置,同时它的插件API和JavaScript API 带来了高度的可扩展性,并有完整的类型支持。由于其原生 ES模块导入方式,可以实现非常快的冷服务器启动。Vite 是 vue 的作者尤雨溪在开发vue3.0的时候开发的一个。转载 2023-08-09 09:41:24 · 6183 阅读 · 0 评论 -
轻松实现一个自由拖拽的组件
这篇文章中我们实现了页面设计器组件自由布局的最简demo,让大家理解自由拖动的实现原理。下面我们来分析一下如何实现将组件列表中的组件拖动到画布中,上文中我们讲到,拖动的元素以及目标元素可以设置一系列的事件,那么我们就可以在组件列表渲染时,为每个组件设置一下。事件的监听,当画布中的组件进行移动时,我们实时的将该被移动元素所对应的元数据坐标进行更新。那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢?属性控制被拖动的元素的放置行为,其值的说明如下所示。这样,我们组件列表中的组件就可以拖动到画布中了。转载 2023-08-09 09:41:42 · 227 阅读 · 0 评论 -
完成第一个 Vue3.2 项目后,这是我的技术总结
更方便的是,他有更好玩的用法。也许你会觉得这样就更简单了,其实恰恰相反,CompositionAPI其实要求你对逻辑处理有更清晰的认识,对于封装有更高的要求,否则,你一样会写成比以前更丑的代码。我认为,setup是一个链接,是把数据和template连接起来的一个桥梁,因此才会使用这个动词,本质上这不是一个生命周期,是一个动作,是我们把数据和Vue连接起来。最妙的是,这里实现当使用时注册回调,不使用时移除,通过reactive通信,而且可以把回调方法隐藏起来,我需要的只是结果,而不需要把所有代码都在外层。转载 2023-08-09 09:44:26 · 72 阅读 · 0 评论 -
函数式组件在Vue.js中的运用
你是否曾经遇到过这样一个场景,你有个需求需要引入一个第三方库,然而你只需要使用这个库里面某一个功能,如果这个库不支持分模块导出的话,就会因为引入整个库而导致项目体积变大,进而影响项目加载性能。再比如,下拉列表、时间选择器或者自动填充属性等自定义控件都是非常复杂的,需要考虑很多边缘的复杂情况。虽然有很多库很好的解决了这种复杂性,但是他们也带来了不好的缺点,就是这类组件无法自定义样式。转载 2023-08-10 09:15:28 · 122 阅读 · 0 评论 -
7个实用的Vue开发技巧
假设,某一天我们的布局变了,我们只需要去修改组件A 就行,而不用去修改组件B,从而就能充分复用组件B 的数据处理逻辑,关于这块我之前写过一篇实际案例,可以点击。随着项目越来越大,书写的不注意,不自然的就会产生一些多余的 css,小项目还好,一旦项目大了以后,多余的 css 会越来越多,导致包越来越大,从而影响项目运行性能,所以有必要在正式环境去除掉这些多余的css,这里推荐一个库。对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要。转载 2023-08-10 09:15:50 · 94 阅读 · 0 评论 -
10+个令人惊叹的VueJS组件,模板和示例
BootstrapVue Argon Dashboard PRO是BootstrapVue和Vue.js的高级仪表板。这是一种全新产品,它基于我们从头开始重新构建的最新框架结构,这种结构旨在使产品更直观,更具适应性,并且更易于定制。让Argon以其酷炫的功能给你带来惊喜,让你的项目达到一个全新的水平。转载 2023-08-16 09:36:12 · 585 阅读 · 0 评论 -
60个Vue常见问题汇总及解决方案
具体配置在webpack.base.conf.js里面的rules里面的 url-loader,这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。所以keep-alive一般缓存都是一些列表页,不会有太多的操作,更多的只是结果集的更换..给路由的组件meta增加一个标志位,结合v-if就可以按需加上缓存了!可以的,SSR(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html,现在 vue 的服务端开发框架有这么个比较流行,如下Nuxt.js。转载 2023-08-10 09:18:30 · 201 阅读 · 0 评论 -
vue源码中值得学习的函数方法
内置标签的时候,如果用数组类遍历那么将要循环很多次获取结果,如果把数组转为对象,把标签名设置为对象的。这边主要学习用es5原生方法实现继承的,当然了,es6中 class类直接用。收集依赖,从而触发更新视图,但是数组却无法监测到数据的变化,但是为什么数组在使用。浅拷贝写的也很有意思,先类型判断再递归调用,总体也不难,学一下思路。,那么不用依次遍历查找,只需要查找一次就能获取结果,提高了查找效率。类型,然后用slice截取第8位到倒一位,得到结果为。函数,原来是为了拍平数组,使二维数组扁平化,类似。转载 2023-08-10 09:18:41 · 42 阅读 · 0 评论 -
Vite+Vue 3+TS 配置记录
将文件生成后,那么 types 文件夹下将会出现 auto-imports.d.ts 与 .eslintrc-auto-import.json 两个文件。的项目中难免会有一些自定义的类型,虽然 与文件同名.d.ts 能够解决当前文件的类型定义,但总是会有一些公共的类型需要定义,例如请求返回的自定义数据体。这样的操作对于少量的组件倒是还行 CV 大法加加减减完事。的 d.ts 类型描述文件的生成,vite.config.ts 里改动如下。*.ts 文件的类型使用报错解决了,但这只是针对于 *.ts 的,而。转载 2023-08-10 09:20:52 · 242 阅读 · 0 评论 -
JS/TS项目中使用websocket与protobuf
本文介绍了在JS/TS项目中使用WebSocket与Protobuf进行通信和数据传输的方法。通过WebSocket实现实时双向通信,通过Protobuf实现数据的序列化和反序列化,结合二者可以实现高效的通信和数据传输。转载 2023-08-10 09:21:05 · 1355 阅读 · 0 评论 -
轮询、SSE和WebSocket的比较——如何选择合适的方式
建立一个实时的Web应用是有些挑战性的,我们需要考虑如何从服务器将数据发送到客户端。实现这种“主动性”的技术已经存在一段时间,一般限制在两种方法上:客户端拉取或服务器推送。实现这些的几种方式有:长/短轮询(客户端拉取)WebSockets(服务器推送)服务器发送事件(服务器推送)客户端拉取 - 客户端定期请求更新服务器推送 - 服务器主动向客户端推送更新(与客户端拉取相反)下面我们来举个简单的例子来比较上述技术并选择合适的技术。转载 2023-08-10 09:21:16 · 244 阅读 · 0 评论 -
JS实现滚动加载更多
在本篇文章中,我们学习了如何使用JavaScript实现滚动加载更多的功能。我们首先准备了加载数据和检测滚动位置的函数,然后在scroll事件处理函数中调用加载数据的函数,来实现滚动加载更多的功能。如果你想让你的网站或应用程序更加用户友好,那么滚动加载更多就是一个不错的选择。转载 2023-08-10 09:21:26 · 766 阅读 · 0 评论 -
再看CommonJS和ESM模块的区别
最后我们 new 一个MyModuleMyModule,MyRequire刚刚我们实现了一个简单的 Module,但是能不能正常用还存疑。是骡子是马拉出来遛遛,我们用自己的MyModule来加载文件,看看能不能正常运行。可以查看demos/01,代码的入口为app.jsb.js可以看到现在我们用myRequire取代require来加载./a.js模块。再看看./a.jsval: 1obj,setVal可以看到现在我们用myModule取代module来导出模块。最后执行。转载 2023-08-10 09:22:28 · 107 阅读 · 0 评论 -
vue2的动态路由
在这个例子中,我们使用字符串拼接的方式来生成带有动态参数的链接,并通过。这样,您就可以在 Vue 2 中实现动态路由。若要生成带有动态参数的链接并进行页面跳转,可以使用。是一个占位符,表示一个动态的参数。来获取动态路由中传递的参数,并在组件中进行展示。在这个例子中,我们定义了一个动态路由。在要接收动态参数的组件中,可以通过。或者编程式导航进行页面跳转。在这个例子中,我们使用了。获取到动态传递的参数值。都会匹配到同一个组件。或者编程式导航(通过。组件,并且您可以通过。转载 2023-08-08 09:24:34 · 589 阅读 · 0 评论 -
vue3动态路由实现
在这个例子中,我们使用字符串拼接的方式来生成带有动态参数的链接,并通过。这样,您就可以在 Vue 3 中实现动态路由。若要生成带有动态参数的链接并进行页面跳转,可以使用。是一个占位符,表示一个动态的参数。来获取动态路由中传递的参数,并在组件中进行展示。在这个例子中,我们定义了一个动态路由。在要接收动态参数的组件中,可以通过。或者编程式导航进行页面跳转。在这个例子中,我们使用了。获取到动态传递的参数值。都会匹配到同一个组件。或者编程式导航(通过。组件,并且您可以通过。转载 2023-08-08 09:23:20 · 546 阅读 · 0 评论 -
Vue 3.3 发布前瞻
今天我们很高兴地宣布Vue 3.3 “Rurouni Kenshin”版本的发布!这个版本着重于开发者体验的提升,特别是在TypeScript中使用SFC的使用。与Vue Language Tools(以前称为Volar)的1.6版本一起,我们解决了使用Vue和TypeScript时的许多长期存在的问题。本文提供了3.3版本中的重点功能概述。有关完整的更改列表,请参阅GitHub上的完整更改日志。转载 2023-08-08 09:20:25 · 43 阅读 · 0 评论 -
Vue 3 中的 Ref() 和 Reactive() — 该如何选择?
Ref()和reactive()用于跟踪其参数的更改。当你使用它们来初始化变量时,你向 Vue 提供了信息:“每当它们更改时,我希望你重新构建或重新评估依赖于这些变量的所有内容”。在下面的示例中,单击按钮后,personRef和都将更改其名称,但普通的 JS 对象person不会更改。它们的基本作用是使你的组件具有响应性(对更改做出反应)。Ref()和reactive()在开始时可能看起来非常相似,但它们的目的有点不同。在这个主题上没有好的编程实践,所以一切都取决于你和你的团队如何决定。转载 2023-08-08 09:18:42 · 125 阅读 · 0 评论 -
Vue3 实现滚动加载更多
随着移动设备的普及,滚动加载更多已经成为了一个常见的交互方式,用户可以在滚动页面时自动加载更多的数据,这种方式避免了翻页和点击“加载更多”按钮的繁琐操作,提高了用户体验。本文将介绍如何使用 Vue3 实现滚动加载更多功能,同时提供 mock 数据,方便读者在本地调试。本文介绍了如何使用 Vue3 实现滚动加载更多功能,包括创建组件、加载数据和监听滚动事件等。希望本文能够帮助读者更好地理解 Vue3 中的setup语法糖,并在实际项目中应用。转载 2023-08-08 09:17:41 · 2217 阅读 · 1 评论 -
vue中keep-alive缓存机制
这时就会发现一个问题,第一次请求时,beforeRouterEnter里请求了数据,created里也请求了数据(一般情况都是在created里请求数据) 就请求了两次 这个问题怎么解决呢?如上所知,第二次进入页面不会执行created、mounted钩子,若需要获取信息的时候,就需要在beforeRouterEnter里获取数据。在vueRouter中 给菜单指定keepAlive时 就能让页面第一次进入后缓存页面。第一次进入代码执行顺序。第二次进入代码执行顺序。转载 2023-08-08 09:13:17 · 116 阅读 · 0 评论 -
Vue3事件冒泡
事件冒泡是指当一个元素上的事件被触发时,它会向父元素传播,直到到达文档的根节点。在JS中,事件冒泡是默认行为。这意味着,如果你在一个子组件上绑定了一个事件,当该事件被触发时,它会沿着组件树向上冒泡,直到到达根组件。转载 2023-08-08 09:12:11 · 2424 阅读 · 0 评论 -
vue3项目页面首次加载慢优化
使用了gzip压缩以后,首次加载的时间就很短了,当然还有其他优化的方法需要去尝试,比如服务端渲染、预渲染、使用在线cdn等。转载 2023-08-08 09:10:48 · 1466 阅读 · 0 评论 -
前端项目重构的深度思考和复盘
项目重构是每一家稳定发展的互联企业的必经之路, 就像一个产品的诞生, 会经历产品试错和产品迭代一样, 随着业务或新技术的不断发展, 已有架构已无法满足更多业务扩展的需求, 所以只有通过重构来让产品“进化”, 才能跟上飞速发展的时代浪潮.转载 2023-08-08 09:05:59 · 153 阅读 · 0 评论 -
2023前端面试之Vue进阶(三)
在Vue 3.0中,Composition API是一种新的API风格,它与之前的Options API相比提供了更灵活和强大的方式来组织组件的逻辑代码。Composition API旨在解决Options API在大型复杂组件中逻辑难以维护的问题,同时也提高了代码的可复用性。在Vue 2.x中,使用Options API是定义组件的主要方式。转载 2023-08-04 08:39:30 · 62 阅读 · 0 评论 -
vue项目打包之后, 生成一个可修改IP地址的文件
今天在做项目的时候遇到了一个问题, 就是把项目部署到不同的服务器上, 但不能每次修改IP的时候就打包一次, 这就增加了前端的工作量,经过百度, 发现有一些方法是可以的,亲测可用。这样就完成了,重新打包之后,在static文件夹中会生成config.js的文件, 修改这个文件的地址,就可以更换IP地址了。2, 在vue项目中的index.html页面引用这个config.js。3, 在你封装的请求页面,把这个全局暴露出来的Window属性接口IP写到公共方法里面。转载 2023-08-04 08:38:37 · 135 阅读 · 0 评论 -
Nginx 反向代理与负载均衡
当我们有一个服务器集群,并且服务器集群中的每台服务器的内容一样的时候,同样我们要直接从个人电脑访问到服务器集群服务器的时候无法访问,必须通过第三方服务器才能访问集群这个时候,我们通过第三方服务器访问服务器集群的内容,但是我们并不知道是哪一台服务器提供的内容,此种代理方式称为反向代理公司会建立很多的服务器,这些服务器组成了服务器集群,然后,当用户访问网站的时候,先访问一个中间服务器,再让这个中间服务器在服务器集群中选择一个压力较小的服务器,然后将该访问请求引入选择的服务器。转载 2023-08-21 09:19:47 · 52 阅读 · 0 评论 -
Web 页面录屏实现
如果你的应用有接入到web apm系统中,那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误,给出错误栈,帮助你定位到BUG。但是,有些时候,当你不知道用户的具体操作时,是没有办法重现这个错误的,这时候,如果有操作录屏,你就可以清楚地了解到用户的操作路径,从而复现这个BUG并且修复。转载 2023-08-21 09:20:04 · 300 阅读 · 0 评论 -
浏览器垃圾回收机制与 Vue 项目内存泄漏场景分析
浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大并且 GC 时停止响应其他操作,所以垃圾回收器会按照固定的时间间隔周期性的执行。不再使用的变量也就是生命周期结束的变量,当然只可能是局部变量,全局变量的生命周期直至浏览器卸载页面才会结束。转载 2023-09-13 09:10:04 · 843 阅读 · 0 评论 -
深度解析!Vue3 & React Hooks 新UI组件原理:Modal 弹窗
useModal很好理解,不懂的建议转行写Vue。这篇算是自己半夜无聊折腾出来的,原定计划是一篇写三种组件,但弹窗类的实现比较有意思。这个系列我会看着写,不出意外下一篇就是讲Steps步骤条和Transfer穿梭框的实现(当然,太难了就忽悠一下,嘿嘿。转载 2023-09-13 09:14:05 · 343 阅读 · 0 评论 -
VUE 源码解读之响应式系统及 Watcher 的调度实现
即在初始化vue实例的时候,对data、props等对象的每一个属性都通过Object.defineProperty定义一次,在数据被set的时候,做一些操作,改变相应的视图。这就需要依赖收集的过程。队列执行过程中,存一个对象circular,里面有每个watcher的执行次数,如果哪个watcher执行超过MAX_UPDATE_COUNT定义的次数就认为是死循环,不再执行,默认是100次。删除Watcher,如果一个组件的Watcher在队列中,而他的父组件被删除了,这个时候也要删掉这个Watcher。转载 2023-09-13 09:15:03 · 104 阅读 · 0 评论 -
1.1万字从零解读Vue3.0源码响应式系统
get,set,has,ownKeys从 mdn 上面可以看到,handler.get() 方法用于拦截对象的读取属性操作。handler.set() 方法是设置属性值操作的捕获器。handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作。handler.has() 方法是针对 in 操作符的代理方法。handler.ownKeys() 方法用于拦截for…in循环。转载 2023-09-13 09:16:02 · 133 阅读 · 0 评论 -
Vue 骚技巧,策略模式实现动态表单验证
(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法。关键是策略的。本文可能用到一些编码技巧比如 IIFE(Immediately Invoked Function Expression, 立即调用函数表达式),ES6 的语法 let/const、箭头函数、rest 参数,短路运算符 等,如果还没接触过可以点击链接稍加学习 ~转载 2023-09-14 16:55:53 · 369 阅读 · 0 评论