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 相关文章推荐
jquery提示 "object expected"的解决方法
Dec 13 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
HTML+JS实现在线朗读器
Feb 15 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二分法查找数组是否包含某一元素
2013/05/23 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python 查看文件的编码格式方法
2017/12/21 Python
老生常谈python中的重载
2018/11/11 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
艺术节开幕词
2015/01/28 职场文书
公司员工奖惩制度
2015/08/04 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技