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 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 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
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
Python中实现switch功能实例解析
2018/01/11 Python
浅析python继承与多重继承
2018/09/13 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
Java多态性的定义以及类型
2014/09/16 面试题
数据库专业英语
2012/11/30 面试题
广州某公司软件工程师面试题
2014/12/22 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
化工专业大学生职业生涯规划书
2014/01/14 职场文书
经典商业广告词
2014/03/13 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
禁止酒驾标语
2014/06/25 职场文书
公司领导班子对照材料
2014/08/18 职场文书
停车场管理协议书范本
2014/10/08 职场文书
迎新生欢迎词
2015/01/23 职场文书
广告业务员岗位职责
2015/02/13 职场文书
高二语文教学反思
2016/02/16 职场文书