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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
vue登录路由验证的实现
Dec 13 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
js代码编写无缝轮播图
Sep 13 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注入点构造代码
2008/06/14 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
如何基于python测量代码运行时间
2019/12/25 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
如何提高MySql的安全性
2014/06/19 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
装修致歉信
2014/01/15 职场文书
幼儿园秋游感想
2014/03/12 职场文书
优乐美广告词
2014/03/14 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
预备党员入党感言
2015/08/01 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis