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实现动态增加文件域表单
Feb 12 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
OpenLayers实现图层切换控件
Sep 25 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使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
如何在PHP中生成随机数
2020/06/04 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
jupyter notebook清除输出方式
2020/04/10 Python
Python restful框架接口开发实现
2020/04/13 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
违纪检讨书2000字
2014/02/08 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
购房个人委托书范本
2014/10/11 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
电影圆明园观后感
2015/06/03 职场文书
家庭贫困证明
2015/06/16 职场文书
政审证明材料
2015/06/19 职场文书
期中考试后的感想
2015/08/07 职场文书
比较node.js和Deno
2021/04/27 Javascript