纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html
我的 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 导航条,每个导航,可以理解为单个组件,组件复用之后呢,就是导航条。那么怎么知道目前的导航是哪个呢?这就是动态组件的用处。
组件需要了解的东西,简单介绍到这里。
高端一点的东西
上面说的,组件的数据流啊、动态和异步组件啊、访问组件的特殊方式啊、依赖注入啊、强制更新啊等等东西,学习到路由的时候,组件跟路由的纠缠关系啊,还有状态管理系统跟组件的关系等等,就不说那么多东西来吓人,其实这些东西也不是高深的东西,以后我会抽丝剥茧的用形象的方式介绍出来。
==========================
好的,学习这篇文章,对于组件应该有了一个比较平面的认识,下面的学习,让这个认识立体化。
纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维的更多相关文章
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )
vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study ...
随机推荐
- python学习笔记13-集合set
set 集合 把不同的元素组合在一起 可以去除相同的元素 set(可哈希的) 无序不重复的. 取值:遍历取或者迭代取值 可哈希:不可变类型 set整体是非可哈希的. 即可变集合 不可变集合:f ...
- h5文字超出,两行显示,超出显示省略号
最近接到一个需求,要求商场导航里的文字最多显示两行,超出两行的省略号显示,查一些资料,又根据自己的需求,改了很多,直接上代码吧 <html> <head> <style ...
- POJ 2636
#include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...
- android stdio Error Could not find com.android.tools common 25.2.2
Error:Could not find com.android.tools:common:25.2.2. Searched in the following locations: file:/D:/ ...
- Android 9 新功能 及 API 介绍(提供了实用的模块化的功能支持,包括 人工智能)
Android 9(API 级别 28)为用户和开发者引入了众多新特性和新功能. 本文重点介绍面向开发者的新功能. 要了解新 API,请阅读 API 差异报告或访问 Android API 参考. ...
- MVC3学习:利用jquery+ajax生成二维码(支持中文)
二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...
- Touch事件传递机制 Android
Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在 ...
- C#基础篇十小练习
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace P03练 ...
- [Java初探07]__关于面向对象的简单认识
前言 类和对象,在我们学习Java语言的过程中,它们无时无刻不存在着,在我们还远未详细弄明白它们的意义之前,在我们不知不觉的下意识里,我们都会直接或间接的用到它们,这是因为Java是一门面向对象的语言 ...
- 29-hadoop-使用phtonenix工具&分页&数据导入
因为rowkey一般有业务逻辑, 所以不可以直接使用rowkey进行分页, startkey, endkey 想要使用SQL语句对Hbase进行查询,需要使用Apache的开源框架Phoenix. 安 ...