vue中所有的封装方式总结

简介: vue中所有的封装方式总结

如何确定我需要封装呢?


1.复用,如果觉得以后还会用到

2.你觉得方便,别的地方可能也需要用

3.如果不封装,页面代码臃肿的时候

1.封装API


使用场景:业务中最常见最普通的封装

步骤一:

image.png

步骤二:

image.png

步骤三:

image.png

2.注册全局工具组件


使用场景:想让组件全局可用,尤其是第三方插件使用时

步骤一:

image.png

步骤二:

image.png

3.封装全局函数


使用场景:有些逻辑处理函数代码量很大,且具有独特功能(如日期处理函数,数组转树函数),可能以后别的地方要用,就封装起来,方便。

步骤一:

image.png

步骤二:

image.png

4. 为了减少页面代码量的封装


使用场景:很多,这里以注册路由表举例,理解封装思想

步骤一:

image.png

步骤二:

image.png

相关文章
|
6天前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
|
3天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题
|
2天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
35 11
|
6天前
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
|
1天前
|
JavaScript
vue知识点
vue知识点
13 4
|
1天前
|
JavaScript 前端开发 搜索推荐
推荐5款免费、开箱即用的Vue后台管理系统模板
推荐5款免费、开箱即用的Vue后台管理系统模板
|
3天前
|
缓存 JavaScript 前端开发
vue中使用keep-alive的问题
vue中使用keep-alive的问题
|
5天前
|
JavaScript 前端开发
VUE技术栈-Vue的基本使用
尹正杰在其博客中介绍了Vue.js框架,它是一个渐进式JavaScript框架,由尤雨溪开发,结合了AngularJS的模板语法和数据绑定以及React的组件化和虚拟DOM技术,适合构建高效、轻量化的用户界面。
18 4
|
6天前
|
缓存 JavaScript 容器
vue动态组件化原理
【9月更文挑战第2天】vue动态组件化原理
20 2
|
9天前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
20 0