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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
一个判断email合法性的函数[非正则]
Dec 09 Javascript
MooTools 1.2介绍
Sep 14 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
JavaScript错误处理
Feb 03 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
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
PHP5 面向对象程序设计
2008/02/13 PHP
php实现文件编码批量转换
2014/03/10 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Vue3为什么这么快
2020/09/23 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
go和python调用其它程序并得到程序输出
2014/02/10 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python定义一个Actor任务
2020/07/29 Python
MySQL面试题
2014/01/12 面试题
广告学专业自荐信范文
2014/02/24 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
关爱老人标语
2014/06/21 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
大二学年个人总结
2015/03/03 职场文书
学校后勤工作总结2015
2015/05/15 职场文书