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 统计时间
Mar 09 Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
jQuery 使用个人心得
2009/02/26 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
儿童学习python的一些小技巧
2018/05/27 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
使用K.function()调试keras操作
2020/06/17 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
绩效专员岗位职责
2013/12/02 职场文书
九年级物理教学反思
2014/01/29 职场文书
期末复习计划
2015/01/19 职场文书
队列队形口号
2015/12/25 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
golang elasticsearch Client的使用详解
2021/05/05 Golang
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
python实现学员管理系统(面向对象版)
2022/06/05 Python