为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第2天 vue基础入门(中)

标签:
Vue.js

门前有两颗树,一棵是枣树,另一颗也是枣树。——鲁迅(原名周树人,字豫才,浙江绍兴人)

模块名
描述
课程名称
前端工程师2022版
课程章节
vue基础入门(中)
打卡知识进程
1 / 21
✔ (1)1-1 组件的定义及复用性,局部组件和全局组件(1)
✔(2)1-2 组件的定义及复用性,局部组件和全局组件(2)
(3)1-3 组件间传值及传值校验
(4)1-4 单项数据流的理解
(5)1-5 Non-Props 属性是什么
(6)1-6 父子组件间如何通过事件进行通信(1)
(7)1-7 父子组件间如何通过事件进行通信(2)
(8)1-8 组件间双向绑定高级内容(选学)
(9)1-9 使用插槽和具名插槽解决组件内容传递问题(1)
(10)1-10 使用插槽和具名插槽解决组件内容传递问题(2)
(11)1-11 作用域插槽
(12)1-12 动态组件和异步组件
(13)1-13 基础语法知识点查缺补漏
(14)2-1 使用 Vue 实现基础的 CSS 过渡与动画效果
(15)2-2 使用 transition 标签实现单元素组件的过渡和动画效果(1)
(16)2-3 使用 transition 标签实现单元素组件的过渡和动画效果(2)
(17)2-4 使用 transition 标签实现单元素组件的过渡和动画效果(3)
(18)2-5 组件和元素切换动画的实现
(19)2-6 列表动画
(20)2-7 状态动画
主讲老师
Dell
学习开始时间
2022.09.06 21:55
学习结束时间
2022.09.06 22:35
总计时
40 min
课程收获

我们始终围绕是什么+为什么+怎么用
来输出所学收获

局部组件 ,定义了,要注册之后‍‍才能使用,性能比较高,因为你不用的时候,它压根就是一个变量,不会被放到任何地方,‍‍使用起来有些麻烦。‍‍
全局组件名字,建议‍‍小写字母单词中间用横线间隔,而局部组件‍‍建议大写字母开头,驼峰式命。‍‍
局部组件使用时要做一个名字和组件间的映射对象,‍‍你不写映射 Vue 底层也会自动尝试帮你‍‍做映射。
我们定义的组件是页面上的一部分,组件具有一定的复用性, 全局组件怎么定义,通过app.component来定义,‍‍ta的名字一般是couter-parent这样的形式,ta只要注册了,‍‍在父组件里,在其他任何组件里都可以直接去使用,所以它的性能并不是特别的高,但是它使用起来特别的简单。‍‍
局部组件,它其实就是一个‍‍常量,这个常量一般我们会以大写字母开头做一个区分,‍‍局部组件它要使用的话,必须在父组件里面去做一个注册,通过components来注册,‍‍ components里面要写一个名字和组件的映射关系,你建议去显示的写,当然你不显示的写,‍‍其实当你用这种小写字母标签的时候,Vue底层也会做一个映射的转换,‍‍把它转换成这种大写字母开头 驼峰式的,‍‍代码也会自动的能够正常的执行成功。
学习感受/感想/领悟(心得)
让我们享受工作。之前我也想过如何快速学习,如何快速完成工作,在写这篇笔记的时候,我还在想这个问题,后来我明白了,有些东西,没有人能想清楚,只有先做起来,目标/答案才会越来越清晰。自律,坚持,是一块块腹肌的具体体现,是把手头上的事情做好的具体体现。想成为高手,那就尽管去做吧。

课程内容:
2022.09.06的学习内容:

vue基础入门(中)

1-2 组件的定义及复用性,局部组件和全局组件(2)

与全局组件相对应的一个组件,我们把它叫做局部组件。‍‍我们看一看,如果我想使用一个局部组件,我该怎么去定义怎么去使用,我们这么来写,‍‍

图片描述

我们定义一个对象叫做counter等于一个对象,‍‍ 实际上 counter变量它就是一个局部组件,我定义了局部组件,我现在想直接去用局部组件能用吗?‍‍

我们看一下counter我直接去用它,

图片描述

