00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们做了一个应用案例,就是购物车,那用到的呢,就是VIVO的模板基础语法,那到这里呢,咱们VI的基础语法部分咱们就讲解完了,那这节开始呢,我们开始学习will的新的知识什么呢?Will的组件化开发,那不光是前端框架,Will那么也一样,组件化是前端开发框架的一个精髓。那VIVO开发呢,它就是由一个一个的组件构成的,所以我们后边做的所有的项目,你在开发中,你写的最多的其实就是在写一个一个的组件,那么我们学习的像后边的VEX,还有路由以及前面的模板语法,其实呢,都在围绕我们去编写will的组件。那什么是组件化开发呢?想象一下,我们以前用解query的那种方式也好,或者再往前推写接开页面那种方式也好,那我们是把整个页面当成了一个组件,那由多个RTL组成的,由多个样式组成的,然后再配合GS特效或者几块特效,是一个大的页面,咱们没有去拆分,那你接触了前端框架,不管是vuee还是还是V小程序还是阿拉JS,那么思想就得转变了,那不一定说是底层的,咱们GS那种什么虚拟报幕的思想,而整个页面布局上,您的思想就得改改变,变成什么组件化的思想。
01:26
也就是将我们的每一个页面像这样。相当于拆成一个一个的小积木去开发,当然这个小积木可以是你自己开发的,也可以是第三方的。那如果假设我们有海量的第三方的这样的组件,我在开发一个这样页面的时候,那我只需要结合我的业务逻辑,结合UI设计,那么就可以很快的实现一个页面。为什么说能很快的一个组件化,为什么能很快的实现一个页面,那以前我们在做页面的时候,比如说我们都是用HTML去堆积的,对吧,然后呢,再配合写样式,写JS特效那样的可扩展性对吧,可维护性都很差。
02:11
而如果我们把几个或者几十个有一定功能的内容我们封装在一起,那几个RT标签封装在一起,然后有单独的样式,有单独的业务,形成一个组件,那么我们只要维护这个组件就可以了。组件一改变,多处用这个组件的地方就都会跟着改变。我们只要怎么把组件写好了,单独把精力关注到一个组件的业务上,相当于把一个大的系统给拆成小的了,然后我们的拼成一个大的项目,是这样的一个开发思想,就像我们用金木,你可以搭成城堡,有可能你还可以摆成高楼大厦,对吧,等等都是可以的。那一个页面怎么拆呢?给大家看一个,假如说咱们这样的一个页面。有这样的一个页面,你看你可以把整个一个页面看成是一个组件。
03:05
这就是最外层的一个大的组件。对吧,但是这样如果把一个页面看成一个大的组件去开发,不去拆分的话。那和以前的不用主动化,开放性是一样的,那我们如果要设计一个这样的页面,我们怎么拆分呢?整个外层我们会看成是一个大的组件,然后呢,头部假如说到德缓冲片,这不用到缓冲片啊,到这个部分。最好是有用于话题工具就好了,那是一个大的组件,然后呢,班的图是一个大的组件,然后你的收获是一个大的组件,然后关注我们是一个大的组件成长平台,培养模式,面授培训,实习目标这些都可以是大的组件,然后呢,你的总监。对标培训工作环境,还有下边的photo,那你可以按照什么纵向去切分很多个组件,那纵向区分组件那里边我们还可以切分,比如说还可往下切分,比如说这个菜单栏,那菜单栏呢,每个子菜单,每个子菜单可以是一个组,可以是一个组件,然后呢。
04:05
每一个菜单项前面的图标的可以是一个。组件对吧,像那个banner,因为网速还没加载完啊,Banner是一个,然后呢,这个列表是一个,里边列表项还可以是一个。这里边儿整体大的是一个组件,那里边儿呢,每一个图片和上面的文字,加上这样的一个特效,又是一个组件。这个部分。你比如说。将这个讲讲师介绍,咱们看上去是四个组件对吧,外层是一个大组件,这里边是四个组件,然后里边的图片又是一个组件,它是一个可以视频播放的,然后呢,我们再来看标题和名称都可以是。所以呢,我们。什么样的去拆分小的组件呢?就是遇到。这个功能会重用的,哪怕是一个按钮,哪怕是一个链接,如果有独特的样式,独特的特效,你就可以把这几个而天然标签合到一起,形成一个固定的组件,然后我们可以作为子组件,也可以作为外层组件,然后一起去应用,就这样的一个过程,就像。
05:06
官方给我们提供的这张图片,你看一个页面一个颜色的就是一个组件外层,整个一个页面是一个组件,对吧,整个一个页面是一个组件,是上面那个最最外层,然后分成上。然后主体区域和侧边栏又是三个组件,对吧,然后呢,在这个主体区域里边又分为左右两个,上下两个,又是两个组件,在这个侧边栏里边又有三个小组件,又有三个小组件,就会形成这样的倒数的结构。那有倒数的结构,那么组件它之间是怎么找的呢?你看这种倒数结构,拼装完给别人直观的感觉是这样的组件,但是实际上它是类似于这样倒。倒数的一个倒结构的,类似于这样的组件,最后拼装成的还是那种倒数的结构,浏览器能执行的。所以呢,咱们既然使用未有的组件化模板开发,那么一定要了解的就是组件化开发的一个思想。开发的一个思想,那每个页面都是一个。
06:02
大的组件里边的任何一个小模块都是一个小的组件,然后呢,把它们关联在一起,形成这样的一个什么,形成这样的一个倒数结构,这样的我们在加载页面的时候,它会层层层层相关可以找到。是一个整体,而不是脱离这个整体有一个根,然后呢,分支下边是叶子,是这样的一个结构,所以呢,咱们开发一个组件,想在页面用,一定得加到这个倒着的数里边,倒数结构里面我们才能使用。对吧,所以组件不能单独使用,一定要放在单独这个里面。那组件我们要讲的呃东西呢也比较多,呃,并不是说简单的,我们把几个HTML样式和GS合到一起就是一个组件了,那组件呢,还会划分负组件和子组件,全集组件和局部组件也有这样的划分的。全局组件,局部组件,父组件子组件,那既然划分父组件和子组件,那组件之间呢,还会有什么通信,把负组件的数据传给子组件,那有的时候子组件也需要把数据传给父组件,那有的时候不相关的两个兄弟之间的组件也需要互相通信,也需要互相通信,也数据数据往来。另外呢,我们做一个组件,组件的大致的内容是相同的。
07:13
里边数据不一样,那这个呢,我们可以通过呃,改变数据,然后让不同的组件加载不同的数据来显示,但是有的时候呢,组件和组件之间只有部分的什么结构不一样,但是呢,百分之六七十是相同的,那我们还可以用插槽,就相当于我们写一个函数似的,定义出几个参数来,就可以通过传递参数,那我们组件之间面是通过插槽的方式可以去。拼接一个或者是扩展组件的功能。所以呢,我们定义组件的划分,这个呢,咱们要看它的结构,所有的咱们跟组件相关的技术都学完了之后,那么我们尽量用组件独立化。对吧,扩展功能可以用插槽的方式和和数据的方式来扩大这个组件本身的功能。就可以了。
08:00
这就是组件化开发思想。当然了,现在你有可能不太理解,你只要知道组件化这个开发思想是VIVO的一个精髓。听到吧,是一个精髓,所有的开发都是由一个一个组件构成的,只要记住这句话这一点就行了。那至于父组件,子组件,那组件怎么说明,怎么定义,那只是语法层面上的。那我们实际开发就是把这些组件拼装,就形成我们一个。什么最终要完成了实现目标的一个页面。就可以了,所以这节课我们就了解一下组件化,什么是组件开发,那下节课呢,我们会,呃,通过代码看一下,开发一个组件怎么绑定到这个倒数结构上,让我们整体可以应用好,谢谢大家,这节课我们就讲到这里。
我来说两句