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学习网址备忘
May 29 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php 启动报错如何解决
2014/01/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
Python greenlet实现原理和使用示例
2014/09/24 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
节约用水倡议书
2014/04/16 职场文书
授权委托书公证
2014/09/14 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2014年招生工作总结
2014/11/26 职场文书
民事辩护词范文
2015/05/21 职场文书
python b站视频下载的五种版本
2021/05/27 Python