00:01
接下来呢,我们来通过一些练习来去学习咱们的内置组件的用法,首先第一个内置组件中的表达呢,开发中啊,还是会经常使用的,所以说我们先对表单的内容进行练习。好,如下面图所示啊,我们接下来要搭建一个这样的页面,首先可以输入用户,用户姓名,这里是一个input,可以输入它的性别,哎,左边是,右边是两个radio,可以输入出生年月,出生年月呢,这里我们会用PE组件啊,就是用来选择它的出生年月。可以输入I号二号右边呢是通过check boxs来去输入它的一个复选框。可输入介绍,介绍的话呢,需要用这个test area这个多行文本的一个内容。以及最后呢,我们整两个按钮点击,然后提交。好了,那么下面我们要做的就是搭建这个页面,同时点击提交的时候,我们希望能获取到整个表单的数据。
01:02
那么接下来我们来看怎么做啊?打开代码编程工具,我们新建一个页面,叫DEMO8。在这里我们来写我们的这个练习。来了,我们呢,搭建这个集团页面,Save。OK。整体呢,我们是一个phone表单啊,所以说最外面呢,我们得写一个phone组件。对吧,代表我整体是个表单,好里面的每一个表单项呢,我们从上到下一点点完成,来我们一起来看啊,这里呢有一个图片,我们可以把它截个图。然后呢,再贴一下图,这个时候咱们就可以啊,可以这样去浏览我们想的内容,然后呢,再把这个贴图呢,稍微放小一点,不要太大了。好了,最上面呢,我们是一个用户名,我们可以去写一下用户名呢,它整体包一个容器啊,我们包一个密容器就好了。对吧,表它是个整体,它左边是一段文字啊,这个文字呢,我们要通过test组件去写。
02:07
叫做姓名对吧,它的姓名是什么,然后右边呢,紧跟着就是我们的这个输入框input。Type为test,同时它有一个place holder,请输入用户名,对吧?请出姓名啊,姓名更好一点。好了,那么咱们第一块就写好了,接下来下面来写这个radio。Radio的话呢,它需要包裹在一个radio group组件中。啊,代表它是一组radio对吧,那么一组radio的话呢,它radio也是做,如果你直接写一个radio的话,它只有一个圆圈。它只会有一个圆圈,没有其他内容,所以直接选radio是不太行的,它只会有一个圆圈,那么我们希望它右边提示内容的话呢,我们还需要写一个文本,对吧,比如说叫囊,但是这样的话呢,他就不会认为是一组了,想要认为一组的话,我们得包裹在一个label组件。
03:05
这样呢,他就知道,哎,这是一组内容。是一组单选。然后呢,里面是radio是他单选按钮,然后test是它的一个内容。好啊,我们下面呢,也可以整一个label,那么下面是你。接下来我们可以看效果,因为上面这个太简单了,所以说我们就没有去试它的一个效果,那么radio的话呢,我们可以看一下效果,看看它长什么样子。那么此时呢,我们要调到这个complete,把我们预览的效果呢调为八啊。因为有些组件呢,我们只能在咱们的这个APP端看到效果,所以说我们在APP端测试了。来,我们右键分两边。编译完成之后,那我们打开咱们的这个工具啊,OK,这工具呢,我放下面一点,咱们这个图呢,放下面一点好了,那么其实这两个按钮是不是就出来了,那么按钮前面呢,要加一个性别,所以说我们继续要加到这个文字啊叫性别。
04:07
OK,我们再次增电一下。喂,那么这里呢,我们就能看到这个效果了,它的确在这里显示了姓名性别,我们希望默认就选中这个女,诶怎么做呢?我们只需要给这个radio加一个属性,加CH,它都有提示的啊,那么CH值直接设置一个属性,相当于是它的属性的指示处,所以属性指示处它就会被选中。是不是这个女就被选中了,当然了,它没有一行排列啊,后面我们再一起来写这个布局,不着急啊,布局呢,待会一次性就能搞定,往下走,接下来是一个出生年月啊,出生年月这里呢,我们得用这个P子建。用这个组件才能才能完成这功能,我们还是直接写这个单词啊组件。
05:00
好,直接写这个主题的话呢,这里啥效果都没有。啥效果有没有?那么我们要显示出生年月这几个字,那么就在这里面还得再写一个test键。出生年月。对吧,那么这样的话呢,我们bc be它才会有这个出生年月,一旦用了pick组件啊,点击pick呢,它就会弹出下面这个弹框,但是弹簧呢是没有数据的,大家看啊,下面这个弹框是不是,但是弹簧呢,没有数据是因为我们没有给pick组件塞数据,那么怎么给皮卡组件塞数据呢?这个时候我们需要给皮指定一个ID属性。那么这里叫birth出生年月,我们叫birth。这个皮。给他取个ID好了,有了这个ID之后呢,我们在API ready这里就会干活了,我们先先定义他的这个出生年月的数据啊,对的意思。是这样的啊,出生年月嘛,它有年月月,所以说是两列数据,有两列数据的话,我们数组中就要塞两个数组,第一个数组代表第一列数据,第二数组代表第二列数据,如果将来有三列数据的话,就算三个数组,以此类推啊。
06:14
有几个数组?啊,将来就会渲染几天数据。就这个好,那么在这里我们要筛它的一个出生年月了啊,比如说我们1980。然后呢,复制N份啊。1981198219831984198586。878889,那就是九零了。九一。九二。好,这里我就简单塞一下,大家可以继续往里面填充啊,然后月份的话呢,那就更简单了一二。
07:00
三。四。五。六暂就结单了,他一共12个月嘛。好了,所以这样呢,我们就把这个数据定义好了啊定义好了,那定义好的数据怎么交给这个皮渲渲染呢,这时候就要进行动操作了。广东首先获取。这个皮动元素。来,我们就叫就叫皮吧。我们反正就一个PI啊,通过document get element by ID,这样的话呢,我们就可以获取到这个动力元素了。获取到多米元素之后呢,我们需要做第二步,就是给皮克元素设置数据。好了,PI组件呢,有个方法叫CS。
08:02
那么塔这里面呢,我们需要,呃,我们来看一下是不是叫S,可能我记错了,应该叫no data塔看是不是。来皮卡组件呢,它是有方法的。往下走啊,是角塔,没错啊塔,那么这里面呢,通过data塔来指定它的数据,数据呢,我们这里定义的就是个data塔的意思啊,这是点塔,点data塔的意思,好了,那么数据就指定上了。下面我们可以看效果商量背一下。我们点击出生年月这里。诶,下面是不是就出现一个这样的滑块选择器呢,对吧,左右两边都可以选是不是。就这个啊。好。那么选择器有了,我希望选中的值在这里展示,哎,这又该怎么办呢,是不是?好,我们接下来走啊,怎么去得到它选中的值,待会我们来一起操作吧,现在我们先不操作了,因为后续我们姓名啊性别这些都要操作,后面我们一起来操作吧,现在不管啊。
09:02
好,接下来呢,有个爱好,爱好的话呢,它是check boss。Bo group。然后里面的也是一组一组的,所以说其实和上面的这个radio开发是类似的。他呢,是叫爱好。然后呢,只是这里是叫check box。全boss,然后呢是唱跳。Cha rob篮球。好了是吧,他就把他的爱好整理好了。那么最后呢,我们是一个音法介绍啊,这里就是一个谬容器了,它呢没有容器啊。只有单选多选才需要柔气。我们复制一个这样的text。给他整上,叫做介绍。
10:00
然后呢,下面是test。这里呢,可以指定它的行和列,我们不指定它会有默认值的啊。这里我们只要指定place holder,请输入个人介绍。然后最后的是两个按钮,我们也整一个容器,整它两个按钮。提交取消。好,到这里呢,我们就可以看到我们整体的一个页面效果了。对吧,介绍提交取消,所有都有了,我们把整体布局做一下,首先他们之间有些边距,我们给座位外面的form表达呢,绑定一个属性叫form。整体呢,有些病句我们来指定一下。我们就简单调节样式啊,我们不想把样式调的多么多么优秀,但是最基本的样式我们希望要有调个配10PS。这样的话呢,它就不会顶在它上面啊,稍微有些间隙,然后呢,每一行呢要水平排列,其中每一行呢都要有间隙,所以我们给每一个这个外面这个容器呢,都加个class name叫form。
11:11
他们要水平排列,且上下也有边距。我们都给他加。好了,接下来呢,我们指定这个就好了。水平排列呢,Fla direction为肉,它就会水平排列了,再来个margin bottom10PS,这样呢,它上下它下面就有些间距。诶,你看咱们这样的话呢,就把咱们的这个页面基本上开发好了,当然了,怕大家看不清,我们可以稍微的再大一点点啊。你看上面这里就展示完成啊,和我们现在图片展示内容呢,基本是一致的。好,接下来呢,我们要做的就是点击按提交按钮,要收集到所有表单数据,那么收集数据怎么收集呢?
12:01
首先第一个点击提交按钮,要提交表单,我们需要给按钮绑定一个type类型加some me。绑定他的行为上才会提交表单。那么提交表单会发生什么呢?提交表单就会触发表单的一个事件。所以接下来我们要给他绑定这个世界,他才会触发啊,你不绑定是不会触发的。打第3MISS事件,好,那么我们要定义世界的回调函数,世界回调函数定义,那么我们通过一点。斯世界。通过一点。点可以得到。
13:01
表单线的值。可以得到收集到的表达项的值。我们可以看一下效果啊,通过API我们提示一下。好,但是此时这里是得不到的原因,我们还没解决啊,我们来看一下。此时呢,我们点击提交,它其实啥也没有,不是说我们没输东西啊,即使你输到东西,我们随便挑几个东西输一下。对吧,我得提交他还是没有内容。原因就在于我们要想提交有数据的话,咱们的数据是对象是KY组成,你没有告诉我它的K是什么。所以每一个表单项我们要指定一个name属性,这个name属性就是我们收集表单数据的key,同时你指定的name属性,它才会收集这个数据。对吧,表单项元素。必须指定name属性。
14:00
那么才会收集。那我们就来指定啊,第一个呢,我们就叫内。然后呢,这里就要给radio group指定就好了,性别就叫thanks,那么出生年月呢,我们就叫birth。爱好的话呢,我们叫hobby。然后呢,这个介绍的话,我们叫info。好指定好了之后呢,它下面两个按钮就没必要指定了,我们再次来一次,这时候我们输一下一一我们选南出出年月呢,我们写一个这个年月选啦,然后呢,我们写唱rap。二点提交。这时候我们发现呢,它name涉及到了。Hoby收集到的都是o says也收集到O,诶,它收集到的O是为什么呢?这里要说一下,单血和多选,你必须要指定它收集到的数据是什么,你不指定他收集到就是O,而这个O到底代表什么含义,这是看不出来的。
15:07
而且还要注意出生年月,我们并没有收集到啊,出生年月没有收到,还有这个啊,Test area这里指定错了,是给表单项指定,不是给这个form item指定,而是给它指定这个info。好,所以这里呢,我们要做几个操作啊,首先单选到底怎么指定呢,是要在这里指定value的。你指定Y的值是什么,它最终收集到,它最终选中的时候就会收集到这个对应的值,你不指定它收集到就是个on,这个on呢,没任何意义啊。那么下面这个里也是,这里也是要指定它的这个值啊。来,我先每个都复制一下,待会来改这个纸,好,这样的话呢,我们再次量变一下,才能够正确的选中指啊,我们再看一我选南。
16:00
出生年月呢,现在还是不行啊,所以说我暂时先不调整点击提交。大家看C没问题,Ho比爱好也没问题,Name也没问题,Ino也OK,所以现在呢,就是出生年月,这里我们没有收集到了。啊,因为这个出生年月的这个批组件呢,它不是一个传统的表单项组件,不是说你指定一个name就能收集到的,它不是个表达项组件,它要收集数据得通过一个UN change事件。来收集。好,所以我们可以通过这个change世界来收集数据啊,通过这个change世界来收集它呢,也是通过一点他给1.detail来得到这个数据的,我们可以看一下1.detail,下面我们来看效果。我们选中一个值啊,1982,比如三确定。你看这时候它就会提示的一个值了啊,但是提示的值呢不正确,只提示一个21982没有,那么原因是什么呢。
17:03
原因是默认的情况下皮它是单列选择器,然后现在我们是两列是多列,是多列的话呢,我们还需要给它指定一个Mo的模式啊。等于这个猫啊,我们来看一下这个文档,呃,看这个文档。等于这个多列选择器的话,是这个multi c啊,它默认是单列选择器。所以说就不行啊,收集的数据就不对,我们要指定成多列选择器。我们再次增量更新一下。好,我们就看这个出生年月啊,19823确定,诶这时候就涉及到两个数据了,二了,那么这个二是什么呢?二是对应数据的下标,也就是说对应的是我们第一个数据的下边二,下边二是第三个数据啊,就是这个1982,那么对应的右边这个也是第三个数据,是这个三,所以收集的数据是没问题的。而且我们希望收集的数据在在咱们的这个出生年月后面展示,对吧。
18:03
这个时候我们就可以做操作了,收集的数据怎么办呢?我们定义在这里。初始化呢,我们数据是零和,零代表我们显示咱们多列数据中的第一个数据。好,然后呢,一旦你更新到了之后呢,我们就。这次的带。点boss。等于一点点Y。把这个数据更新上。更新了之后呢,但是要注意,因为它下它显示的还是那个下标,为了更好展示数据。大家想我们会用什么?如果直接展示boss,它会展示一个下标的。而且对下数组是没办法展示的。我们想展示它正确的一九,就像这样一样,一九多少干多少。这时候用什么。诶得用计算属性呢,因为这个数据不能直接展示,所以我们可以用计算属性来展示。
19:00
我们跟我们格式化一下这个数据。好,怎么处理呢,我们先把。啊,先把这个两个数据拿到啊,一个是我们要拿到的数据,一个是他选中的。两个数据return什么呢?来return呢,就是我们要去这个数组中。找到它是第几项,第几个数据。是第几个呢?第几个就要看我们bird的第一项数据了。的第一项就是他的第一个,然后干。再来一遍,那么这时候就看Bo的第二项数据了,就这样的。这样呢,就是格式化的birth,那么格式化的birth,那我们就可以在上面出生年月这里展示。同时我们在这里提交的时候,我们不单要提交这个一点。我们还要提示这个。
20:01
当是这个form的birth,啊,等于等于这词点format这个,这样的出生年月也有了。就这样的。好,第一点三点预算符呢,就是把这个数据展开,展开到这个新对象中,然后我再给新对象添加一个新的属性,叫birth值呢,是这个格式化的。好,最后呢,我们来看效果啊,这样呢,我们就所有数据都收集到位了。一雪楠,呃,下面这个出生年月,这里好像格式化有点问题啊,我们来看一下这里哪里写错了吗啊等。啊,这里写错了,首先是它的第一项。第一项里面的第几个呢?啊是这个。然后这里也是它的数字里面的第二项,第二项的哪一个数据呢,是这个BOSS1这个数据这个格式化,这里我们写错了啊。好,这时候就显示对了,我们再来写。一男选中的我们1989。
21:01
啊,11份对吧,篮球。二提交。这周来看啊,赛男hob比没问题呢,也是选到了name和衣全都选中啊。那么到此呢,我们就给大家完成了一个整个表单项的一个操作啊,那么就是这些。整个表单呢,所有都要包在一个缝表当中,然后在这里面放一个一个的表单项组件,那么最终就可以完成我们写的需求,这里面最难的一个组件就是个皮卡啊,他需要指定ID,需要指定模式,对吧,他需要change世界来收集数据。ID的目的就是为了我们。呃,这个可以最终可以设置它的一个数据。那么将来呢,有很多组件啊,在这个我们的框架中啊,很多组件都是这样的,要设置数据都是先获取到这个元素,然后调一个方法传数据,它数据才会渲染。所以这个东西用法一定要注意一下。
22:03
好了,那么我们整个表单练习就到这,那么相信大家以及对缝表单的一些用法已经比较熟悉了。
我来说两句