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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
中止javascript执行的方法
Feb 14 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
javascript每日必学之运算符
Feb 16 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
实例详解Node.js 函数
Jun 10 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
JavaScript实现两个数组的交集
Mar 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
德生9700DX电路分析
2021/03/02 无线电
PHP 反向排序和随机排序代码
2010/06/30 PHP
PHPCMS的使用小结
2010/09/20 PHP
dedecms中使用php语句指南
2014/11/13 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
js图片预加载示例
2014/04/30 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
神经网络理论基础及Python实现详解
2017/12/15 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python解析多层json操作示例
2019/12/30 Python
python 安装impala包步骤
2020/03/28 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
运动会入场式解说词
2014/02/18 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
卫生主题班会
2015/08/14 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技