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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
原生JS实现不断变化的标签
May 22 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
咖啡语言
2021/03/03 咖啡文化
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
一些有关检查数据的JS代码
2006/09/07 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python集合操作方法详解
2020/02/09 Python
python实现打砖块游戏
2020/02/25 Python
python实现批量修改文件名
2020/03/23 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
自我鉴定模板
2013/10/29 职场文书
税务干部鉴定材料
2014/02/11 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
医德医风自我评价2015
2015/03/03 职场文书
会计工作态度自我评价
2015/03/06 职场文书
甲午大海战观后感
2015/06/02 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书