因为你定义了一个常量或者变量在这【24-31行代码】,它是一个局部组件,然后你在你的Vue的应用里面想去用局部组件,‍‍这是用不了的,因为ta感知不到局部组件的存在,局部组件不像全局组件一样,‍‍直接会挂到这个APP上面去,它就是一个常量,APP并不知道它存在,‍‍所以这个时候如果你想使用局部组件的话,你要怎么去使用?

图片描述

假设我现在再把compontents 注释掉,然后再刷新,你发现它不好用,‍‍ 只有我通过components这样的一个语法把它写在这里,才能去使用 counter组件。‍‍

图片描述

这句话的意思是我现在创建一个Vue的应用,‍‍然后我去创建Vue的应用的根组件,这根组件里它会使用到一些局部组件,这些局部组件是谁?‍‍

局部组件里面有一个名字叫做counter的组件,它具体使用哪一个组件,用的是你上面定义的局部组件【16-22行代码】,‍‍

你要用怎么去用组件的组件名,而后面的局部组件真正指的是哪一个?‍‍ 或者我可以这么去写一下,比如说我叫一个dell,‍‍

图片描述
意思就是我在我的父组件里面想要去使用counter组件的时候,我通过dell这个名字去使用,‍‍但是使用的组件它真正对应的组件是谁?是counter组件。‍‍

那么如果你写成dell的话,这块你就要也通过dell的方式在父子这里去用组件:

图片描述

一般来说我们如果‍‍它的k值和它的value都是一样的,我可以直接写这样:

图片描述

这就是局部组件定义和使用的方式。‍‍

首先怎么定义? 定义一个常量就可以了,它是一个对象。怎么用它? 在父组件里面,首先通过components去声明它,‍‍声明之后你在你的模板里就可以直接去用了。

我们再写一个例子,const hello World 等于 hello world就好。

图片描述

然后我要去用它怎么用? 在这里面局部组件我是没法直接用的,我得去注册一下。‍‍

图片描述

我们之前定义全局组件的时候,肯定是通过‍‍ app.component的方式来定义的,我们起全局组件名字的时候,一般叫做hello-world这样的‍‍用横杠间隔的这样的方式去起名,

但是怎么到上面我定义局部组件的是 通过这样的方式驼峰式的方式去命名了:

图片描述

因为如果你想定义局部组件也可以定义成hello-world的方式, 但是你的 js 语法里不支持横线作为变量的名字,‍‍所以这块就没法这么命名了,你只能去命成刚才我们写的驼峰‍‍这样的写法,但是如果你命名成驼峰,这种写法又和普通的‍‍ js的变量其实没有任何的区别,所以如果你定义局部组件的时候,建议大家把首字母都大写。‍‍

图片描述

当我们再在Vue里面看到这种大写字母开头的变量的时候,我们就知道实际上它应该就是一个‍‍局部组件了,

但是如果上面的局部组件的名字变了,你在下面应用里面想去使用局部组件应该怎么办?‍‍ 是不是上面这块如果你想使用小写的counter去用组件,你要做一个映射,我们映射的是counter局部组件‍‍变量:

图片描述

而如果你想用hello world的话,我对应的应该是HelloWorld的组件:

图片描述

它的意思就是‍‍我去创建一个Vue的实例,我要用两个子组件,它的名字分别叫做counter和hello world,‍‍ counter到哪里去找? ta去找 c开头大写的 Counter局部组件,‍‍而hello-world这个标签对应的组件到哪里去找? ta会去找‍‍ hello world H大写开头的局部组件,然后去做一些映射转化。‍‍

我们自己把这个名字和组件的映射关系写在了这里【33-34行代码】,‍‍实际上你不写Vue自动也会帮我们干这件事情,比如说这里你空着,

图片描述
你只要把Counter大写的组件写在这儿,‍‍然后HelloWorld大写的组件写在这,

图片描述

Vue发现你使用counter的时候,它也会自动的映射到Counter组件上,‍‍发现你用hello-world小写的字符串,然后用横线间隔,Vue也会自动的把这个标签和‍‍HelloWorld这样大写字母,然后驼峰式命名的这种组件做自动的映射。‍‍ 最终代码:

图片描述

我们不用显示的做这种映射,它会自动的在底层帮我们做这种转化。‍‍

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消