00:00
好嘞,各位,那从这一小节开始呢,咱们来学一下view里的这个计算属性啊,也是特别重要的这么一个技术点啊,在学计算属性的时候呀,我们会做一个有联动效果的这么一个案例啊,说老师什么叫联动效果啊,回到课件里点开1.7啊计算属性与监视,你先别琢磨这词儿啊,说老师啥叫监视,一会儿再说啊,页面上呢,有一个输入框哎,能输入姓,还有一个输入框呢,能输入名,拿到你的姓和名之后呢,用一个短杠进行一个连接,最后呢,生成一个全名啊,然后最主要的是呢,它有一个联动的效果,就是回头如果你把这个姓给他改了呀,全名里的姓也变,你把这名改了呀,全名里的名也变,哎,这是个动态的图,咱看一下啊,你比如说我把这张变成张123,你看这在变三,这里边呢,我输入ABC,你看这也跟着变,诶这就是属于联动的效果,哎,就你动诶我这边也动是吧?好回到代码中。
01:00
那咱们这样啊,各位,我不把这案例啊,一上来就拿计算属性写,我知道这个案例呢,直接上来就拿计算属性写,可以很快就写完,但是那样的话呢,大家可能理解的就不太好了,所以说呢,咱这样做啊各位咱是不是学过差值语法,咱是不是也学过这个methods啊,我呢先拿差值语法把这个案例写完,我呢再拿methods把这个案例写完,随后呢,我再拿咱们接下来要学的那个计算属性呢,把这案例写完,你横向形成一个对比,然后你自己就明白了,为什么view要设计这个计算属性,好吧,来,那打开计算属性,先做姓名这个案例,那咱给它改一个名字吧,因为姓名的案例呢,我可能会写好几个版本,那这个给它改一下,叫做差值语法,实现好,我把这名字呢给它拿过来。把这儿的名字呢,也给它改一下,好,那开始写吧,反正页面的结构得先写对不对,姓名走,这有姓这有名,写个input框,把它复制一份往这儿一放,那下边呢,还得有一个是姓名,那我用一个span的结构给它包起来,里面写什么呢?还不知道好,然后值得你注意的是哈,这个案例一上来呢,你看它上面就有这张,就有这三,那就证明啊,这章和三呢,是两个初始值,你说对吧,回到这儿,那给一个input框设置初始值,我们还不会吗?Value等于上边那个叫做张,下边这个呢,让它叫做三,好写完了吧,哎,老师呢,我看看效果。
02:36
看一下啊。呃,这个布局有点不对是吧,调成纵向的,我简单写几个换行符吧,对吧,就不再写样式了,靠BR换个行得了。好,回到这儿,你确实有初始值了,但是我问各位,你的view是不是没有工作呀?哎,也就是说这个章啊和这个三不应该是你写死的,应该是从view里边读出来的,对不对?好回到这儿,那就得准备一个view实例,那同学你就得想好两个属性名,一个保存性,一个保存名,对吗?啊,反正你别这样做啊,你写一个姓来说老师他叫做这个张啊,然后再来个名,那不太好啊,换个词儿呗,各位啊,叫这词啊,First name是吧,叫做姓,这个时候呢,你别跟我叫那真儿老师,中国人的姓是什么,外国人的名,那这样咱就约定好啊,在咱的课堂上,First name打头的就叫做姓啊,那还有一个叫做什么呢?Last name,这个里面我就存这三,它就代表啥名,哎,这样的话清晰对吧,姓名嘛啊,那这会儿怎么办?各位不能写张了,你得写谁first name,同理,这会儿你得写last name是不说老师这就完了,那你自己看吧,这啥呀。
03:49
对吧?哎,你得读出来说老师明白,用V-B得实现一个绑定的效果,这样的话,诶就读出来了,是的,读出来了,右键检查看一下效果,打开有实例啊,点击一下行挺漂亮的是吧?张三,但是现在有一个问题啊,就是你在这输入张123,这会儿是不是并没有收集到,同学,你这要是收集不到,我问你姓名这个全的这个东西你还怎么往出拼呢?是吧?所以说你明白各位页面上的输入要影响着数据里的变化,你知道我得用谁V杠半的肯定是不好使了,是不是得用V-model,哎,V-model,那把这个呢,也得再拿来一下,V-model你都用了,那为什么不用简写形式呢?Value和冒号是不是都删掉?好,这就是双向绑定来初始显示呢,也是没问题的,最主要的是这儿,诶这块456是不是能收集到啊,那下面就差一个地方了,各位是不是就是全名这块啊啊,那咱这样吧,别叫姓名了是吧,叫全名啊。
04:49
看起来能更明白一点啊,全名好回来,张三不就是把张和三之间用一个杠给它拼在这儿吗?很简单,来到这儿开始写,把问号删掉,同学先把谁读出来是不是那个姓啊?嗯,读出来了,First name,回到这儿看,哎,已经出来了,其实这个效果呢,已经有点效果了啊,走是吧,好回来,但是我要的可是全名啊,那有些同学说老师那就这么做呗,这里边这不是能写表达式吗?对吧?走,加,然后中间拼一个谁呢杠,然后再加,加谁呢?这last name这样的话不就行了吗?诶,看一下效果啊,张三,张后边来个123,这会儿来个456,对吧,都行,但你这样写吧,同学有点犯不上,知道为啥吗?你没有必要啊,把两个双花括号之间的东西啊写的这么复杂,你可以有一个简单的办法去处理,同学你看着啊,你这么写的意思就是它把这个红色框的。
05:49
表达式啊,得执行一执行,发现这边用到了first name啊,那这有这用到了last name啊,那这有中间再拼个杠,其实没有必要这样啊,同学你把它删掉,这里边只写姓,然后你中间不得用那个杠去连接嘛,你就把那个杠啊作为词SPA里的一个正常的文字就可以了,哎,然后在这儿呢,你再写一个啥呢,这个last name就可以了,所以说你看同学这样的话,看起来是不是能好一点,哎回到这张1233呢456 OK实现了回来,那现在呢,同学表面上看挺好的是不是,嗯,但是我给你提一个需求啊各位,就是当我输入的时候呀,这个章里面呀,我可能输入了很长很长很长,然后呢,我在计算这个全名的时候呀,我不想用这么长。
06:35
啊,也就是说我不管你输入的是几位,我只要三位,我只要张一二,从三开始啊,再往后包括那个三我都不要了,那怎么办?你可以输入的很长啊,但是这块我不用那么多,那你是不是得这么写,看first name点用哪个API截取一下是不是slice,那s slice那怎么写零逗号三,那它的含义就是我要第零位,第一位,第二位,但是不包括第三位,对不好,那保存你看一下效果,比如说章后边我写一个二三,你再写,这是不是就不收集了呀?哎,那你看是不是就实现了呢?是的,回到代码中,但是你的代码啊,有点小问题,什么问题呢?看一下觉没觉得绿色框里的表达式有点不便于观察,说老师还行,First name.lis03还凑合,那同学我再给你提个需求,如果我想让这个东西啊,截取了前三位之后呢,再来一个反转。
07:35
反转之后呢,首字母再大写,那同学我问你这里边的东西你写的是不是就越来越多,你这样的话就违背了view里的一个原则,什么原则呢?同学来到官网上去看,找到这儿,打开VIVO的官网,找到风格指南,划到最后,各位你看这里边有一个模板中简单的表达式,你看他说呀,你这个表达式尽可能要简单,他给你举了一个反例,同学,这是表达式开始,这是表达式结尾,你看里边它干嘛了?什么玩意儿,全名又拆分又map便利又upper case怎么又截取?同学,你觉没觉得里边粉色框的代码有点太长了,让人一下子都看不出来你要干嘛是不?哎,这是不好的行为,但是同学你听我说啊,这种行为他不报错,只是说这种行为他有点不太好明白,不,不太推荐是吧,不太推荐你这样写,那他写了一个强烈推荐,那推荐啥呢?不推荐我这么写,那推荐我怎么写呢?他说推荐你这么写这。
08:35
事呢,你就别看了,直接上来了,就给你来了一个计算属性,对吧,他就写了个comped,我们先不讲这comped,那我们怎么做呢?同学,哎,我们用methods去做,就是也可以让这个里的东西很经简啊,不让他写的这么长说老师,但是我如果要没有这个需求,那不就正常了吗?那确实各位你要没有说截取前三位,那你只是说做一个拼接,其实这么写咱这说的没啥毛病是吧,挺好的,但你得考虑到以后啊,以后我这里边可能业务逻辑比较复杂呀,啊那来同学就把这个呢,用那个masters呢去给它实现一下来,那咱把这个呢,给它复制一份好名字呢,给它改一下还是姓名案例,但是编号呢是第二个了,哎,然后不是差值语法实现啊各位,那这叫做什么呢?Methods哎,我借助方法呢去实现啊,那我当然改的是这个是吧,那这个呢,也给它改一下吧,嗯,右键把那copy给它删掉啊好,第一个呢,咱就过了,咱接下来说说这个啊。
09:35
来,那把这名字呢,给它复制过来,放在这儿粘过来,二呢,给它删掉好,那咋实现呢?啊,先把这个给它删掉,我写几个问号啊,写啥还是不知道,嗯,收起来这目录好了,开始啊姓和名呢就收集好了,但是就差这全名了是吧?来我的想法呢,是这样,在这里啊,我不去自己拼了什么,拿到姓啊完再来一个杠,然后再拼上那个名,我这儿呢只写一个东西,然后他就让他出来,那这么写啊,瞧着各位,我在这儿呢写一个MYS,嗯,然后呢,我写这么一个方法啊各位叫做full name。
10:15
啥意思?全名好同学,请问这个for name,我这么写是不是作为方法去使用,你说对不对?那也就是说我可以把它作为一个事件的回调去使用,也是可以的,你比如说ALERT1,那我在这儿呢,同学,我写一个按钮啊,把它按钮的名字就叫做点我完了我给它绑定一个事件啊,Full click,然后让它执行哪个呢?Full,那你看啊,同学我是不是可以不加小括号,哎,右键打开,你看一下效果呗,一点是不是就弹窗,那说老师我想加小括号,那你就加呗,对吧,之前咱聊过这个问题是吧,这就不多说了,也就是说methods里的这个for name可不可以作为一个事件的回调去使用呢?也是可以的,对吧?哎,给它删掉,但是在这呢,我是这个意思,同学,我不想让它作为事件的回调去使用,我想让我自己亲自去调它,然后呢,我让它有返回值,返回值是什么呢?随便写一个小猪佩奇。
11:12
那同学我问一下这个方法是不是有返回值了,那你说在这个位置,同学我是不是可以写一个差值语法,差值语法要把哪个值插入进去呢?看着我这么写。同学,请问我加没加小括号,我没加,我没加小括号是什么意思?我要把这个函数是不是展示到页面上,那你瞧你这全名啊,可真好看是吧,展示一个函数在这上,但是同学啊,你你这么写是不对的,我是想把这个小猪佩奇展示到页面上啊,那你说加不加小括号加那这回你看。对吧,说老师咱之前不说这小括号加与不加都行吗?兄弟,我们在讲这个事件的时候,确实是说这个受音否一加也行,那这会儿呢,不加A也行,但是同学现在可不是绑定事件呢,事件的时候是小括号加不加都行,但是现在哥们你看好了,这是不是在差值语法里呢?你这么写就是属于把for name方法调用的返回值插入到这个位置,那你要是这么写的含义就是你把full name这个函数插入到这个位置了,是吧?哎,这是有着天壤之别的,随时在这儿得写这小括号,你一定得琢磨好你写的到底是指令还是差值对吗?好了,这不墨迹了,那你看全名是不是出来了,但是全名不能叫小猪佩奇呀,我得拿到姓拼上一个杠,再加上这个名儿,你说对吧,那问题是我就在这个位置,嗯,光标闪烁的位置,怎么能拿到这个姓呢。
12:43
那这就得涉及到一个问题,同学,你得明白for name里的this是谁,看你能不能记得住之前咱们所讲的,前边给你加一个艾特服的风格,同学,请问for name我写的是不是普通函数,我没写成箭头函数吧?你说里边的this是谁?一定是当前这个view实例对象,那不信你自己瞧去,来到控制台刷新来到这儿,艾特福后边谁是不是那个VM?那同学,VM我握在手里了,那你说这姓我是不是能读出来?这名我是不是也能读出来?那当然了,他身上肯定有这个full name这个方法对吧?那你知道这儿应该怎么写了?各位给这块删掉written return还是得写的this.first name加上什么呢?一个杠后边再来一个this,点谁呢?Last name,这是不是就可以了呀?哎哎,这这有一个加号啊好,那各位你瞧一下效果呗,回到这儿张三是吧,说老师那能有联动的效果吗?也有啊,你瞧着张我。
13:43
写个123啊三后边我写个456,你说行不行,肯定可以啊说老师那这是怎么回事呢?哎呀简单咱分析一下各位啊,打开这。点击这实例,请问我把张改成张123的时候,我引起了谁的变化?是不是first name的变化?那first name一旦发生了变化,那你听我说呀,各位咱之前是这么聊的啊,说first name啊,只要一发生变化,那页面中用到first name的地方就得更新,但是问题是我在页面用到的地方是不是叫做full name这个方法呀?哎,那这里面呢,就有一个细节上的问题跟大家说一下啊,就是啊,你这个data中的数据,任何一个数据发生变化的时候,View的模板都会重新解析一遍,啥叫重新解析一遍?就是我又拿过来这个模板整体再阅读一遍啊,该需要什么地方再重新看一看,所以说同学数据一发生变化,模板要重新解析知道不?那模板中如果说没有用到这个first name,哎,那可能啊,他就不会再重新去读取了,但是如果用到那就会。
14:54
重新读取一下,还有就是同学模板里面,如果你自己调方法了,你看这是属于你在模板里边,你用差值语法是不是自己在调这个方法呀,那方法也会重新调一下,那从代码的层面咱来说一下吧,各位你是不是把这first name改了,OK,那就会引起整个绿色框里面模板的重新解析啊,解析一下这解析一下这当它解析到粉色框这个位置的时候,他发现,哎哟兄弟,你这个差值的值是来自于一个函数的调用啊,那我也不知道你这个函数返回值跟之前一不一样,那我就重新再给你调一遍吧,明白不,也就是说这个for name啊,同学是有很多次调用的,我在这输出一个艾符,后边来个杠,我给你写上for name,完了你自己观察啊,一上来肯定得调用,你说对不,然后你看着各位啊,我改那个章,你看是不是调,我再走走走,你只要一改这个。
15:54
就会重新调用,重新调用就拿到最新的和最新的名给你拼在一起了,对不?各位,哎,来吧,说说这个注意点,就是只要data中的数据发生改变,那么VIEW1定会重新解析模板的,只有重新解析模板他才能知道模板里边哪个位置用到了这个姓,然后呢,把这个姓给它更新,你说对吧?那重新解析模板的时候,只要遇到了差值语法里边写方法,放心吧,这方法一定重新帮你再调一遍,对不好,那截止到这儿呢,同学姓名这个案例我已经用差值语法和methods是不是都给大家写了一遍,一会儿呢,我们再去说这个计算属性怎么写,其实啊,你这么写啊,是有一点点小问题的,它效率不高啊,一会儿我们再说好了,那这小节呢,我们先。
我来说两句