00:00
呃,接下来呢,咱们再来介绍一下VIEW3里边的几个组件啊,这几个组件呢,还算是比较常见,第一个叫fragment,它是属于片段组件标签,然后呢,这块其实也不需要我们写这个代码,就是在V2里边,我们的组件里边必须要有一个跟标签,这啥意思呢?就比如说咱们拿这个APP啊来举例子。点一下这个啊。我把当前的这个啊干掉,它来个VV3。我们要是在V2里边吧,写代码必须得有这根标签,所有的标签都是在这里边写的,比如说HR啊HR,然后来一个什么呢?测试测试一啊之后呢,把它CTRLD下,这个是测试二。V2当中,HTML里边我们要这么写,它要有一对跟标签。1234这个是跟标签啊,必须这么写,格式化一下啊,保存此时呢,我们可以打开当前的这个界面做个刷新。现在我们来看一下div里边有个跟标签div div里边是HR2个标签是吧?那VIVO里边VIEWVO2当中是这么写的,但是到了VIEW3当中说组件可以没有跟标签,内部会将多个标签包含在一个fragment虚拟元素当中。
01:10
然后它有什么好处呢?减少标签层级,减少内存的占用,那也就说到了VIEW3当中,我们根本不需要写这玩意儿。直接就不需要跟标签。把想写的标签放到。这个里边来就可以了,Time place当中就可以,然后现在呢,我们去也去刷新一下,一刷新。之后呢,现在我们可以看到里边就是两个跟标签,没有别的东西啊,这就是一个fragment啊片段标签好。T point这个组件标签还是蛮有用的,这是一个瞬移,瞬移就是瞬间移动,把有些东西,有些标签瞬间的移动到某一个指定的位置,那就是这个呢,就是t point这个组件标签,咱们来看一下它是怎么用的啊呃,这样吧,我在这边,嗯,这里边儿这个东西也没讲啥啊,呃,当然咱们这块做一个简单的总结吧,1234就是什么呢。我把上边的这个内容就直接放到这儿啊。
02:04
好,放到这就可以了。OK,然后呢,我在这边新建一个目录吧。这个是21啊杠ment ment组件的这个介绍,嗯。然后这个APP我就把它复制到这里边儿来啊好下一个我把这些动图去掉,VV3。是这样的啊,给大家介绍另外一个组件,这个组件它的作用比较大,然后呢,我在这边这都不要,我就给它起个标题,这个是HR啊HR这是APP负极组件,然后呢,我把这个代码呢,放到这个子集组件当中去写。来一个文件啊,Modl model button。点六啊,这个里边是VV3。好,改个名字啊,Mo dl button,好,这里边我写什么东西呢?注意看啊。简单点,我要做什么功能先跟大家去说一说,接下来我打开这个界面的时候,在这个界面里边有一个按钮,这个按钮上边显示的是什么呢?打开对话框,当我点击这个按钮的时候呢,它可以弹出来一个新的对话框,好,那我就把这些代码,HTM代码,包括它的这个呃,GS代码,我都放到当前这个子集组件里边去写,现在呢,来我们简单的去写一下,然后给大家去看一下这个效果啊,比如说啊,当前有一个什么呢?有这么一个div吧。
03:26
然后呢,这个div里边有个button啊,当然我我不要这个div位啊,我直接写button button这个button它的作用是什么呢?啊,比如说是打开。打开一个对话框,好,然后这个八天里边,将来我肯定应该是点击事件,对话框默认是隐藏的,默认是隐藏,当我点击按钮,它可以干嘛呢,显示出来啊,所以说我给它一个点击事件,在这个点击事件当中,我就来一个mod吧,Open。Open,然后让它变成什么呢?变成处,当然这是一个普通的按钮啊,这么写啊,那我现在需要这个表达式,表达式呢,我应该先定义出来setup括号括号诶。
04:12
Return出去啊。OK,然后,当然我需要这个表达式,Count。等于ref的方式啊,默认我给他一个false。If需要引入进来,逗号if,也就是说啊,这个表达式干嘛的,它是控制对话,对话框显示或者什么的隐藏的。那这有现在有一个按钮,现在我再来一个什么,再来一个div啊注意。这么写。1234这是一个对话框代码好,对话框里边我让它有一个什么呢?有一个div啊,这个div给它来一个V杠,F等于当前这个表达式。那也就是说这个div里边用到这个表达式,表达式如果是false,那当前这个div就隐藏,当我点击按钮,诶,这个div就会显示,这个div就是用来存储这个对话框代码的啊,当然了,这个对话框里边的话肯定应该也是呃什么的,也是应该有一个按钮的啊,那我就再来一个div吧。
05:13
Div当中啊,这是对话对话框之后呢,我这块再来一个button button这个是关闭对话框。画框好,那我应该也给他来一个点击时间艾特C等于啊,那它的话就是当前这个表达式,为什么呢?为false就可以了,等于false这块啊,我并没有定义这些回调的函数啊,这个要注意啊好。现在呢,我把它保存一下,保存完了之后呢,在我的负极组件里边要引入当前这个子集组件point,把当前这个modl to引入进来,From,点杠啊,点view,当然要用的话得先去注册一下component。好,把这个名字呢拿到这儿来。
06:01
OK,上边呢,我再来一个HR。好,然后呢,拿过来用到这个子机组件保存啊,现在呢,我们先打开这个界面来看一下效果刷新啊,我一点出来了是吧,我再点啊,应该点它是不是就关闭了吧?好,注意看啊,当我点它的时候,那我的对话框代码是不是仍然在我当前这个div当中,就是ID等于APP的这个div当中,对不对,当我再去把它关闭之后,它就没有了,消失了,那我现在可以套上一个什么叫做t po的一个组件标签。把它复制一份,然后呢,这样做啊。把它放到这个组集组件当中,在这个位置把它拿过来。杠拿过来,拿过来之后呢,注意我把这一坨标签全都放到这个里边来啊,全都放这里边来,然后在它上面写上一个什么呢?写上一个属性to等于什么呢?比如说body。当然这块的话,我可以写成小写大写都行啊,保存一下。我们先来看一下啊。
07:00
打开这个界面,注意看啊看我当前这个包里边,我一点开发没发现,刚才那个对话框的div已经跑到了包里边,跑到我这个ID等于APP的外边了,对不对?当我再点击对话框的时候,它就消失了,那这个t point组件标签就是这个作用,提供了一种干净的方法,让组件的HTML在副组件界面外的特定标签里边去显示,简单一化,通过这个标签再加上to的属性去设置,可以把这一对标签里边所有的七大标签。放在我的HTML指定的标签的里边去进行展示啊,当然我的这个对话框做的比较难看,是不是咱们可以让它变得好看一些,那这个变得好看一些怎么办呢?我就在这边给他来一个样式,这就可可以了啊。那我就把它放在这儿,之后呢,再把它的样式呢拿过来,嗯,这样式我就不再写。好,然后放在这边啊。之后呢,把它格画一下,保存一下,这个时候这个对话框可能会变得好看一些啊。
08:05
好一点。一点出来了啊,关闭对话框好搞定了啊,当然我那个按钮跑出去了啊。所以说的话,呃,可以再加上一些这个样式,再把这个稍微设置一下啊,那我这个这个按钮就放在这个里边吧。这样会好一些。格式化保存一下。现在我们再来看一下。我刷新。嗯,点击这个按钮,出现一个对话框,再点一下啊,没有了啊好,这个是t point组件标签啊好先到这。
我来说两句