00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们了解了一下VIVO的组件化开发的这样的一个思想,当然了想彻底的了解组件开发,等咱们学完组件开发一定会了解的,所以呢,前面的思想简单了解一下就行了。那这几个开始呢,我们来创建组件,了解组件中的一些语法来,我们首先呢,先创建一个项目,回到这个VI3这个目录里边,原来咱们在DEMO1这里边嘛,咱们在创建一个DEMO3,因为咱们原来创建的DEMO1和DEMO2里边有ES link那个呢,呃,比较比较麻烦,每次呢,你代码稍稍有一点不符合规范,它就会提示你,这回咱们创建的时候不带ES Li,那你在实际开发里边呢,可以把它加上啊,这没问题吧。然后我们这块使用vecte创建一个DEMO3这样的一个项目,咱们把呃,每讲到一个阶段,咱们就新创建一个项目。来等待一下,这里边选择,当然了,咱原来有那个代二那个模板咱们给删了,那缺省的呢,缺省的里边你看也带ESD的,咱们就不用缺省的还是手动的,手动的这里边那我一定把这个ESD给选给去掉,然后八宝这个留着,呃,可以选择VB版本的留着,那些都无所谓,然后我这块再加上一个CSS的一个处理,就是用S和less去处理的方式就可以了。
01:16
其他的咱们都不加选择,简单点的,这样的话咱们还可以呃,创建的速度会快一点。等咱们学到VX和路由的时候,咱们再分别把那两个再加上,那我们选择VE3.0,那选择SARS和less,这个无所谓了啊,那咱们就选择呃,S。然后呃,把所有配置文件单独配置,写在这个配置文件里边,这都无所谓,都可以。然后我们创建保存,那保存一个别什么名字,我们就叫做DEMO3。选择一个,那装包的方式呢,使用。呃,NPM就可以了,然后我们在这块等待就行了,那在等待的时候呢,我们先看一下官方给我们提供的这个组件化开发是什么样的,你搜一下。记着组件的这个单词,Contents这个单词一定要记住是组件。
02:07
你看在官方里组件,咱们现在是用脚手架,咱说现在用脚手画方式是目前开发的主流的方式,那如果不用脚手架的话,我们用CDN上的加载的view view或者是下载view是在页面加载的时候,你看官方给我们提供的是用这种不用脚手架的方式的语法,你看我们通过will create APP创建一个APP对象,然后呢。你看。APP注册一个组件。注册一个组件。这块那组件呢,就得有HTR模板,那模板它是在这块看到了吗?看到这个模板了吗?里边就一个按钮,一点击按钮的时候呢,让这个数据加加,所以呢,形成注册的组件名称叫做什么?就叫做button content对吧,就是按钮的数相加,很简单的一个小组件,特别一个小的一个组件,但这小组件从语法上看还有这么几部分。
03:00
几部分,第一部分,每个组件必须有模板,也就是有RTM部分。那有,而且部分呢,那就有配合样式的部分。对吧,就配合样式的部分,然后呢,每个组件都有单独的date,可以把数据放到这块,用响应的数据加事件将这个加加,对吧。所以呢,组件的组成有模板就是HTM部分对吧,然后呢有样式CSS部分,然后呢有数据处理model的部分,所以每个组件都有视图部分和业务处理部分,形成一个组件,然后呢用这个APP注册这个组件,注册个名称。那你下次只要使用这个名称,就相当于像儿标签一样。你比如说在这个里面,我们就可以直接使用这个自定义的标签了,这个标签就是组件对吧?而钱包里面没有这标签,这个标签是我们注册成组件自己起的名字,那这个组件包含什么功能呢?就是我们说了。你看这块用那个模板字符串吧。对吧,那这个组件包含什么功能,就是有个按钮,按钮里边有一行字对吧,然后按钮一点击的时候,然后这个你点击我多少次对吧,加上这个数据在这块。
04:07
这样的一个结构,这是传统的,当然咱们用就是家不用这种方式去创建,我也不说这种方式创建,因为真正咱们开发VIVO的,使用这种方式创建的几率很大。百分之几吧,对不对,除非做很小的项目,那咱现在都直接用脚手架,你看这样的方式,这就是我上节给大家讲的这个图。所以呢,通过这个官方的例子,咱们能了解几个信息,第一个信息就是组件的组成都有哪些部分,对吧?有人TMCS加这几个合到一起形成一个组件对吧?然后组件必须得注册一个名称才能在你全局里边使用,或者在你的上级组件的使用,就这样的一个情况,那我们看一下我们项目创创建完,诶创建完了,创建完了我们CD进入这个M3里边。你看这块有代三创建了这个项目对吧,那这个创建项目他跟我们看组件的目录,我们有建好了,默认是hello,嗯,你看所有都是组件啊,默认是这个组件,一个哈楼的一个组件,你看外层有一个模板。
05:03
外送一个模板,然后呢。整体模板收起来,把这些最大化啊,先看一下它默认的组件,先咱们了解一下,你看所有的,而TM部分写在这个模板里边,模板里边在V2的时候必须得有一个外层跟组件,就是跟的标签,那咱们在呃三里边可以没有也没关系,直接写数据什么的也都可以啊。那咱们就按VR的习惯,里边必须加一个最外层的就完了,对吧,然后这个里边呢,是写我们什么,写我们的,呃,Model的部分,也就数据处理的部分。数据处理的部分,然后呢,也把我们组件导出去,然后下边是写我们什么,写我们样式的部分,写我们样式的部分,这是默认的组件,那默认组件呢,那也不太好理解,那我怎么办?先把它删掉。把它删掉。咱不默认的,咱们自己写完完全全写一遍,然后这个呢,是他给我们提供的默认的这个组件,就是加载这个组件,我们把这些东西都等到都去掉,把加载的过程也都去掉。
06:02
就做一个非常简单版的一个。咱们自己先做一个hello word的这些东西我都去掉,我给你一点点去写啊。我们知道。就留一个这样的结构。就有一个这样的结构,当然了,这个最外层的,现在它也是一个应用,这个应用就是相当于整个页面的组件,APP的组件,这APP组组件呢,在主入口文件里边,你看我们加载了什么这个组件导入了app.vuee这个组件,然后呢,把这个网挂载到这个APP,这APP呢就是在我们M里边,这是咱前面讲的这个结构,那这些东西我都不动,我现在呢,就相当于自己建一个组件。自己建一个组件,然后咱们再往这里边去去弄,那比如说我现在就建一个哈喽组件,他原来哈的件吗。我不用官方手册那种默认的那种方式,那种方式呢,复杂还不好理解,那咱们既然用了脚手架,就直接用脚手架的方式,既好理解又简单。那咱页面一个页面有可能有上百个组件对吧,当然这个组件不一定自己写的,有可能用第三方的,我能做项目的时候就用第三方都给我们写好的组件,我们像搭积木一样就能把项目很快的拼接完成,如果接口数据都有的话啊。
07:08
那我们新建一个。找一个模板什么用,没有这个组件,没有这个组件,看我这个吗?如果你工具没有的话,你在模板里面添加一个就行了。然后起一个名字,那组件名字一般我们最好是驼峰式命名,比如说哈。Word word hard word这样的一组叫驼峰式命名。然后我们组件的名称后缀名是点vuee.vuee就是证明vuee的组件,当然后缀名什么都可以改,这个没有必要改啊,就叫这就行,那你说了几百个组件,那我们最后拼装在一起,形成一棵像盗木树一样,像这样的一个树一样拼在一起,对吧?那文件是不是得一个青铜啊,不是的,因为我们用的是脚手架,它里边。是用web派的一个原理,对吧,会有打包成一个文件的,所以呢,在开发阶段你尽量拆分成尽量小的颗粒化,这样呢好维护,那在运行的时候呢,它不会说一个文件一个文件请求的,会把这样文件都给我们打包在一起啊。
08:04
那那我新建了一个在SR,在这个M3里边,Src里边组件里边我们新建了一个这个组件,这是我们新建的组件,对吧,那组件就有STM部分,那STM部分,那我们这里边可以随便写,你写什么多少标签都行,他说了最好定有个外层标签,但没有没关系,最好一定有一个外层标签,然后里边我们H1这里边写上一个数据,我们用差值,当然数据写在哪呢?数据。这个是名称组件的名称,名称你给自己定义啊,一般名称都跟文件名称相同,一般名称都跟文件名称相同,就是这点。然后这里边可以写什么呢?可以写date,跟我们自己写的那个方式一样,然后返回一定要是date是一个方法,里边返回一个对象,里边数据就我们自己写了,比如说啊消息mes消息我们这块。哈喽。Word word hello word多加几个号,证明是我们这里写的数据,那我们在这块。
09:02
看一下在这里边就可以写mes就可以写了,加这个了,那我们在这个里边就可以写我们的样式,就把这个去掉,一会我再讲这里边的具体的一些细节啊。那。一个组件HTM部分对吧,这块,然后呢,数据的部分,当然我这里边也可以加一些事件什么的都可以操作,跟咱们前面做的是一样的,模板一半都是可以的,然后我们在这个部分。在这个部分写的就是这个样式,比如说嗯,做一个类也行,比如说box做一个类吧,BOX1,然后宽度比如说是。嗯,300江苏。高度,比如说是嗯,300像素R含高,我们也是300像素,然后。100像素。就随便写的,然后。字体的颜色我们是re欢迎的,用的是红色的bak,背景颜色yellow多写几个,然后字体的大小,比如说150像素里边写到,我现在都不知道这个样是什么样的,但是呢,我加这么多。
10:10
加这么多,那这块我就可以用什么class加载我们的BOSS1,那这个组件就有什么,就有H标签对吧,然后有这些,当然你好多东西都可以在这里边去写,你比如说。这里那些俱多再写。但现在不建议用里边那什么用,就意味着你这里边可以写很多标签。Pro加一个。在加强了,当然有h he已经是加强的了,没有用,我只是模拟一下去写,表示这是一个组件,那组件写完了,我们现在如果直接访问,你看我们运行一下NP,嗯,NP mer运行一下。然后我们打开浏览器,这个时候我们就得是。在这。新建一个吧,老他肯定是800。
11:01
M3,你看我们访问的是什么都没有,这个页面上,因为我们访问的是什么,访问的是HTML,那HTML里边又把我们的什么APP挂在这块,其实是我们把什么漫画把APP挂在这块,挂在了什么,诶这个APP里边,这个APP在哪?在这里边,这里边模板里边什么都没有,对不对,那我这边写了。一行井号,你看访问的就是这个。一行减号,我们把这个。这小还是放在边上。F12这几个模块我们都打开。后台吧,后台。你看一下,现在是访问的这个,咱们说了你写的一个组件在用的时候,我们必须得把它什么。注册到他的上级组件里边,对吧,放到哪块去应用,我们得去应用才可以,所以呢,我们写了一个组件,你看哈,这个组件我们如果想在APP里用,我把这个去掉,这个去掉,现在就俩组件,一个APP组件,一个hello。呃,Word的这个组件,那我想在这里用,首先呢,在GS这里边,我用哪个组件,第一步一定得需要先iPod引入这个组件导入。
12:06
导入从哪个里边呢。从我们当前目录下这个目录或者这个目录子目录下,你可以随便进子目录区分成对吧,你比如侧边栏的所有的组件放在什么下边对吧。所以呢,可以随意建组件,咱们讲课呢,就不写太多层次了,这里边有个hello word这个,那它后缀名不带后缀名,它会自己识别就可以了,然后呢,导入这个,你看我们这个组件名字叫这个对吧,但是呢,我们上面是缺少的导入对象,所以你可以这个组件引入的时候,你可以随意起名字,叫什么都行,对吧,我叫DEMO行不行啊。都可以,但是呢,你在应用DEMO的时候不知道这个组件,所以我们建议什么名字最好是和你这个文件名或者是组件名是相同的,那我们也是hello word hello。你看啊。啊,好像这个我们写错名了。W,少写个L,那我也少写L哈。
13:01
那现在这个组件。写这个组件,我们就能在这个位置上用这个组件吗?你看就能在这个位置上使用这组件嘛,那我们使用的标签是hello hello。少几个,别看能这么使用吗?你看我这么使用一下,我把这个页面拿过来,你看这不还是没显示,而且下面提示告诉我失败什么失败呢,对吧,组件hello word在APP里面没有什么没有解决。为什么?因为我们虽然引入进这个组件,但是呢,我们必须得这只是引入将当于把这个文件拿过来,对吧?文件拿过来你得干嘛,你得注册,注册使用什么注册呢。使用这个在我们这个里边,咱们原来这里面不可以有date吗?Bata对不对这个方法。计算属性的方法,这些不都有吗?对吧,那我们这里边也可以加注册,当然这跟顺序没关系,注册当然这语法错误,它现在提示的。拿过来。那。
14:01
这样的话,我们就。写在这里边就可以注册组件了,那注册哪个组件,我导入进来这个组件组件对不对,我是不是得把这个注册呀,那注册的名称你这里边可以,虽然是导入这个名称,那注册名称你也可以随便写,比如说我叫他H啊注册,注册的时候我就换成比如说正常的名字her hello l注册的名字,因为它是一个什么,它是一个接分格式,也是键值,对对不对,那注册的值呢?He hello word,你看这个不带L的,对吧。对不带L的注册,那注册完了之后,你看这里边没显示,因为我这里边用到的是带什么,是带L的这个你看。是不是哈喽,这会在这呢,但是这个自己太大了。自己太大了。这就可以使用了,那为了我们注册方便,通常我们怎么办呢?你看如果在阶层格式里边,咱们不说有一些简写方法吗?如果名字和值是相同的,那我们可以写一个,比如说如果注册成是这个对吧,你看上边一样可以使用。
15:00
假如把这个去掉,保存一下是没问题的,那名字和值一样,咱们只需要怎么着写一个就行了。所以现在。咱们以后在注册的时候,这虽然是积分格式对不对,那我们用这个名字和这个文件名和里边的组件名相同对吧?然后我们这注册的时候名字也相同,这样的话关联关系会很明显,虽然你每个地方都可以自己起名字,对吧,但是呢,那样的话,你的逻辑感觉是乱的,虽然是都互相绑定的,但感觉是乱的。这样的话我们组件就可以使用了,对吧,那组件当然这里边我把样式稍稍改一下,这个太大了,你比如说字体是50。然后呃,这个高度他给我去掉。嗯,行高,我去掉这些我去掉变得变变得简单点。这就是一个组件对不对,那我们这个组件就可以共用多次,你看,假如你看我们组件是HTM标签,那是T标志里边我现在能写东西吗?我现在写AA,你看。这里边显示吗?没显示,那后边咱会讲插槽的时候咱们用,因为你起定个名字,这个名称也就是相当于这个你自定义个组件,就相当于自定义一个天然标签,你自定义这是天然标签里边就拥有什么,就拥有了。
16:12
这个组件里边的全部的样式和HTML,所以呢,你没有必要在这块这些东西。这些东西,那如果想在这个标签里边再加东西,那你可以干嘛呀,你可以在这个hello word组件里边,你再去干嘛呀。在这个内容里再加一个其他的组件,比如说我现在再建一个。当然了,你最好是组件之间有层次关系,你最好输入也有层次关系啊,当然他可以。不用去不用去做,你看我这里边儿再给他往下再建一个组件,我建一个。无一个组件,我们叫做呃,我可以简单的写一些名称,比如说叫做呃,One组件one,然后呢,Con。随便写了一个。你看这里边儿还是一样的原理,那这里边儿我做一个8DIV。这里边,然后b to写了一个按钮,然后按钮的名字正好你写个呃,提交吧。
17:07
提交,然后这里边儿我把八起。BB提问。这里边儿我们来一个说法错了。是吧,来一个宽度啊,100像素高度。呃,50像素。然后他十个像素随便写了,然后bak背景颜色,嗯,GRN都是绿色的按钮,然后字体颜色white白色的就行了,假设一个这样按钮,那如果我们想把这个。这个组件在hello word里边组件用对吧,我们这个标题,标题下边假如说我想加一个按钮,那怎么办呢?那我们步骤一样,就作为它的子组件了,先干嘛呀,Iport引入一个什么Y这个你看一写名字,假如这组件声明完之后,它会直接给我们提示,就直接引进来了,然后我们在这里边使用什么好。
18:04
这块必须得注册。注册一下什么名字,这会有多少个开?注册一个就叫做Y,假如名称和值一样,我直接写这一个就行,对吧,然后这里边我们就可以使用什么,使用on Co,你看明超。这块就有这几个按钮,那我们在这里边。在word里边。你看引用这个,那我们在APP里边引用hello word hello word中间想插的内容是在这个组件里边去加别的内容,是这样去突破,而不是在中间内容,那如果后期我们学完插槽的话,那咱们就可以去改变。所以呢,APP是hello word副组件,Hello word是one,嗯,CP的父组件,是这样的一个父子传递的关系。那另外它这里边儿不光是支持这个驼风的命名,你看一下啊,我现在在这里边,假如我再写一个按钮,我可不可以这样去写一个按钮啊。啊哦。On,咱们试一下comp我想写的这个。
19:03
你看也多了一个按钮,也就是你命名的时候是驼峰命名,你可以变成小写的这种上线的命名的方式。都是可以的啊,那因为我注册的是这个名称,它是支持这样的去解析的,但是尽量别这么用,用什么名你就用什么名就可以了啊,然后我们在这里边,比如说hello word这里边我们再复制一下,那我们可以改成什么呀,我们改成hello对吧?Word你看可以这么提示我。用上,你看下边一样可以把这两个都拿过来,这是我们组件在引用的时候命名的播方式命名和这种刚性命名的一个方式。这样,那另外呢,呃,我再给大家说两个知识点什么呢?在写样式的时候。这组父组件子组件,但是组件具体什么东西大家要了解啊,要了解那现在既然有APP。最外层组件,副组件组件它应该叫孙子组件,对不对,副组件也有组件,就类似于这样的,那在组件的时候,我们在写组件之间导入引入iPod一下,然后注册一下。
20:01
这个相信大家已经清楚了,但是样式这块大家还不太清楚,你看啊。如果我在这个里面写了一个类,假如说或者是一个div吧,因为我们看这里边是不是都用到div了,我用了div了,写一个类吧,点嗯,Box。三随便写了一个这个,你看在这里边,我写一个很明显的一个宽度,200像素高度,呃,100像素BK加背景颜色,给一个blue蓝色的蓝,对吧,假设是这样加一个背景颜色,然后前景颜色。白色的一个样式,我在这个最外层组件里边,也是副组件里边写的样式,你看。如果什么都不加的话,默认在子组件里边是可以用的。你比如说我直接在孙子组件里边用一下我这个按钮,我把它的这个呃,Button我改成呃八一。
21:03
那。我这块改成8100,那这个按钮就失去了它的效果对不对,但是呢,我在这个里边我加上一个类。什么呢?Bo to那个BOX3,你看可不可以,是不是可以了。我在APP里边加的,在孙子组件里都可以用。对吧,那在hello word里边,这里边肯定都可以用了,对吧,那组件名称上可不可以用呢?比如说我这个,呃,这块来一个吧,Class你看加一个三。这好像看不到效果。因为会被什么。这个给覆盖掉,那我们再看一下这个组件。他现在加到这个Y。整体这里边。当是很少在整体这里边加的就是这个,我先在这里边加一个BOX3。你看。对吧。这块子组件都可以用,那如果我加一个样式,默认的这个样式是全局的,如果我想的是局部的,因为好多样式的话,如果你父类里边写的样式,比如说你写的div样式,那子类里边是不是就是子组件里边是不是有可能也用到div。
22:14
肯定会用到div啊,那如果两个都用到div,那是不是就有一种混淆或者冲突,对吧,或者覆盖这样的一些情况,所以有的时候我们有的时候一些全局的样式我们需要继承,比如说最外层一般在这里边我们写的样式就这么写,需要让子件去应用全局的样式,但是我这个里边声明的样式我不想让子类利用,比如说就BOX1,那我这块假如提交按钮再来一个。E,我这出来一个class ss等于Bo啊,Box。啊。Class box1我在这里边有了一个box c换200,然后这里边没有文字的加一个啊哈吧,随便写了一个,你看哈对吧,这个样式,那如果我这个就想在这组件里用,不想让它在子组件里用。
23:03
那我只要加上一个这个词,就限制他的局部了。你看哈,这个样式没有了,那这个样式能在哪用呢。你比如说我在我自己的组件里,Boss是可以用的,是没问题的。所以要记住这个特性,什么特性呢?如果你想要某个组件里边的这个样式只在自己里边有效,不让他在子组件的有效,那它就会加上一个这个属性,那这里边儿的所有写的样式只在当前的组件的有效,不会往下传递。直组件的就用不了。是这样。那这里边还有一个属性,你比如说我就在这个hello word里边里边写了,但这个组件列的有点乱,但是咱们现在的整句法啊,先不用管这些。你比如说我这里边咱们说还支持一个什么呢?还支持一个咱们安装的时候,我记得选择是S或者less对不对,那你这不管S还less都没关系,那你可以在这块加一个language属性,你加上S对不对,你比如说咱们用的是SAS这样的语法。
24:03
那这个语法这里边这个都不支持S7SS。可改成这名,因为这俩是一样的,前面咱们讲外派,那个是一个意思啊,你看。这里边加上这个里边就可以解析这个语法,如果不加的话,它是解析不了的,你比如说我这边生成一个高符宽度,咱嗯,因为S是Dollar符,Light是用I的,对不对?高福,比如说W,你用一个W简单的吧,比如说嗯,200像素,然后呢,嗯。200像素也有提示的,然后颜色是red红色的。我说明这两个变量,然后我在这块把宽度这块我改掉到弧什么W。对吧,就用到了这个变量,当然你可以在这里边再起局部变量都可以啊,然后颜色ID我写个高西把它换一下。换一下外衣啊。黄色的用的蓝色有加烟嘛,绿色的。
25:02
换一个。你看。就换这个字体颜色和这个颜色,其他我不换,那现在这样的话。你看这里边,呃,绿色没有体现,你看在哪块用到了这个boss啊在。什么嗯,He这里边对吧,消息是hello word这块用到了,然后呢,在这个里边hello里边也用到了。对吧,但是咱们没往下传。这块只是局部的,只要局部用对不对,那这里边颜色绿色的,背景是黄色的,现在就没有背景是黄色是绿色的对不对,那这块有的颜色是因为我们蓝色的,是因为我们报三,这里边加了这个样式,在这里边加了一个报三吗。对吧,Bo s3盒子三这个样子,那我们现在想它生效怎么办呢?加上LG等于SGSS。而且你看黄色背景绿色就可以了,它就能将我们这种怎么SS的语法转成我们的处理成CSS,然后CSS浏览,其他认识是这样,所以你在CS在里面就可用S变成了,比如整个页面的宽度你都可以做成变量,整个你网站的主体颜色都可以做成变量等等。
26:08
都可以去这样去解析了。这就是我们这节课给大家讲的组件那。下节课我再给你总结一下吧,这节课。刚刚认识这个,你知道这里边语法的特性。嗯,比较简单,等用长了就可以了啊。
我来说两句