00:00
好嘞,各位,那在这一小节呢,咱们来看一下VI3里的这个计算属性,我们还是做之前那个效果啊各位,这有一个姓,这儿呢有一个名,然后在最下方呢,有一个全名,你的姓变了或者名变了,那么全名呢也跟着变,诶这么一个联动的效果好回到代码里,同学,删减一下这个APP啊,不写这么多的东西了,我只是单纯的使用一下这个DEMO组件,在这引入,在这注册,那这些东西我通通不需要啊,随后呢,再去精简DEMO这个组件里边的东西啊,也得删一删,这个props和emmit我不需要,也没有外部给我传过来什么东西,我也不需要,那些插槽什么的,这俩参数删掉,那么这些输出呢,删掉,但是数据我得留着,对吧?各位,它毕竟也是一个人的信息呀,啊,但是这个名啊,拆成了两部分,第一个叫做姓,我用这词儿叫做first name,对吧,姓嘛,那叫做张,那么名呢,我用这个叫做last。
01:00
Name,那在这儿呢,给它写成那个三。好,然后这方法呢,咱也不要,然后呢,我把这个person呢给它交出去,OK,这就可以了,那么上方的结构还得调整一下,同学姓和名啊,都是两个输入框,所以说在这儿呢,直接写了姓名回车,在这来一个冒号,写一个input框,那把这一堆呢给它复制一份,给名一个,那我得收集这两个数据,对不对,我得拿到用户的输入嘛,当然用VGA model,那收集到哪里去呢?同学可千万不要在这直接写first name,那就不对了,因为我的first name是在person里边的,对吧?各位,那这呢同理也得person点什么呢?这个last name,哎,这回就可以了,来咱测试一下啊,看看他能不能收到这些数据,来在这儿刷新一波,各位借助VU的开发者工具啊,点击这个DEMO,然后输入张123是可以的,那三后边来个456是不是能收集,哎,我想让它是上下排列,那在这儿呢,我就临时啊加一个BR得了,我就不写样式了啊各位来到这儿呢,刷新。
02:04
一波,嗯,有张有三是不?哎,这数据呢,也能得到,OK,那接下来呢,写一个计算属性,把这个全名给它算出来不就得了吗?啊,那回到这儿我们思考一个问题,就是在VIEWU3里面能不能按照VIEW2的那种套路去写计算属性呢?是可以的,哎,虽然不建议大家这样写,但是我得告诉你是能的是吧?来,我简单写一下啊,写一个computed的,那么它的值呢,是一个对象,别忘了小逗号里边怎么写?哎,涉及到计算属性的简写和完整写法,对吧?咱们先写一个简写的方式,就是直接起名叫做full name是不?各位哎,走着简写方式不得写成一函数吗?Written written什么呢?姓加一个杠,再加上名,对吧?我怎么才能得到这个姓呢?各位记不记得我再给你讲初始setup的时候,咱们就说过,在VIEW2的配置里是可以看到VIEW3这里边的数据和方法的,那所以说各位我得能不能。
03:04
直接person不能,各位你还得this点对不啊,View are的配置最重要的特点不就是一直在写this吗?那么这个set up里面我们是肯定不用this的,为啥this是undeend用啥呢?是不?各位啊,this.person才能碰到这个对象,然后才能点first name,然后加上一个杠,然后在这呢,再加上把这一堆啊给它拿回来往这一换就得了,Lastna是不是可以?各位,那在这呢,写一个呗,来一个BR换行,咱下边呢,来一个死SPA啊,还是死SPA,先写这个吧,叫做全名冒号啊,那我就直接再来一个,哎,直接写死SPA得了啊,死办标签走着,然后呢,叫做全名冒号,然后差之语法,对吧?各位,那怎么写啊?哎,你一定要知道啊,就是不要学了VIEW3,把VIEW2里的就忘了我计算属性计算出来的这个东西在模板里是不是能直接用啊,所以说同学别客气,Full name直接写在这儿就得了,诶回到这刷新一波啊,控制台没报错吧,我用开发者工具没问题吧?哎,张三,那我改一下张1233呢,456行不行各位行,但是咱说了不建议大家这样写,同学你要写出这种代码就很奇怪,有setup啊,证明咱用VIEW3,哎,结果呢,还写着VIEW2的这个,同学这就有点迷惑了,哎,所以说同学不要这样写,删掉我们要讲的是VIEW3里面的计算属性得怎么玩,VIEW3里面呢,把这个计算属性啊变成了一个组合式的API,那也就意味着同学你得引入对不对?哎,引入谁呢?这个computed当然是一个英文的逗号啊,走是computed OK,引入完了,哎,同学,其实这个组合这个概念啊,在这有点。
04:52
微微的能体现出来,就是不再像VIEW2那样了,你就写配置像吧,我认识VIEW3不是了,哎,说你想用computer是吧,来引入去,你得引入过来,然后在这里面,哎,给它组合进去是不是?哎,来把它复制一下走着吧各位,嗯,那接下来呢,还是数据啊,但是我得说明白,这叫做计算属性,是不是想算出来一个全名,那就直接写嘛,Let full name,诶,朱老师,然后呢,注意看了啊,这个计算属性呢,值不再是一个对象了,而是一个函数,哎,你可以调用,然后在这里面呢,你要传入一个回调函数,你用普通函数可以用箭头函数也行,反正set up里面咱们也不用this,对不?哎,那在这呢,我就直接写一个箭头函数可以吧?各位啊,那跟你之前的写法是一样的,如果你这一个100各位,那你说full name的值当然就是100位,哎,那我在这呢不要。
05:52
到这个100,我要的是谁呢?Person点儿什么东西姓哎,加上一个杠,再加上一个什么呢?啊,没有this了啊,直接写这个person点谁呢?这个last name,对不?各位,哎,不用this,这person不在这呢吗?这不读了吗?对不?各位,那接下来你得怎么办呀?是不是得把这个full name交出去,你仔细看它是亮的,它是暗的是吧?各位,哎,你得交出去full name来一逗号写在这儿,那你说模板里能不能用,必须能用啊来回到这儿刷新一波同学张1233456,诶是不可以,那你看在这儿的体现就是你确实是一个setup啊,但是你这个full name咋的是计算出来的,但这么写吧,各位有点怪,为啥说呢?你说人有姓,人有名。
06:46
那这个全名是不是应该也是这个人里的一个属性啊,你不应该把这个full name给他拎出来呀,这就有点不太对啊,说老师那怎么办呢?太简单了,直接找到这个person给他身上直接追加一个属性for内完活。
07:02
说老师不对吧,你这么做,那这数据能是响应式的吗?必须是,为什么呢?因为我是用reactive定义的这个person,你可以随意的往这个person对象里面增删改,查一个属性,对不?各位它都是想应式的,诶那所以说在这儿呢,For name就不要往出交了,我教一个person就够了,那在这儿同学稍微得麻烦一点,是不是person.full name呀,那你要往这里放嘛,那这肯定得从这里面往出读嘛,对不?各位哎,那保存一下,回头刷新张123啊三呢456是不是可以?哎,OK,说老师,那这就是VI3里的这个计算属性啊,但当然这个只是一个简写形式啊,简写,那同学简写就没有考虑什么呢,写一个注释倍就是没有考虑啊计算属性被修改的情况啊,大家都知道计算属性也是属性也是可以被修改的,对不对,那也就意味着这块呢,有可能写出这种代码。
08:02
瞧着就是说这个全名啊,确实有,但是全名的值的哎,是一个input啊,那在这里面呢,我也得写一个V-model,然后给它绑定到哪呢?就是person.name我这么一写不要紧,各位,那就意味着这个计算出来的新属性也是可以被修改的,嗯,那么在这儿呢,我却没有考虑它修改,那么会怎样呢?刷新一波,看一下控制台报错啊各位,我把章后边加个一,哎,瞧瞧他说什么呢?他说你这个计算出来的值啊,是一个只读的,为什么只读呢?嘿,因为你用了简写形式,只考虑了什么呢?读取没有考虑什么呢?修改,哎,那完整版的写法怎么写呢?先把这个复制一份,诶复制一份,然后把它注掉,那在这呢,先粘过来,把这一堆注释呢也给它复制过来,走着好,叫做完整写法,完整写法呢,那就是考虑读和写呗。改一下,考虑读和写,OK,那怎么写呀,既然是完整写法,各位跟之前呀,几乎一样,就是还是传入一个对象,给他一个guer啊,还得给他一个cer,那你知道了,这俩东西都什么时候调用是不?各位有人读取for name geter调用,有人修改for name c调用,对不对?那在这呢,同学同样的逻辑,把这一复制往这一放,舍不得了啊,那这呢。
09:27
有人修改了,你就会得到一个值,但是你要知道这个值呢,是张杠三这种形式的,对不对?姓杠名,那所以说接下来你得做一件事儿,把收到的这个全名进行一个拆分,Name a22等于value.split对吧?按照什么拆分呢?按照这个杠拆成一个数组,随后那就表演吧,是吧,person.first name等于你name AR里的第零个啊,那在这呢,第一个当然它是last name,对不?各位哎,来看一下效果啊,刷新一波,先看看这能不能行啊,张123啊三的456 OK,那在这呢,开始换了,三后边加的是ABC,你看名是不是也跟着变,那么张这块呢,加的是q we,这会是不是也跟着变呢?OK,这不就写完了吗?哎,同学,跟VIEW2里的计算属性功能是一样的,来总结一波吧,啊,与二中的computer的配置功能一致,都是算东西的对不?根据已有。
10:28
的数据,算出点新数据啊,简写形式这么写,完整形式这么写,嗯,OK,那么这一小节停。
我来说两句