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 相关文章推荐
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
js select option对象小结
Dec 20 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
Mysql的常用命令
2006/10/09 PHP
自动跳转中英文页面
2006/10/09 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
有关php运算符的知识大全
2011/11/03 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
Python显示进度条的方法
2014/09/20 Python
Python计算一个文件里字数的方法
2015/06/15 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
快速了解python leveldb
2018/01/18 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Python定时器线程池原理详解
2020/02/26 Python
python 连续不等式语法糖实例
2020/04/15 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
私营公司诉讼代理委托书范本
2014/09/13 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
企业财务管理制度范本
2015/08/04 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
golang的文件创建及读写操作
2022/04/14 Golang