00:00
好嘞,各位在理解好了VX这个概念之后呢,我们接下来去做一个案例,哎,往下滑,在这呢,哎,同学说明白,老师你不就是想拿VIVO X去写这个案例吗?不是的,各位,在这小节我先用最纯粹的VI去给你写这个案例,随后呢,我再把这个东西改成viewvo X版本的,然后最后呢再形成一个对比,这样的话比较好,而且同学你看啊,我们截止到目前连view X的工作原理图,API什么的都没给大家介绍呢,你怎么写呀,想写也写不了,所以说这一小节其实挺轻松的,就是用之前的技术把这个案例呢给它实现了是吧?分析一下这个案例最上边呢,有句话当前求和为啊,就是目前的和呢,一上来是零,在这呢,你能选择三个数字啊,是个select框啊,分别是123,选完数字之后,你点加就是加法呗,点减就是减法呗,那这个当前和为奇数,再加是什么意思呢?就比。
01:00
比如说啊,当前这求和是三,三是奇数,你点这按钮就不奏效,哎,只有是偶数的时候,你比如说四点这个按钮它才奏效,那么等一等再加,就是等我点完了之后啊,它慢500毫秒或者慢两秒三秒的,然后他再加,这时间由你控制是吧?各位来整体运行一下看效果啊走一上来呢是零,然后加,我连加了三次对吧?然后选择二,我再加,那就是五和七啊,然后点减五,再点三啊,然后三是奇数,所以说点这个按钮哎,是可以的啊,然后选择一下一,我再一加是六,六是偶数啊,我再点的话,偶数就不行了,然后等一等再加,你看我点完了之后走。哎,是不是等了一会儿,哎,就这么一个效果,来吧各位回到代码里,那我就把之前讲插槽的这些东西啊,我就都给它删了,那这样吧,咱们别删,给它改个名字得了啊,既然是一个计数的这么一个案例啊,一会儿加一会减,我就叫这名字了,Con count本身就有计数的意思,对吧?各位啊,那这里边的结构呢,给它删掉啊,这个class呢,也给它删掉,哎,结构留一个div,一会我们往里边写东西啊,那这些东西啊也给它删掉,名字改一下con,然后这些样式呢,也临时给它删掉吧,一会儿需要的时候我们再写,OK,写完了,接下来呢,写写这个结构啊,在最上方呢,有一个H1,或者你写H2也行啊,叫做当前求和为多少呢?不知道,先写问号,写一下这个静态的页面嘛,然后再写那个select框啊select select框里边呢,肯定得配置option这个name和ID啊,我们也不需要给它删掉,里边直接写option第一个。
02:43
选项呢是一,那在这儿呢是一,对吧,Y6是控制那个你拿到的值,这个一呢是给用户做呈现的,对不对?哎,这不说了,这是二,下边这是三,哎,这也是三,OK select框写好了,接下来呢就是写那些按钮了,嗯,Button,这个是加,这个呢就是减,那再来两个,这个叫做当前求和为基数再加,哎,那这块呢,写好叫做等一等再加好了,这些固定的页面写完了,然后回到APP里面,我再调整一下,这里边呢,不用这么多东西给它,都给它删掉啊,这个class呢也给它删掉,然后引入的时候呢,我引入的是cont复制放在这儿注册一下,然后样式呢,整个这些我给它展开啊,整个这些全都给它删掉,然后呢,回到这个里面,我得用一下count这个组件啊,走回来自结束啊,回到页面呢,看一下效果,刷新一波,呃。
03:43
离得有点近了是吧,我稍微放大一下按钮之间得有间距啊,所以说我简单的写点样式啊,回到这儿写一个style啊,CSS,然后呢,在这个里边,我给这个按钮加一个样式吧,让所有的button都来一个marin left,比如说是5PX,这回看一下效果啊,OK,有点间距了,接下来呢,把这个交互写一下啊,得让它真正能加能减呢,回来各位,那你就得写数据了,得有一个数据呢去保存着那个和同学既然是和当前求和为,那你说得用什么名字呢?和和啊也行啊,在这呢,我用sum对吧,求和一上来是几呢零,那接下来呢,是不是得获取一下用户的这个输入啊啊,那所以说得给这个select来一个vega model啊,那想一个名字吧,用户所输入的数字,或者说所选择的你叫select number也行,或者你叫number也行,在这我就简单写同学叫N行吧,哎,这N呢,一上来呢,让它是一。
04:43
啊,写好注释,这叫做用户选择的数字,那这块呢,写好叫做当前的和,哎,别写着写着一会儿你就晕了啊,在这呢,给它调整一下差值语法,直接写这个sum啊,然后这会儿呢,直接就是双向数据绑定了,对不对?哎,这我们就不说了,然后给这些东西啊,得给它绑定一个点击事件at f click,比如说第一个呢,想让它是加,那加写哪个单词呢?很多种写法啊各位你写ad是不是代表加,哎,你写G加是不是代表加?嗯,那我在这呢,同学,哎,就稍微呢标准一点啊,叫做in CT increment,就代表数学里的加法,那减法呢,嗯,考考你英语是吧?哎,叫decrement来把这个呢,给它粘过来,奇数在加,那这得怎么命名呢?基数怎么能体现出基数呢?哎,英文简称的基数是ODD代表基数,那这个等一等在家也很简单了,就是increment,后边来这么一个词,Wa。
05:43
Wait等待嘛,对吧,各位,那这个这个这个这个是不是都得配置方法呀,我知道啊,各位可能有这么一个想法,哎,说老师不用那么麻烦,来,我教你some加加就写完了,同学啊,我知道这块能这么写,但是我不想这么写,我还是想标准的给他写成一个回调,为什么呢?我为那个view X得做铺垫的,对吧?各位啊,那来吧,这个这个这个这个复制下边呢,得配置一个MYS,得有这么多东西缩进呢,给它调一下,每一个人呢都是一个函数,所以说我就直接这么写了。小逗号说说这个加吧,怎么加呢?那就是this.sum啊,然后呢,加等于Z点谁呢?那个N是吧,然后把这些呢给它复制,减呢,当然就是简等呗,我知道啊,可能有一些同学说,说老师你这代码能优化呀,你这写了这么多东西,说老师你信不信,我一个方法就写完,我传几个不同的参数来标识着本次运算是加还是减。
06:43
并且标识着本次运算式基数在加还是等一等在加,我知道哎,能整合,但是在这同学写多点方法,一会儿再学那个view X的时候呢,能多几个练的基会OK好了,把这个呢给它复制,诶这个复值啊是加奇数在加,那得咋写?如果当前求和为奇数,我在加对吧?那啥叫奇数呢?我是不是这么判断可以z.sum除二取余是不是就可以?如果等于零同学啥意思,它是偶数对吧?那零呢,转成布尔值是false就进不来呗。哎,所以说在这这逻辑我就不说了啊各位这么一写判断就成了,只有基数才能进入这个判断是吧?哎,那在这呢,我再写一个S太out,等一等再加嘛啊那等多久呢?500毫秒或者你写三秒钟也行,但是太长了也不好啊嗯,加,那把这个呢,再给它拿回来,这不就得了吗?好回到页面呢,看一下效果啊,刷新一波走一上来呢是零,我这选择的是一啊,那我开始加来走走走对吧,那我选择二呢再走。
07:43
走诶同学发生了一个问题,这好像在字符串拼串对吗?它不是数学的那个加法运算,这是什么情况呢?哎,说一下啊,各位打开view的开发者工具啊,你就能发现问题的所在,你找到count这个组件,同学刷新一波啊,你看一上来这N是几啊,一并且是蓝色的,一蓝色的是啥意思?哎,就是数值类型的,那这个零也是蓝色的,就代表它们两个都是数字啊,那目前是零这个数字你选择的数字呢,是一,那你说零加一都是数字呢,当然就是正常增长对吧?那你看着当你选择了二个位,瞧着这都哪出现问题了吧?这二啊,不是数字类型的二,而是一个字符串,那七和这个,哎,那一拼接就变成了七二对吧?这是不对的啊说老师呢,为什么一上来是正常的一,那怎么我一选它就不行呢,而且你选回一这。
08:43
一也变成字符串了,这是为什么呀?很正常,各位,因为一上来那一呀,是不是你亲自写的呀?啊,那你看看你这个select框里边,你这Y流写的是不都是引号123呢?引号123当然是字符串,同学说老师我明白了,我这删掉,哎,我这么写对吧,直接写123,哎,那这回行不行呢?不加引号了呀,来看一下效果啊,刷新一波啊,一上来肯定没问题,是一来我选择二了走你同学无济于事,你没加引号咋的,人家给你补上了,哎说老师这得怎么办呀,我怎么能告诉他呀,引号里的123不是字符串,而是数字呢?哎同学,简单就在它前边加个冒号就得了,看你还是对那个V杠半的有没有理解,同学我加冒号咋的?加了冒号,所有绿色框里的东西都当成GS表达式去解析一解析不要紧,就是纯粹的数字123,你说对不?那我要不加这冒号呢?各位这。
09:43
些东西都当成字符串对不?哎,所以说同学加上冒号啊,这个问题就解决了,来刷新一波啊,比如说呢,我选择的是二,OK,选择的是三,这就没问题了吧?哎,但是这么写麻烦也犯不上,同学,我们之前学过一个修饰符,你还记得吗?Vega model啊,这我写一个nub对吧?Number收集到的东西啊,强制往那个number类型转换好了,刷新一波啊,一上来呢,是一,哎,我选择二,你看是number类型的,那这回我们再测试一下,零加二,一直加下去啊,减也没问题,那么六是奇数,哎,偶数是吧?哎,偶数,偶数呢,点这个按钮它就不起作用,那如果你选择一加一下,七是奇数,那走是不是就可以,八又是偶数了,再加是不是就不行了?诶,等一等再加走啊,等了500毫秒左右,是不是加上去了,OK同学,我们就把这个案例呢,给它写好了,那注意观察一下同学这个案例的特点就是诶当前求和的这个和啊,是不是放在自己家。
10:43
它的也就是说目前我的应用啊,是这么一个结构,整体来说红色的是什么呢?APP啊,然后里边有一个绿色的这个组件叫什么呢?Con count,我不存在第三个组件,你说对吧?各位,然后这里边呢,保存着这么一个东西,Sum是几呢?零,然后我每次点加的时候啊,它都在变,诶然后这个count组件的那个页面就发生变化,对不对?各位啊,那一会儿呢,我就得做一个调整了,我要把这个SUM0交给谁呀?各位,哎,交给咱们说的这个VX,那就得慢慢写了,不是这一小节的事儿,这一小节呢,我们只写到这,并且把这src给你复制一份啊,改个名字各位删掉23,_src下划线求和案例,写一个下划线纯view版本的啊,纯view版就可以了,一会儿呢,我再写viewx版,然后再写出各种各样的viewvox版哦。
11:43
OK,好了,那这一小节呢,我们停。
我来说两句