00:00
好嘞,各位,那在这一小节呢,咱们来学一个比较轻松一点的知识啊,就是如何利用view所提供的这个VGA model去收集一个表单中的数据,那有些同学说老师啊,那这小节啊,我就跳过了,在零三里边你给我讲过了,对吧?你讲那个双向数据绑定的时候,你写了一个input框,然后你用了这个VGA model,就把我的东西呢收集走了,就存在这个VM里边了,对吧?老师借助开发者工具呢,我也看到了,那是这样啊,各位你不能跳过这一小节,因为我们之前讲这个VGA model的时候啊,只是把VGA model应用在了一个正常的input框上。那大家都知道网页里边输入类型的元素,还有很多单选的呀,多选的呀,下拉框啊是吧,有很多很多,所以说v model这个指令在配合不同的input框的时候会有不同的技巧,哎,所以说我们会在这一小节呢去给大家讲,好我们做这么一个例子啊各位回到课件当中,这个01:11收集表单数据,诶这是我设计的一个表单,里边都包括什么呢?前两个是正常的input的输入,然后这个呢是一个单选,诶那这个呢是一个多选,然后这个呢是整个的这么一个,呃下拉框,然后这儿呢是一个多行输入啊,这会儿还有一个勾选提交对吧,就有点像你注册的时候去勾选一些东西,好我们把这个呢写一写,先写写前四个啊各位账号密码,性别,爱好好,回到代码中简单写写,那既然是表单啊,各位我肯定得写一个form,但是action属性呢,我是不需要的,因为大家都知道action属性呢是用于指定表单提交的地址,但是以目前咱们前后台的这个。
01:39
数据交互吧,基本上啊,同学咱们不用表单里的这个action属性了,咱们一般是这么做啊,同学就是这个表单呢,不会真正的往一个地址去跳转,它只是作为一个元素的呈现啊,一个结构,然后通过这个技术adjust是不是把数据发给后端呀,用它的优势就在于啊,它可以页面无刷新获取数据,当然也可以不刷新的情况下把数据给送走,对吧,所以说我们不需要这action好写里边的东西,各位第一个叫啥来着,叫账号对吧,还是叫账户啊,看一眼啊账号好,然后后边跟上一个什么呢?Input框,OK,我就写完了,我这么写啊,是一个最简单的写法,大家看一眼啊,你打开。
02:21
你看账号后边跟个input框,你这么写吧,就有一点点不完善,各位你看我点这个input框的时候,是不是获取焦点,正常来讲吧,一个交互的逻辑就是我得点击这个账号,诶它也能获取焦点,但是我现在就不行,你看我点点是不可以的,那怎么能让它可以呢?那你就得写的麻烦一点,你接触这么一个标签啊,叫做label,然后你把这个账号连同这个冒号啊,都写在这个里边,他不给了你一个号嘛,那你就直接说明白你这个账号是为谁服务的,比如说呢,我为DEMO服务的,那DEMO在哪呢?来在这写个ID,然后等于DEMO,你看这边靠for,这边靠ID,就把他俩做了一个关联,你这样写啊,效果就能好一丢丢,同学点击账号的时候走你,你看是不是也获取焦点呀,哎,所以说同学这个东西啊,要想往那个完善了写呢,你还可以写一些样式什么的,但是在这儿呢,我说一下各位,我只是想给你讲一下这个VGA model的使用技巧,而不是写一个交互性特别完整的一个表单啊,或者说样式特别完美的一个表单,OK。
03:22
哎,所以说在这呢,同学我就不这么麻烦的写了,行吧?哎,我把这label呢就删掉了,诶放在前边这么写方便对吧?各位这ID呢,我也不需要尽可能的少写一点嘛,好再走,那这会儿呢,还得来一个叫做账户啊这个密码对吧?好密码就不能写text了啊,就得给它隐藏起来,就是password,好那我们看一下效果啊,他俩呢横向排列了,但是例子中呢,它俩是纵向的,对吧,我也就不写什么样式了,各位行吧,我就简单而又粗暴的用这个换行呢,去给大家写一下,大家自己下去呢,如果想复习C3那块的知识呢,自己可以写一个漂亮一点的表单,OK,哎,就在这我就用换行了,来看一下啊账号密码对吧?这比如说输入一个admin啊,这块输入一个123 OK,都是可以的,好了再往下,下边是什么来着,叫性别,还有爱好,来回来走。
04:09
性别,然后呢,后边是不是是几个勾选的框,而且注意是单选的对吧,一个男一个女,那就写一下吧,我来个回车吧,看起来好一点,男后边跟一个input光,那这个类型呢,就得用这个了,RA radio单选的嘛,那再来一个这是女,OK,写完了吧,回来看一眼啊,走又横向了,那我还得把这个夹着,那以后我写的时候呀,每一个人的后边我就都加这么两个换行了啊,回来看一下效果,性别男女,还说老师这就写完了,别着急啊,你点一点看你那玩意儿对不对,我选了男啊,我选了女,呃,哎呀,有问题,各位啥问题啊。你这还能男女同时选呀,对吧?二选一吗?所以说这怎么办呀,老师,我得写点GS去控制它,其实不用啊,各位是不是可以控制input标签里的这个内幕属性,告诉一下他俩是一组的呀,给他们都起个名字,比如说叫做性别,你这样写不就好了吗?对吧?来看一下,选了男,在选女的时候,男就取消了,对吧?这么一个东西,标准的做法就是应该靠他去控制,不是说你写JS去控制它对不对?好了,那性别写完了再往下看,这是什么呢?爱好爱好啊,是一个多选的,对吧?好了,回到代码里边走。
05:21
那当然我得把这个拿着啊,这个换行,嗯,走好了,这写一个叫做爱好,那爱好呢,同学有几个呢?看一下啊,是抽烟喝酒烫头,咱换换吧,行吧,各位别总写这三个是吧,咱这么写几个,比如说学习打游戏啊,再来一个什么,再来一个吃饭啊好了,来写一下啊呃,学习,诶学习,然后呢,打游戏啊,那再来一个哎吃饭,饭得吃饱是吧,好,那他们后边呢,是一个能够打勾的那种,其实也是谁呢,Input,只不过呀,你要把东西给它换一换,对吧?Name先别写这sex了,类型就不对,得用什么呢?Check box是吧?Box OK,那后边那几个是不是都是啊,走走,OK,回到这儿呢,看一下效果啊各位学习哎,打游戏哎,这个呢,吃饭。
06:09
OK,那再往下看看还有什么呢?一个是下拉框,一个是多行输入,OK,那来开始写在这儿,再写一个叫做所属校区,哎,那当然这个换行还得带着给它放在这儿,然后下边呢,开始写是一个select框,我也不需要这个name和ID,对吧,把它给它删掉,写个正常的select就可以,里边写什么呢?Option对吧?Optionon,那option里边一定有value对吧?你比如说第一个选项一般都叫这个叫做请选择校区,然后下边再写真正的,比如说我们的北京校区,那这歪柳职呢,就写拼音吧,北京好吧,哎,我就不写那么复杂了,然后还有什么呢?咱们几个校区呢,还有上海,这也给他写一下啊,上海还有什么呢?是深圳校区,好把这块呢也写一下深圳再来一个就是武汉校区了,这块也写一下啊。
07:04
好,准备完了,回头看一眼啊,在这儿选择校区,诶这么几个OK,还差几个呢,是一个多行输入,还有一个勾选这个啊,来开始啊,快点的赶紧把它写完啊,叫做其他信息,那么多行输入呢,咱们就得用这个了,叫做text arar对吧?多行的,这里边这些我都不要了,什么宽呢,高啊,Name呀,不用,就写一个普通的text area就可以了啊,然后把这个换行呢,给它拿过来,在这儿呢,再来一下,剩下最后一个了,各位来瞧一眼,叫阅读并接受用户协议,而且你注意这个是能点的对吧?来写写啊,叫做阅读并接受用户协议,用户协议得加书名号,而且用户协议还得能点,所以说我在这就写一个A标签,里边是这个用户协议,这得跳一个地址HTTP,就写咱学校官网了,嗯,点艾特硅谷点com OK完事,嗯,回头看一下效果啊各位换行忘记了来换。
08:05
旁给它补上这个BR,给它放在这儿空格好回来,哎,大概就这么一个意思,前边还忘了那个勾选的对不对,那赶紧写一下,在前边给它写一个input,它的类型呢,还是咱们写过的这个check box OK,回来行,同学一个基本的结构呢,就搭建好了,诶好像还差一个按钮对吧?那就再给他写一下啊,在这写一个b to按钮的名字呢,叫做提交或者叫注册什么的都行好了,回来壳子呢,已经搭建好了,接下来同学所有的这些信息是不是都得接受V的管理啊,那我就得创建一个的实例对象了,在这儿走写个V1啊,那这里面同学咱们一点一点收集啊,每一个人的效果都是不太一样的,比如说这个账号和密码啊,它俩就类似对吧?那同学想一个词,保存账号啊,你叫username可以,但是那叫用户名,我说的是账号。啊,那可以用这个词a account有账户账号的意思对吧?那刚开始没输入呢,所以说是空,那再来一个叫做password存储密码一上来也没有对吧,是空,那这两个人各位是不是得通过V-model指令绑定在账号和密码的身上啊,这个东西都是之前咱讲过的,你应该会啊,来,我写一个v model,然后呢,上边是account,那下边这呢是password,直接复制过来得了,OK,看看好不好用啊,回到页面瞧一下,打开VIVO开发者工具,来点击一下走,输入一个账号admin可以吧,密码呢,123可以吧,好,再往下收集,同学重点来了啊,注意听我接下来呢,要收集性别了,那各位收集性别了,那性别呢,肯定得用这个东西去存,对吧?Sex空空是啥意思,还没选呢,对吧?那说老师简单呀,就把这个东西啊,这不有一个男有一个女吗?老师啊,你就用那个VGA model,你就正常收集就得了是吧?哎。
09:55
写一个性别老师你就搞定了,是这意思吗?那来吧,我们试试啊,各位打开这账号密码我就不再输入了啊,咱都验证完了,各位你看啊,接下来有一个神奇的状况,当我点击女的时候啊,注意看321走。
10:11
说老师你这不勾选了吗?哥们儿,勾选了是勾选了,我是不是得拿到那个女啊,你拿到了吗?没有老师能点一下,男的也能勾,就是不选,然后你再点女,哎同学再点也没有意义了,这是不是不收集,请问为什么?回到代码中,同学,咱之前说过啊,这个VGA model啊,它默认就是收集什么呢?输入框的什么值,Value值。但是我想问各位,你这个男input框和你这个女input框,你有Y6值吗?你没有。那有同学说,老师你输入点东西,它不就有Y流值了吗?各位你告诉我这大圆点咋输入,这大圆点咋输入,你这两个蓝的,我问各位是不是可以输入啊,也就是说白了各位啊,你这俩绿色框里的东西,你所输入的值就是Y6值,你觉得呢,你这俩玩意儿能输入的呀,你说白了,你打的是什么字,那value就是什么东西,对不?但是你再看看粉色框这俩,各位无论是男还是女,你只能选择勾还是不勾,或者是选还是不选,你说对吧,你是没有Y6值的,人家默认就收集Y6值啊,对不?
11:18
那怎么办呀,各位技巧来了,你最好给他写上value,等于你比如说男就是ma啊,女呢就是female,好了,那你看一下,回到这儿,各位看一上来我没勾选嘛,所以说哪个都不选,没有东西我勾选女,对吧,应该叫做选择女是吧,这叫勾选,这叫选择来走你看female,你选男,诶是不是ma,这不就可以了吗?对吧,各位哎,舒老师,那我想让他一上来就选一个默认就有一个性别,比如说默认的性别就是女,那怎么办呢?回到代码中,你就把默认值给它写一个female不就可以了吗?那一上来不就勾上了吗?对吧?同学别忘了呀,Vega model是啥双向绑定的?那这个时候就有小伙伴说了,老师啊,我把你的视频暂停,拿小本本我记上,像input为radio这种呢,我得亲自去配置这个value,六纸同学你先不用自己去记,我会给你整理好的,行吧,现在就跟着我的节奏,咱往下听就行好了,各位啊,Radio得亲自配置value好了过接下来整这啥呢?爱好,哎,这也挺有意思的爱好,那来吧,想一个词儿给他存呗啊,好呗,对吧,一上来没有输入,那就是空呗啊,那接下来呢,简单拿着这个名字找到这个这个这个用啥呀?VE哥,Model收集在谁身上啊,好呗,老师搞定了。哎,那这回你看看它还是有问题的啊来回到这儿注意观察啊,挺有意思的同学一上来没有爱好没勾选是吧?哎,所以说里边是空是吧,嗯,那你看着啊,我勾选一下。
12:50
吃饭你注意观察啊,走。呀。朱老师,那你这个的设计就是只要爱好里边有吃饭,学习和游戏,就得必须也得勾呗,你这逻辑不对呀,而且不仅仅说你勾选吃饭这个问题,同学你刷新一下,你看着我,哪怕勾选的是打游戏。
13:08
诶,你看那些就全都勾上了,而且你注意你看它收集到的值是什么,是一个不尔值为真,这啥意思呀?哎,各位回来这就还得说一个技巧,像这种check box可以勾选和取消勾选的输入框呢,是这么想的,比如说这个东西用户也是不能敲键盘往里边输入文字的,那像这种东西同学你也得跟上边粉色框这俩一致,是不是也得给他亲自配置Y6值啊说老师那我要不配置value值呢?你如果不配置value值,那么这种check box类型的输入,它默认读取的,你注意了各位,就是某一个标签里的这个值check it check it是什么意思?就是这个input框是否被勾选。你比如说啊各位,我给这学习啊,临时给他来一个I did呢,比如说叫做DEMO,那你看着啊,各位来我刷新一下,我用最原始的do操作呢,带着你看一下同学现在这个学习是不是没有勾选,那好我拿到这个节点啊,document.get element by ID,然后拿到谁呢?这个DEMO,好,我读取这个上的这个你发现是false,因为我没勾,那如果我勾上之后,对吧,各位你再就变成了什么呢?舒老师的那两个是怎么勾上的呢?那你想想呗,各位来你别忘了呀,它是双向的绑定你刚才。
14:33
来,你勾选了谁?你是不是勾选了学习?那同学你勾选了学习,最主要的是你没有指定Y6值,啥叫没有指定Y6值?同学我就问你红色框里边的东西,你有没有写Y6等于什么什么你写了吗?Y6等于什么什么你写了吗?没有,你如果不写啊各位,人家收集的就是啥check k的,来看着啊,那只要你一勾学习,各位你说ho呗,是不是就变成了真,那你看一勾选,哎,这就变成了真,但是你别忘了页面还有两个地方是不是用到这个hoby了呀,那你说打游戏和吃饭那块一看hoby变成真了,他俩是不是就勾上了,是这意思不?哎,所以说同学你说我们的目标是什么呢?是不是得收集到他们三个,你到底选了谁呀?所以说同学你得把它们配置啥value值,你不配置value值,人家默认收集的就是这个check box到底勾了还是没勾,所以说value给人家写好叫study好,那把它复制一份。
15:30
这个走一下,这个走一下,那打游戏呢就简称了,就game对吧,吃饭呢就eat OK写完了吧,说老师这回我可成了吧,对吧,你看它不能输入啊,我都配置好这个Y6值了,VGA model呢,收集的Y6值,这不就可以了吗?诶那你瞧一下效果啊各位好了,回来。打开这个走来吧,啊勾选一下学习走完蛋。同学,我这回可是给学习配置VALUE6了,VALUE6可是study,但是你发现同学的收集的是不是还是那个check k呀,就是勾了还是没勾啊,哎呀老师这怎么回事呢?哎,这里边就比较奇葩了,同学我说一下啊,Hobby的初始值可以影响着V-model收集回来的数据。
16:13
舒老师没懂,来看着各位,我接下来把这个好北变成一个数组,这个时候你再瞧,打开数组里边是没有东西的,对吧?好勾选学习看。数组里出现一个study勾选吃饭,Eat勾选打游戏,进来取消游戏,取消吃饭,看里边就剩game,所以说同学你再体会体会,我刚才说那句话,How北的初始值能够影响着VGA model收集回来的数据,对不?如果你错误的把这个写成了字符串,各位那谁也救不了你,纵使你这块配置了Y流值咋的也不奏效,人家也不读,人家死活收集的就是你勾不勾对吧?哎,好嘞,那所以说各位又发现一个技巧,什么技巧啊,如果是多组的勾选框,你要写check box,同时要指定value,同时要把这个东西model所对应的那个值呢,写成一个数组,你说对不好了,那再往下边的东西啊,各位那就简单了啊,那跟正常的音部的光啊就都差不多了,你比如说所属校区,我再给他来一个V杠,Model绑定的是city,就是城市呗,好了,往下走,给它再来。
17:27
一个city好没选呢,就是空对吧?那看一下效果啊各位打开city呢,是没有职的来选一个校区,比如说是北京,那就北京,选择这个上海那就上海,哎,选择这个武汉呢,就是武汉,OK了吧,老师我想让他一上来就选择咱们的这个北京校区,那怎么办呢?简单呢,在这写一下呗,北京是不是就可以了?好回来以上来就是北京对吧?OK,点击这儿呢,也能收集对吧?好了,那我们再往下说啊,下边还有一个就是这个其他信息,同学,其他信息多行输入呢,它也是输入,哎,所以说在这呢,正常收集就得了,其他信息呢,就是o th other对吧,其他的好了,往下在这拉一个逗号,再补一个other,好回来看一下效果啊,打开这个,然后开始输入点多行的东西放大一点啊,比如说输一个123Q we ASD,看这是不是都有other,其他信息收集完了好了再往下,同学接下来呢,就是这个了,到底同不同意这个用户协议,你说对吧,各位那这个东西同学你看啊,它是不是这个。
18:27
Box是,那他有两种状态,勾还是不勾对吗?各位你说这回这个check box跟刚才你所见到的这个游戏啊,什么学习啊,吃饭呢,是不是不一样了?这是属于啥呢?我需要它里边的这个value值对吧,就是什么study呀,Game呀,It呀,但是这个你觉不觉得它很特殊,我不用去收集什么value值了,你就告诉我true or false是不是就可以了,所以说你像这个各位,你就正常写你的model,然后收集到哪个里边呢?比如说叫这个词吧,Agree是否同意对吧,你把这个agree呢,就正常写一个字符串就可以。
19:03
啊,来,你看看效果啊,各位打开agree呢,默认是没有东西的,来,我同意这个协议走是不是就true,我不同意我取消是不是就false,对吧?你没有必要把这个东西再整成一个数组啊,对吧?你再给他弄一个什么这个value值啊,这都不需要对不?各位你看看不同的场景,我们的写法是不一样的,是check box不假,是我没有指定Y6值,我也不需要指定Y6值,因为我要的就是你到底勾还是不勾是不?各位好了,那你看来咱完整的写一遍啊,你比如说账号是a mean,密码是123,性别是男,前两个爱号,然后是上海校区123统一,你看数据是不是都收集好了,那接下来就很简单了,各位啊,我点击这个提交按钮的时候,把这些信息打印在控制台上就可以了,要是真实开发呢,我们得利用这个adjust把数据发走对吧?好了各位,那你说这个按钮啊,我现在不绑定点击事件,我就直接点这按钮是什么后果呢?你自己瞧一下啊各位我要点按钮了啊,我要点这按钮了,321走。
20:01
各位,我的东西咋都没了呢?我告诉你啊,是页面呢跳转了,页面呢刷新了,你注意观察这个地方啊,当我点击这个提交的时候,走走走是吧各位,也就是说你点击这个按钮呢,会引起表单的提交,表单提交完了一个默认的动作就是诶跳转页面,我们不想让它跳转,那怎么办呀,你可以这样做,给按钮呢绑定一个点击事件,然后阻止默认行为,对吧?你还有一个做法,咱换一个玩法,就是给form绑定事件,当你点击这按钮的时候,你绝对绝对触发了表单的提交,表单只要一提交各位,你就可以给他绑定这么一个时间submit是不是提交啊,表单只要一提交我就调一个方法叫做DEMO啊,那然后你得配置这个方法,对吧?跟这个data是平级的,来一个MYS里边写一个,哎,不是agree是DEMO对吧,里边干嘛呢,我alert弹个窗可以吧,弹个一来你瞧一下效果啊各位我啥都不输入,我一点是。
21:02
弹窗了,但是弹窗了证明什么呢?弹窗了其实就证明这表单提交了,但你要知道他紧接下来的一个默认行为呢,就是要跳跳走对吧,你看一下走是不是刷了一下,那我不想让他刷了一下,表单提交之后跳转页面是一个默认行为,想阻止默认行为,我们之前说过prevent是不是就可以了,Prevent好了,这回看一下啊,走弹窗了吧,点击确定,你看页面不变,OK好了,那接下来呢,就简单了,同学,我要的不是ALERT1对吧,那我要的是什么呀?输出表单里的数据,那我想把什么账号啊,密码啊依次做一个输出,那怎么办?那这会就得这么写了,This点那再输出this点谁呢?Password,那再输出谁呢?This点性别,同学,你这么输出不麻烦吗?我想一次输出,把这些东西都给他弄出来。啊,那怎么办?同学,那就得考虑一下,我们用这个adjust呀,进行前后台数据交互的时候,各位是不是一般呢,都把你所收集到的数据啊,整理成一个Jason格式对吧,然后传给后端是吧?那所以说在这呢,一个一个输出不太合理,哎,那怎么办呀。
22:08
说老师那就一下子都输出出来呗,那问题是你怎么一下子全都输出出来呀?哎说老师是呢,有些同学反应比较快,老师这么的不就得了吗?下划线date不就都有了吗?哎,那看看效果啊,来随便输入点,比如说ain,然后呢是123,然后呢是男啊前两个爱好武汉校区123同意回到控制台点击提交,各位东西是不是都来了?哎说老师这对象他咋这样了呢?同学,我们是研究过viewu监测数据变化原理的人,这个对象是不是就应该是这样啊?说老师那这个对象这样它耽不耽误使用呢,一点也不耽误使用,回到代码中,也就是说你完全可以这样做,Jason点,然后呢,把这个东西给他转成一个Jason来瞧一下效果啊a Thein,然后这是123,然后男前两个爱好来到这儿,然后123同意了,走,是不是变成Jason了?哎,你这么做吧,可以各位下划线data,但是尽可能吧,在我们成员的代码里啊,不要出现直接去访问它这个下划线data,哎,说说一般都怎么做啊同学,一般吧,我们这么做,你看着就说这一堆东西啊,我都放在一个user info里,User info是什么意思呢?哎,就是用户信息都放在这个里面,那随后呢,同学你在这输出的时候呀,你就是jason.strangeify你把谁打成Jason就可以了,就是this点这个东西user info对吧,这样的话不就好了吗?但是同学你这样写也是有一点点小代价的,什么代价呀,就是页面当中所有用到v model的地方咋办?
23:40
比如说这儿这儿这儿这儿还有这儿还有这儿还有这儿还有这儿还有这儿还有这儿,你都得加一个前缀,User info,你说对不?你得告诉人家是user info里的city对吧?好,那我们试一下啊,来到这儿刷新是ain,然后是123,然后是男,然后是后两个爱好,然后呢是上海校区123同意对吧?来走是不是也能变成这个样子呀?嗯,OK,反正你自己选择啊,同学不是说在这儿来个下划线data一定不行,那其实你就这么写出来了,也不报错,也没违反什么太大的原则,其实也是可以的,对吧?各位OK啊,那说到这儿吧,各位我们再完善几个点,就是这个VGA model啊,其实它也是有修饰符的。
24:26
说老这修饰符是什么意思呢?你学过事件修饰符吧,哎,那我你看一下各位,比如说这个里边有一个输入啊,叫做年龄,那大家都知道年龄啊,是不肯定是数字,你说你的年龄是ABC,那肯定不对,所以说这补一个啊,比如说来一个年龄啊,一上来是没有东西的,对吧?好,那就是空,那你看啊,你要是单纯的就写在这儿对吧,这会儿不可能是这个password了,还是正常的这个文本啊,然user info.age那你看一下啊,你这呢,就会造成一个问题啊。打开VIVO的开发者工具,走,找到他的年龄看一下啊,我要是正常写,我写个19反而还凑合是吧?哎,这是19,但是你说如果我输的是19ABC呢,那你收集走的是不是也是19ABC啊?
25:10
哎,那你是不是得控制一下呀,那怎么控制呢?其实原生就可以控制,各位怎么控制呢?你就把这个给它写成number是不是就可以了,我输入的不是别的,是数值,好,那你看一下各位,我在这儿呢,来写一个15,打开看一下是不是收集走了15,而且在这儿呢,还能摁这个加是吧,按这个减对吧,说老师这不就得了吗。这我也没用什么V-model的这个修饰符啊,各位,现在有这么一个问题,你仔细观察北京。是不带引号的。那你看它这个15是不是也带引号的,带引号是啥意思,各位十字符串。对吧,有的时候可能你那个后端的服务器呢,写的不是那么完善,你传过来的引号15,他不给你做强制类型转换,直接就把引号15往数据库里存,那可能到了数据库那个层面可能就要报错了,说不对呀,我这个数据库这个字段设计这个年龄不可能是字符串啊,对吧?哎,舒老师,那我知道了你的问题呢,出现在这儿了,你把这年龄的初始值啊,你给他写死一个,比如说写好一个这个18,老师,你这不就告诉他是数字吗?哎,那你看一下呗,啊点击打开看一下HA还真是蓝色的数字18,对吧。
26:18
那你看它输入一下说呀,我想要的是19,完了又变成带引号的了,你说对吧,各位,那这是什么情况呀,就是因为啊,人家认为你输入的东西都是属于字,直接就给你存在这儿,对吧?那你可以利用这么一个修饰符,各位看好了,找到年龄那个地方给它来一个点nub number就可以了,同学,这个number是控制什么,我输入的不可能是什么字母啥的,来慢慢来,同学,我把这删掉,你看着我这加了number,你发现我输入ABC都输入不进去,你要是不加这个东西,你就写正常的一个文本,那真是你输入啥都行啊,来个ABC是不是都行?哎,所以说这个是干嘛的,整明白了吧?啊,那再说说这个后边的点number是干嘛的,这个是原生HTML就有,那这个呢,是vu给我们提供的,对不对,好,那加上它呢,效果就更好了,你看着啊,各位来打开现在年龄是不是19啊,那我年龄呢,想调整一下是30。
27:19
来写30,各位看啥啥是不是蓝色的30啊,那什么意思呢?就是把你收集的东西啊,把你写的这个东西收集成了一个什么呢。数字类型说白了人家帮你做转换了,OK,所以说一般来说各位这两个东西呢,都同时去使用啊,这边控制输入的不能是别的,这边呢再给你往那个数值上去转,但这里边呢,有一个这个问题,就是说如果你是不控制,你看它是怎么做的啊各位,你比如说这不是18嘛,那你看一下我如果输的是30,确实帮我转了,但是我接下来再输入ABC的时候,它是能让我输入的,并且这转呢,他也不再给你转了,对不?你比如说我输入输入的如果是3A0同学,它不会把你变成30的,只是那个三,你说对吧?哎,OK,所以说一般来说它俩都同时使用,那还有一个修饰符啊各位,这修饰符叫什么呢?叫lazy懒惰的,我在哪个里面给大家用一下呢?就在这个其他信息。
28:16
同学都知道,其他信息里边是一个多行输入,那就意味着呀,我可能输入很多的东西,你看啊,这里边有一个这个other,你看我输入东西啊,比如说同学你看特点就是我只要动那么一丢丢,这马上是不是就收集我这八如果给它删掉,这马上是不是也收集,就是有一种感觉,他进行了一个非常敏感的时时刻刻的收集,对吧,但是有些时候呢,我不希望咋的呀,你能进行一个时时的收收集对吧,就是我输的很长很长,等我输入完了,哎,完了你再收集,那你可以这样写,各位找到那个其他信息啊,在这儿给它加一个修饰符lazy,就是lazy,那加了lazy有什么特点呢?各位你看着,当我输入东西的时候啊,来123Q we,你看他不开始收集,你看啊里边没东西,哎呀,老师那不坏了吗?没坏,我问你最后他是不是得点这个,不点这个,这表单是不是提交不走对吧,当然这逻辑我没写是吧,你可以写一下对吧,那你说同学我勾选一下,你注意啊走。
29:17
你看啊,说老师明白了,得勾选,诶应该这么说叫做他失去焦点的一瞬间,然后呢,在收集就不是一个实时的收集了,对不?各位,那当然这里边还有最后一个修饰符,我在这儿呢,给大家用一下,我一写你就能猜到TRM啥意思,Trim去掉前后的空格,如果不加这东西,那你看一下,当你输入这个账号的时候,打开来看一眼啊,我说的是空格空格空格空格我的命空格空格空格空格空格,你看这空格是不是都收集走了。啊,那如果你加了这个tri,那你看一下各位,你前边无论写了多少个空格啊,走走走走走,然后a the me空格空格,空格是不是就去掉了,但是中间的空格呢,它是去不掉的,就跟你JS里边那个字符串点是一样的,OK,各位好了,那我们就把收集表单数据呢,就给大家说完了,那我们整体总结一波吧,各位好,那看一下吧,同学,若你的input是正常写的,则VGA model收集的是谁?Value值,用户输入的就是Y6值,那再读第二句,如果你写的是一个radio这种单个的,那么v model收集的就是什么呢?这个Y6值,而且最主要的是你要给标签配置Y值,因为它已经不能再输入东西了,对不对,它只有两个,就是选或者是不选啊,那看这个check box,这就有意思了,如果你没有配置check box的value属性,那么收集的就是check,就是勾还是不勾,是布尔值。如果你配置了input的value属性,并且。
30:49
你的VGA model的初始值给的是数组,各位,这两个条件同时满足,那么收集的就是value所组成的数组,品位,品位刚才那爱好,那这个呢,就是纵使你写了input的value属性,但是你的VGA model给的初始值依然是字符串那个非数组,那么收集的然是谁特OK好了,备注,Wega model的三个修饰符lazy和功能呢,之前已经说完了,好吧,各位啊,那这一小节呢,我们就。
我来说两句