vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html

我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。

==========================

问答

1、vue 组件有什么?

为什么要加上 vue,因为不同的 MVC 框架,东西不一样,不过基本的功能都有。

组件有 datacomputedwatchmethods 以及生命周期钩子等。对于入门者来说,先搞清楚这些是什么东西。

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 导航条,每个导航,可以理解为单个组件,组件复用之后呢,就是导航条。那么怎么知道目前的导航是哪个呢?这就是动态组件的用处。

组件需要了解的东西,简单介绍到这里。

高端一点的东西

上面说的,组件的数据流啊、动态和异步组件啊、访问组件的特殊方式啊、依赖注入啊、强制更新啊等等东西,学习到路由的时候,组件跟路由的纠缠关系啊,还有状态管理系统跟组件的关系等等,就不说那么多东西来吓人,其实这些东西也不是高深的东西,以后我会抽丝剥茧的用形象的方式介绍出来。

==========================

好的,学习这篇文章,对于组件应该有了一个比较平面的认识,下面的学习,让这个认识立体化。

纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维的更多相关文章

  1. 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  2. 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  3. 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  4. 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  5. 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  6. 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  7. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  8. 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  9. 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )

    vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study  ...

随机推荐

  1. 08-02 Java 代码块,代码块执行的先后顺序问题

    代码块 /* 代码块:在Java中,使用{}括起来的代码被称为代码块. 根据其位置和声明的不同,可以分为 局部代码块:局部位置,用于限定变量的生命周期. 构造代码块:在类中的成员位置,用{}括起来的代 ...

  2. Python 多进程 多线程 协程 I/O多路复用

    引言 在学习Python多进程.多线程之前,先脑补一下如下场景: 说有这么一道题:小红烧水需要10分钟,拖地需要5分钟,洗菜需要5分钟,如果一样一样去干,就是简单的加法,全部做完,需要20分钟:但是, ...

  3. flume常用组件

    Flume组件 1.   Source NetCat Source:绑定的端口(tcp.udp),将流经端口的每一个文本行数据作为Event输入: type:source的类型,必须是netcat. ...

  4. (转)python3之模块io使用流的核心工具

    原文:https://www.cnblogs.com/zhangxinqi/p/9135038.html https://blog.csdn.net/Rozol/article/details/710 ...

  5. php -- 文件读写

    ----- 024-file.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv="c ...

  6. springcloud~演化的微服务架构

    微服务 将整体功能按着模块划分成多个独立的单元,这些单元可以独立部署,它们之前通过轻量级的web api方式进行通讯,对于微服务框架来说,最流行的就是springcloud和Service Fabri ...

  7. nova scheduler 介绍

    在 openstack 中,scheduler 负责从宿主机(运行 nova-compute 的节点)中根据一系列的算法和参数(CPU 核数,可用 RAM,镜像类型等 )选择出来一个,来部署虚拟机(i ...

  8. mysqldump主要参数探究

    在数据库的日常维护中,对于数据量小的备份,我们常常采用的是逻辑备份,也就是使用mysqldump导出.数据量比较大的备份会使用percona的xtrabackup,关于xtrabackup工具的使用以 ...

  9. Windows x86 下的 静态代码混淆

    0x00  前言 静态反汇编之王,毫无疑问就是Ida pro,大大降低了反汇编工作的门槛,尤其是出色的“F5插件”Hex-Rays可以将汇编代码还原成类似于C语言的伪代码,大大提高了可读性.但个人觉得 ...

  10. mysql日志查看

    https://www.2cto.com/database/201201/116116.html 是否启用了日志mysql>show variables like 'log_bin'; 怎样知道 ...