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打开新窗口同时关闭旧窗口
Jan 16 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
vue router 组件的高级应用实例代码
Apr 08 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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php读取3389的脚本
2014/05/06 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python程序语言快速上手教程
2012/07/18 Python
Python中的filter()函数的用法
2015/04/27 Python
Python多线程下载文件的方法
2015/07/10 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python 反向输出字符串的方法
2018/07/16 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python numpy实现rolling滚动案例
2020/06/08 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
阿德的梦教学反思
2014/02/06 职场文书
文明风采获奖感言
2014/02/18 职场文书
高中军训感言600字
2014/03/11 职场文书
规范化管理年活动总结
2014/08/29 职场文书
九华山导游词
2015/02/03 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
企业文化学习心得体会
2016/01/21 职场文书