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分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
javascript类继承机制的原理分析
Sep 12 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
javascript操作referer详细解析
Mar 10 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 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
ajax缓存问题解决途径
2006/12/06 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
php工具型代码之印章抠图
2018/07/18 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
翻译学院毕业生自荐书
2014/02/02 职场文书
孙振耀退休感言
2015/08/01 职场文书
关于远足的感想
2015/08/10 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书