vue3.0 CLI - 2.5 - 了解组件的三维


Posted in Javascript onSeptember 14, 2018

我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。

问答

1、vue 组件有什么?

为什么要加上 vue,因为不同的 MVC 框架,东西不一样,不过基本的功能都有。

组件有 data、computed、watch、methods 以及生命周期钩子等。对于入门者来说,先搞清楚这些是什么东西。

data 属性经过前面几篇文章的学习,对其已有初步的了解。

computed 是计算属性,前面也有了解。

methods 组件方法,其实是专门定义函数的一个对象,这些函数最终绑定到组件上。

watch 和 生命周期钩子 也不是什么高深的东西!就是个函数而已,别被这些【高大上】的名字给吓着。后面会学习它们。如果了解过 C++ 或 JAVA 的函数重载的概念,那就这么理解这两个东西吧。

2、什么是组件?

组件也不是什么高深的东西。html 标签 div form img 等知道吧,都是【组件】, 只不过呢,vue 里边的组件可以自己命名,也可以定义自己的属性等等,说白了,就是扩展标签。

关于组件,标准实际上已经实现了,叫做【自定义元素】,谷歌为那些没有实现这个标准的浏览器做了个 polyfill,也即是 【polymer】框架:polymer地址,都出到 3.0 版本了,谷歌一直在维护。

3、组件还有什么需要了解的?

组件复用、组件注册、组件组织、组件怎么互相传递数据、组件插槽、动态组件等内容。

组件复用,其实就是搞成一个 html【标签】。它怎么用,传递什么数据给它,它有什么交互功能,怎么显示 ( 前面几篇文章就在介绍这些 ) 都已预定义。

组件注册 和 组件组织,结合起来理解。还是用 html 来理解,div 可以包含 div ( 子元素 );组件也可以包含子组件;html 是如何组织的,组件也是如何组织;注册是怎么回事?vue 中组件要使用其他组件,必须 import 其他组件,这就是注册啦。对!注册和组织,就是这么简单!

注册还有全局注册和局部注册,以后学习慢慢介绍。

传递数据。html 标签之间,无法自己传递数据 ( 当然,有些 css 属性比如 font-size,是单向传递的 )。vue 组件可不一样,父组件不单单可以给子组件传递数据,子组件也可以给父组件传递数据。父 => 子 用 props;子 => 父 用 emit 事件。

插槽。我觉得实际运用过程中,也不一定非要用,以后学习在介绍。

动态组件。比如 nav 导航条,每个导航,可以理解为单个组件,组件复用之后呢,就是导航条。那么怎么知道目前的导航是哪个呢?这就是动态组件的用处。

组件需要了解的东西,简单介绍到这里。

高端一点的东西

上面说的,组件的数据流啊、动态和异步组件啊、访问组件的特殊方式啊、依赖注入啊、强制更新啊等等东西,学习到路由的时候,组件跟路由的纠缠关系啊,还有状态管理系统跟组件的关系等等,就不说那么多东西来吓人,其实这些东西也不是高深的东西,以后我会抽丝剥茧的用形象的方式介绍出来。

好了,以上就是本文的全部内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 #Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 #Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 #Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 #Javascript
node中的session的具体使用
Sep 14 #Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 #Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 #Javascript
You might like
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
小程序转发探索示例
2019/02/19 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python中有帮助函数吗
2020/06/19 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
安全检查验收制度
2014/01/12 职场文书
社团活动总结怎么写
2014/06/30 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
主持人开场白台词
2015/05/29 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
apache基于端口创建虚拟主机的示例
2021/04/24 Servers