【Vue.js 入门与实战】--组件化和模块化的区别

简介: 一、 组件的定义二、 组件化和模块化的不同

组件化和模块化的区别

 

内容介绍:

一、     组件的定义

二、     组件化和模块化的不同

 

一、组件的定义:

组建的出现就是为了拆分vue实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,将来我们需要什么样的功能就可以去调用对应的组件即可。

 

二、组件化和模块化的不同:

1.模块化:

是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一。

2.组件化:

是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用。

none这一代码就是利用模块化

3.  举例:

比如说百度首页,点开之后,每一个小图标都有一个titled,有一个关闭按钮。每一个小对象,都有相映的图标,我们只需要把唯一的一个组件把标题,把图标放进来,我们就可以渲染对应的一个小方块,这就是组件化。后面的搜索框也是一个组件,这就是我们从UI的角度,分成几个小部分。

相关文章
|
6天前
|
JavaScript 关系型数据库 API
Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库
这篇文章介绍了什么是Prisma以及如何在Node.js和TypeScript后端应用中使用它。Prisma是一个开源的下一代ORM,包含PrismaClient、PrismaMigrate、PrismaStudio等部分。文章详细叙述了安装PrismaCLI和依赖包、初始化Prisma、连接数据库、定义Prisma模型、创建Prisma模块的过程,并对比了Prisma和Sequelize在Nest.js中的使用体验,认为Prisma更加便捷高效,没有繁琐的配置。
Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库
|
4天前
|
JavaScript 应用服务中间件 API
Node.js搭建REST API实战:从基础到部署
【7月更文挑战第18天】通过以上步骤,你可以将你的Node.js REST API从开发环境顺利迁移到生产环境,并利用各种工具和技术来确保应用的稳定性、安全性和可扩展性。
|
2天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
4天前
|
安全 Java API
Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档
这篇文章介绍了Swagger,它是一组开源工具,围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具,包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger,展示了安装依赖、定义DTO和控制器等步骤,以及如何使用Swagger装饰器。文章最后总结说,集成Swagger文档可以自动生成和维护API文档,规范API标准化和一致性,但会增加开发者工作量,需要保持注释和装饰器的准确性。
Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档
|
7天前
|
API
Nest.js 实战 (一):使用过滤器优雅地统一处理响应体
这篇文章介绍了在Nest.js中如何处理接口统一返回格式的方法。首先定义了响应状态码枚举和类型,然后创建了HttpException异常过滤器来捕获HttpException类的异常并设置自定义响应逻辑。最后通过全局配置和效果预览展示了如何应用这些设置。
Nest.js 实战 (一):使用过滤器优雅地统一处理响应体
|
16天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
32 2
|
16天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
23 2
|
12天前
|
JavaScript 前端开发
autox.js中if和while的用法区别和差异
autox.js中if和while的用法区别和差异
|
16天前
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
9 0
|
16天前
|
JavaScript
vue3 【实战】封装 “心跳“ 组件
vue3 【实战】封装 “心跳“ 组件
19 0