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 拾碎[三] 使用className属性
Oct 16 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
JavaScript组合模式---引入案例分析
May 23 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支持页面回退的两种方法[转]
2007/02/14 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php数据访问之增删改查操作
2016/05/09 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python如何设置静态变量
2020/09/07 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
大学生毕业自荐信
2013/10/10 职场文书
文员岗位职责
2013/11/09 职场文书
广告学毕业生求职信
2014/01/30 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
初中新生军训方案
2014/05/13 职场文书
开业庆典致辞
2015/08/01 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
会议室管理制度范本
2015/08/06 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android