vue 组件简介


Posted in Javascript onJuly 31, 2020

什么是组件?

web的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。

web页面就是由一个个类似这样的部分组成的,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西才分成粒度合理的小东西。

使用组件的好处:

  • 提高开发效率
  • 方便重复使用
  • 简化调试步骤
  • 提升整个项目的课维护性
  • 便于协同开发

组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。
在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

vue 组件简介

vue.js的组件可以理解为预先定义好行为的ViewModel类。一个组件可以预先定义很多选项。但是最核心的是以下几个:

  • 模板(template)——模板声明了数据和最终展现给用户的DOM之间的映射关系。
  • 初始数据(data)——一个组件的初始数据状态。对于可服用的组件来说,通常是私有的状态。
  • 接受的外部参数(props)——组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式声明为双向绑定。
  • 方法(methods)——对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
  • 生命周期钩子函数(lifecycle hooks)——一个组件会触发多个生命周期钩子函数,比如created、attached、destroyed等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,这可以理解为Controller的逻辑被分散到了这些钩子函数中。

以上就是深入了解vue 组件的详细内容,更多关于vue 组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
JS 对象介绍
Jan 20 Javascript
jquery 常用操作方法
Jan 28 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
three.js 制作动态二维码的示例代码
Jul 31 #Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 #Javascript
vue抽出组件并传值实例
Jul 31 #Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 #Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 #Javascript
原生JS实现记忆翻牌游戏
Jul 31 #Javascript
js实现跳一跳小游戏
Jul 31 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
python中黄金分割法实现方法
2015/05/06 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
J2EE相关知识面试题
2013/08/26 面试题
高中生家长会演讲稿
2014/01/14 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
给校长的建议书
2014/03/12 职场文书
干部个人考察材料
2014/12/24 职场文书
2015年药房工作总结
2015/04/25 职场文书
大学生干部培训心得体会
2016/01/06 职场文书