00:00
下面呢,我们来学习VE中的组件,还有路由,组件和路由也是VE中的重要的概念,各位同学对它也要有一个定的了解,那下面呢,我们先来看一下里边那个组见首先解释一下什么叫组建,咱看一下这段话里面的描述,这里写到啊,组建。com是voe最强大的功能之一,组建可以做什么的,这里写到可以扩展HTL元素,封装可重用的代码,这是组建一个说明。那这句话怎么来理解?给各位详细解释一下,我在图里边画一下voe中的。组建。虽然说我们的重点呢是后端,但是前端既然我们学了vuee这个组件的概念,各位必须要理解,因为这属于一个基础知识,那我们来看一下啊,这里写到组件可以扩展HT元素,那什么意思呢?大家想一下啊,比如现在各位应该都知道HTMLHTML中是不是有很多的标签呀,而这些标签是不是都是固定的,就是固定的标签代表固定的含义。
01:16
写下啊,固定标签代表。固定的含义,比如说A标签。各位都知道。是不是超链接标签,比如说div标签,就是我们的块元素自动换行,比如说里面有这个SPA,就是一行进行显示等等,每个标签代表固定的含义,而现在voe的组件什么意思呢?咱说的通俗点就是咱们现在可以自定义一个标签,然后让我们自定义的标签。具实现一些具体的功能,这个叫可扩展儿调元素,比如说啊,我起标签,比如咱起个名字叫ABC,这个标签中肯定没有,但是我现在可以自己定一个标签名字叫BC,让OBC,比如做一些中的显示,这就叫做可扩展二条元素,而voe的组件主要就来做这个事情,在实际中咱可以把一些公共的部分放到自定义这个标签中,或者说voe的组件中进行封装。
02:20
这是我们对于概念的一个基本说明,那下面呢,咱把这个组件怎么用给各位演示一下,大家做个了解可以了,主要记住这个组件到底是干什么就可以了,那我们来创建一下啊,VE中的组件。把代码出来,然后在里边写一下,注意怎么写啊,首先这里边呢,你看啊,我们有EL,有date,之前说过EL表示显示内容的位置,咱们在div中,然后date中定义变量初始值,但是现在用组件下面呢,咱需要再加上这么一个名字。
03:00
我写一下啊,组件这个名字叫做。我写一下啊。这个名字,然后加上大括号在里边定义的组件,这个名字呢,如果你怕写错,你可以从课件中直接复制,因为这单词有时候很容易拼错啊,注意这个一定不要写错,我这拼的是正确的,然后写完之后在里边我们定义,首先第一部分你给那个组件定义一个名称,好比说咱们定一个标签名称,这个名称理论上随便写,比如说写个名字啊,就叫。At硅谷可以的,然后第二个大括号加上你要那种,就是我现在用标签,然后标签做什么事情,在里边写个注释就是你的。组件的内容,然后上面这个at硅谷是你的组件的名称,然后内容里边需要加上一个名字,叫time里我写一下。
04:04
里,然后time里,这里边加上你的内容,就是用标签里边显示什么,写到这里,那这内容我从课件中复制,比如现在啊,我写了一个u Li Li这么一个就是列表,标签里边显示首页,包括里面这个什么序员管理啊,这是我们写的这么一个过程定义组件名称叫at硅谷它的内容这个内容。然后写完之后,最后咱们使用组件,那我在div中注意怎么用啊,因为它就是一个标签,标签中咱们加上at硅谷这样的话就可以使用,最终咱们执行看效果。大家看啊,很明显效果,我页面中是不是有首页学员管理是咱刚才定这个列表标签是不内容,这就叫做组件,咱可以把一些公共部分在里面定义,比如说起名AC,硅谷或者起名ABC都是可以的,所以现在这个就完成了,通过这部分,大家主要就是知道这个组件到底是干什么的,把这个特点给他记住。
05:11
这个啊,我简单截个图,就你把刚才这个概念记住就可以了,这是我们提到的这么一部分组件。组建VE中一个重要的概念,咱们项目中也会涉及到啊,虽然项目中呢,可能咱们不会直接写到,但这概念会用到,所以这个基本概念记住就足够了。然后这个完成之后,下面呢,我们再来看一下voe中的下一个内容,这个内容叫什么,它叫陆游,给各位同样解释一下啊,首先说明什么叫路由。说到路由呢,大家肯定会想到什么路由器这个东西就跟那个类似,路由咱说的简单点,它就是我们普通说那个菜单,只是在VE中,它没有菜单的概念,它叫路由,那什么叫路由,给大家画个图,咱说明一下啊。
06:02
比如现在啊,我这一个页面。然后比如说页面这么布局的,有上下两部分,在上面部分,假如现在这里边可能有你这个网站那个logo,然后这里边有一些相关的一个超链接,比如说我们现在做的是一个电商,里面有这么几个超链接,有首页。啊包有什么这个什么数码产品。我就随便写啊,包有什么什么母婴产品,这是一个基本内容,但是比如现在这里边效果就是比如现在啊,我点击首页,那在下面是不是显示首页内容,我点击数码产品,那下面是不是显示数码产品内容,我点击母婴产品,它是不是显示母婴的相关内容,所以这里边就叫做路由,点击不同超链接或者点击不同路径,它会显示不同的内容。这是我们说的路由,就是咱们普通说那个菜单,只VE中没有菜单这个概念,它叫路由,但是意思是相同的,这个各位记住啊,什么叫路由?然后下面的给各位演示个效果,这些效果代码不需要各位记,因为咱后面不会直接写到后面咱用框架都直接改就可以了,但是里边这个代码通过它大家就感受一下这路由到底什么意思,或者路由到底是干什么就可以了,那下面给各位同学演示一下这个路由的特点。
07:31
我们来演示啊,首先我建一个新的页面,我们是第十个路由。小弟位置。点HTML,然后在里边加上我们的代码,加上代码之后在里边加上我们的内容,那怎么做咱们看一下啊,首先第一步咱需要引入JS文件,除了voe的,还有一个叫rootor,就是咱们说的路由的这个文件。这个需要引入。
08:01
而路由文件目前没有。所以我从我的资料中。给各位找到,或者你连网下载,我这里已经听好了,然后找到你那项目的工作区里边,给它复制过去,我项目工作区在这里,咱们找到啊这个位置。有vuee把这个直接复制。一个voe,一个voe rootor,然后把2J文件引入,这就是第一步,引入之后第二步在里边加上一段内容,这内容我直接复制啊,咱们看一下这个内容是什么啊,加到divv里边大家看啊,首先我有一个叫routeor link,它就类似于咱的A标签,就是咱的超链接标签,里边有三个首页,会员管理,讲师管理,包括to,就是到某个路径某个内容中去,下面有一个叫routeor web,它就表示。我点首页,首页内容在里显示,我点会员管理,会员管理内容这里显示,这是我们写的div部分。然后最后咱们编写加入部分,这部分我也是复制一下,咱们看一下这个。
09:07
过程就可以了啊,咱们看一下啊,这里边什么意思。大家看啊,首先第一部分我们就是定义了三个固定值加个to里,这什么意思呢?就表示啊,我点首页显示,欢迎点会员管理显示,这个点显示管理显示,它就是你要显示内容,然后第二部分加上你的路由的对应关系。大家看啊,咱就以这为例。我这路由是不是叫student,所以对应谁就是这个student,然后teacher对上,就是我点student显示这个内容,我点teacher显示这个内容,他们定用关系。然后第三步创建这个VE root,把这加进来,最后在VE中挂载进来,这个路由部分就是里边加上root,这样的话路由就可以实现,这是我们看这个效果,大家能看懂就可以了,最后咱们执行看最终结果。
10:03
各位看啊,首页是欢迎我点会员管理,点讲师管理,每个超链接或者每个路径,它是不是会显示不同内容,这就叫做VE中的路由。所以咱们现在呢,就把VE中主要的这些基础知识给各位就都说完了。要求各位同学掌握第一个差值表达式,第二个常用的指令,第三个生命周期中的两个方法,还有最后的两部分,一个组建一个路由组件就是自定义,而标签路由就是类似我们的菜单,点击不同路径跳转到不同内容。这是们。演示到voe中的技术支持。
我来说两句