首页 > 其他分享 >Vue2(笔记19) - 组件 - 对组件的理解

Vue2(笔记19) - 组件 - 对组件的理解

时间:2022-12-05 17:35:41浏览次数:42  
标签:19 代码 复用 JS 率不高 Vue2 组件 页面

传统方式写应用

传统方式做项目:一个页面一个 html ,每个页面都会引入几个 js 和 css,代码交叉复制、文件交叉引用;

Vue2(笔记19) - 组件 - 对组件的理解_组件

存在的问题:

1)依赖关系混乱,不好维护;

2)代码复用率不高;


模块化:

理解:向外提供特定功能的JS程序,一般就是一个JS文件 ;

作用:复用JS,简化JS的编写,提高JS运行效率;

模块化可以解决一部分JS的问题,模板的复用率不高;


组件方式写应用

一个部分一个组件,每个组件相对独立,不同页面间相同的能力(结构、样式和交互)可复用;

Vue2(笔记19) - 组件 - 对组件的理解_组件_02

组件:是实现应用中局部功能代码和资源的集合;

局部:某个功能或某个区域的划分;

代码:就像 css / html / js ;

资源:图片、音视频、字体、包等;

Vue2(笔记19) - 组件 - 对组件的理解_组件_03

所有组件受一个根组件管理;组件之间可以嵌套;需要哪类组件引入就可以了;


标签:19,代码,复用,JS,率不高,Vue2,组件,页面
From: https://blog.51cto.com/ahuiok/5913104

相关文章

  • Vue2(笔记20) - 组件 - Vue 非单文件组件 和 几个注意点
    Vue 非单文件组件非单文件组件:一个文件中包含N个组件;单文件组件:一个文件中只包含有1个组件,以 XXX.vue 为组件文件,需要打包;传统做法<divid="root"><h2>学校名称:{{sch......
  • 封装一个 vue3 通用组件,用于懒加载子组件
    简介某些场景下,容器组件会包含很多子组件,比如表格的列和表单的字段,而一旦数量上去而且列/字段组件还嵌套了其他组件,就会导致渲染时长急剧增加。因此,考虑封装一个通用的懒......
  • vue2和vue3的区别
    1、双向数据绑定原理不同vue2:vue2的双向数据绑定是利用ES5的一个API,Object.definePropert()对数据进行劫持,结合发布订阅模式的方式来实现的。vue3:vue3中使用了ES6的Prox......
  • c#中使用Aspose.Word组件,将数据和图片导出至Word
    上一篇分享的是导出Excel的示例,今天分享将数据导出至Word,以及如何读取Word文档中的图片。用的组件包括2个,分别是Aspose.Word和Spire.Doc。这2个组件,都可以从Nuget中下载获......
  • 答疑 - SAP OData 框架处理 Metadata 元数据请求的实现细节,前后端组件部署在同一台物
    我的知识星球里有一个朋友提出了SAPOData服务metadata缓存方面的疑问,本文就来详细说一说:jerry,啥时候有时间给介绍一下fiori的Metadata数据系统的处理机制吧。我现......
  • Flutter不常用组件(五)
    PhysicalModel为子组件设置阴影它有以下几个属性:Key?key:标识键BoxShapeshape:形状。默认为BoxShape.rectangleClipclipBehavior:多余部分裁剪效果。默认为Clip.none......
  • VC6.0和VS2005:C++和C#编写调用COM组件
    这篇文章就是关于COM组件的编写和调用的,主要包含了使用VC6.0编写和调用COM组件,VS2005中使用C#编写和调用COM组件,以及在VC6.0和VS2005之间互相调用COM组件。前一阵在......
  • 2419. prufer序列
    题目链接2419.prufer序列本题需要你实现prufer序列与无根树之间的相互转化。假设本题涉及的无根树共有\(n\)个节点,编号\(1\simn\)。为了更加简单明了的描述无根......
  • 用 19 个基本脉动调查问题追踪趋势
    作为一个人力资源的领导者,你如何知道哪些调查结论需要优先处理?答案是。你不应该优先考虑任何特定的调查结论。当你试图根据数字做出改变时,你要根据趋势采取行动。趋势是事......
  • .NET(C#、VB)APP开发——Smobiler平台控件介绍:BarcodeReader组件
    本文简述如何在Smobiler中使用BarcodeReader组件进行条码识别。Barcodereader通过机器学习能识别不规则条码,效率更好。Step1.新建一个SmobilerForm窗体,并在窗体中加入......