00:00
好嘞,各位,那在上一小节呢,我们给大家讲的是view如何监测对象里面数据的改变,没有给大家讲是什么呢?就是数组里面的数据它是怎么监测的,说老师那要不这一小节咱就聊聊对吧,你之前说的嘛,讲完对象咱就讲数组,那是这样啊各位,我的对象还没有讲完啊,确实你知道了监测对象变化的原理,但是有一个API没到,就是。这个video.set特别适合在讲完了对象监测的原理之后去讲这个东西,哎,我们把它聊一聊,然后呢再去给你讲如何监测数组,然后呢,我再给你解答五里边我们当年遗留的这个问题,好吧,各位啊,还有细心的小伙伴呢,可能说老师你这没总结呀,你这六都讲完了,怎么监测的,你噼里啪啦画了一堆的图总结呢,你那个文件上方不都有总结吗?各位你别急,等我把数组的监测讲完了,再把这一小节这个API讲完了,我们进行一个整总们是不在一总结,各位来文改各。
01:07
为什么要改名?因为六这个里边我没有给你讲数组,我只给你讲的是对象,防止你误会,哎呀,六里边维监测数据改变的原理,那都讲完了,实际上没有写个下划线叫对象,那么在六的这个基础上啊,各位我复制一份文件都关掉,接下来呢,我改名。首先序号是第八个,然后把这些呢都删掉,改成这么一个名叫做view.site的使用,诶这API是干嘛的呢?慢慢来打开,然后呢,同学我加几个功能啊,你说现在吧,我这不是有学校名称,学校地址啥的吗?同学你看你准备了一个学生,但是他的信息是不是没有展示到页面上啊,咱展示展示呗,哎,好走,其实为啥我要展示啊各位,因为一会儿我要用,哎,所以说我要展示嘛,来呃,写一个H2啊,首先展示学生的名字啊,来叫做学生姓名,那怎么写呀,各位直接写name肯定不行,你是不是得student.name呀,还有什么呢?学生的这个年龄对吧,好年龄,年龄你也不能直接点age,因为age又是一个对象,里边有真实年龄是吧,和这个对外年龄,那所以说在这儿呢,咱们还得写一下,这前边加个词叫真实,真实是他。
02:27
里边的点叫做RH,好,那再来一个写一个逗号,叫做对外是吧,哎,对外,然后呢,再来一个差值,然后把这一堆呢给它复制,中间这冒号啊,我就不加了,行吧,省得它太长了啊,把这个SH呢给它写在这儿好了,那还把什么展示一下呢?它还有一堆朋友对吧?那所以说朋友呢,用一个列表去展示吧,那我再给他加一个朋友行吧,来走,再来个什么朋友呢?嗯。Tony是吧?哎,Tony老师,Tony呢比Jerry大一岁,是36岁,哎,所以说在这儿呢,再来一个H2啊,叫做朋友们,然后在下边呢,开始遍利一个ul的列表,Li里边展示什么呢?学生,呃,这个朋友的名字和年龄,那在这儿是不是得用一个那个v for啊好,V-for怎么写呀,F为啥叫F,因为是朋友,那F就代表一个呗,直接写肯定不对,你得student点对吗?各位啊,那别忘了呀,只要你了这个是不是别丢啊,但是同学你看看啊,我现在是不是没有ID,这些朋友他就没有ID呀,没有ID也没关系,各位,因为我这个列表呢,以后也不做说添加一个朋友,删除一个朋友,就单纯展示一下,我问你用index没毛病吧,那你这会最好打的逗号index,那你都这么写了,你最好是不是小括号,诶,OK,里边写什么呀?啊,那就简单写吧,写一个差值读取F点。
03:55
朋友的名再来一个杠杠在读谁呢?F点这个H是吧,朋友的年龄好了,那这回呢,咱看一下啊打开。
04:06
诶是这意思吧,稍微缩小一点啊,然后呢,打开控制台,真实40对外29,哎朋友们呢,哎也都展示出来了,那现在呢,可能就有同学说了,哎呀老师啊,这个view啊做的真不错,你看看这VM身上啊,有这个下划线,Date_date里面呢写的老好了,你看有student就有他的get和student里面呢,还有三个属性,那这三个属性呢,你看也有get啊,再往下走,这个呢,又是一个对象,里面有和你还有这一套,哎呀,老师做的真不错,但是我想说的是他做的也不是那么的完善。说老师你这话啥意思呀,看着各位,你说我现在让你给这个学生啊,添加一个性别,你得咋写?有姓名,有年龄,我想让你添加一个性别,并且性别是男,舒老师,那还不简单,来回来啊,老师在这儿我就开写了,学生呢,有名字有年龄,在这儿我给你加一个叫做性别,然后是什么呢?是男,老师我写完了呀,诶老师呢,你想展示,我就在这儿再给你来一个呗,叫做学生的什么呢?叫做性别,诶老师这我也可以写呀,student.sex这不就可以了吗?我们把学生删了吧,啊总家里学生太烦了,那就是姓名性别年龄,OK,老师这我就写完了,回来你看性别男,哎同学,我的意思是啥呢?这个性别呀,当时没定下来,有这属性以后呢,随着用户的交互啊,随着我这个代码的编写,发现诶得需要这么一个性别,也就是说呀,各位,刚开始我没有在这儿写性别。
05:40
后来随着用户的点击啊啊鼠标划过呀,发现这个人诶,他得有一个性别。说老师那你就把注释再解开嘛,各位我不能让用户去动我代码去吧,是吧,这会儿当时就没写啊,然后咋的呢,我得需要让他有一个,那怎么办。说老师那你就直接注掉吧,那我想问各位,你说直接掉这一块,他报不报错,你可想好再说啊,我把红色的地方掉了,然后我问你绿色的地方报不报错,你可得想好。
06:09
我告诉你是不报错的,回来只不过不展示刷新,它也不报错,老师,为啥不报错?很简单,各位分析这个代码student存不存在存在?但是student他身上不存在啥。读取了一个对象里面不存在的属性值,各位返回的是不是find,它不会报错的。舒老师,那应该显示的是性别and find呀,View的特点就是如果你的值是de,它不会显示到页面上的,比如说你在这写了一个同学未定义的是不是好,那你看一下吧,他不展示,这回明白了吧,他不会报错的。哎,好了,撤回来,但是我想问各位,我这么写报不报错?这么写可就报错了,为啥你一定要体会好同学,谁身上有student vm身上谁身上有这个sex呢?你可别说VMVM身上可没这玩意儿,VM身上只有这三个东西,名字,学校名,地址,学校地址,还有一个学生,对不?你这么读就是属于读了一个不存在的sex,那这肯定会报错的,明白不?同学,说白了就有一种感觉是,你访问a.B如果B不存在,但是A存在,它不会报错,但是如果你直接访AA就不存在,它肯定会报错,是这意思不?
07:26
好了,这不墨迹扯回来再走啊,就问你现在怎么办,这块不能写以后我才决定,诶,他得写,他得有这个性别,那怎么办?说老师那就这么写着呗,啊在这就先不展示呗,完了以后你把数据加进去不就得了吗?是吧,老师明白你的意思,就刚开始啊,忘了加,以后呢,想加进去,哎,就这意思,老师,那太简单了,你找到那student,他这里边不是没有那性别吗?你以后你通过一种办法,你找到这个student,给他来个点性别,等于一个男不就得了吗?老师,哎,是你想的那么简单吗?
08:00
来,我们试试啊各位回到这儿看着我开始操作了VM点下划线,Data同学,我是不是拿到了这一堆东西,拿到了我曾经传入的这一堆东西,对不对?各位,哎,我再找到它里边的谁呢?Student对吧?那然后怎么办呀,给他加一个性别,那性别呢,比如说写一个难完事儿了吧,你看看能不能行吧,走页面更新了吗?没有。老师这是为啥呢?各位啊,我都不用解释,我就直接给你输出VM点下划线,你自己一看你都能告诉我来,我给你输出啊走。看谁呀,你看学校地址,学校名没有用,你得看学生对吧。看看红色框的,再看看下边红色框的,再看看蓝色框的,你就能给我解释了,为啥页面死活不动,同学啊,你的age,你的front,你的内幕是不是都是属于当年你new view实力的时候就写好的那些属性啊,你当年写好的那些属性,你发现人家都给你匹配一个get和塞,其中最重要的就是谁这个塞,塞能干嘛呀,影响页面,但是同学你看看你后加这个性别呀,他就干巴巴的在这写了一个,难,各位,只要是这种东西直接写他没有塞,同学你说他怎么可能是一个响应式的数据呢?嗯,你说对吗?各位。
09:33
你看看人这个age啥的,这些东西都得是现调,这个你这可倒好,直接写了一个性别,男同学是不不行。哎,就是说你后添加的数据是不做响应式的,是不舒老师,那VM身上有没有这个性别呢?那你看看呗,VM直接输出看一下吧,各位有这三个VM身上没有啥,没有这个。哎呀,说老师,那我给VM身上加一个呢,那你试试吧,各位VM点性别等于写一个男,你说能不能好用不好用啊,各位老师,为啥很简单,各位你觉不觉得M身上的东西你读可以你读出来用,但是我想问各位,这V上之所以能有这个address,有这个,有这个,我问各位是不是也是因为你所写的data配置项先收集到了这个里面,然后人家做了数据代理,是不是代理到VM身上的呀?所以说各位你不要妄图直接在下划线date里面塞一个性别不好用,你更不要妄图往VM身上塞一个性别,它更不好用。
10:43
其实同学你这么做是很离谱的,你直接往VM身上,你整了一个性别,那是很离谱的,因为各位你要知道VM身上应该有东西,那应该是咋来的呢?人家主动给你读取这个里边的东西,进行数据代理来的,你说对不对,所以说你改这儿呢,是相对来说,哎,还靠点儿谱的对不对?还说这里边呢,原来我没写,你看现在后悔了,我想加一个对吧?所以说你写在这里是靠点谱的,写在这儿呢,就是太离谱了。
11:10
是吧,说老师那我明白了,你说了这么半天,就想告诉我一件事儿呗,想要啥,当年想好以后再想写不好使了,诶就是这意思,就是你想用什么,当年你一定要配置好,说了老师,那我以后要是再添点东西就一定不行吗?我添那东西就一定不是响应式的吗?我添那东西就废了呗,也不是view呢,也给你提供了一个办法,哎,来回到这儿啊,刷新一波各位,我再验证一下这问题啊,VM点我亲自去找到下滑线data有一种什么样的感觉呀,当年忘写了,那现在呢,哎呀,后悔了,我给他补上,然后找到谁student,然后给他身上来一个啥呢?性别,然后等于比如说写一个男各位是不不好用,好嘞,刷新接下来呢,你可以借助vu给你提供的这个API呢,去实现后,添加的数据也能有响应式的功能,那这个API就特别的强大,叫做view。第二,Set同学,Set啥意思?
12:06
设置你看啊,他给你的提示,他传几个参数三个来读第一个啥,他给他给他什么意思。叫目标,第一个参数的意思就是你要往谁的身上追加一个属性,那你说我要往谁的身上追加一个属性啊,各位来再看一眼target给他我要往谁身上加呀,我要往student身上加,所以说在这你得写好是什么呢?Student,那么第二个参数就是你往student身上加一个什么属性啊,你在这得写你那个性别sex,那这个Val你说啥意思啊各位,哎,就是指性别是男还是女,所以说开写,各位老师来吧。Student哎,你干嘛呢?各位你干嘛呢?同学,Student直接就能用啊,各位你得顺着一条线去找到它VM点下划线data点我是不是能找到这个student呀?哎,写到这儿是不是往他身上追加东西啊好,追加的那个属性叫什么名啊,性别那值呢。
13:06
难写完了吧,各位,我没瞧回车呢,一会儿呢,你瞄着这儿啊,好了,我开始了,321走你,哎,同学,页面有变化了。为什么呀,因为这回它就是响应式的数据了,那你看一下啊VM点我给你输出那个下划线date,你就什么都明白了,打开student同学,我承认这性别是后添加的,但是一点不差事儿,各位是不是也是响应式的,为什么呢?因为你掉了给你的这个APIOK。说老师那就记住这API就得了呗,其实还有一个API跟它的原理一模一样,就是换了一个名字,同学,这个API呢,不在身上了啊,你听我说来刷新一遍啊,不在V身上了,在谁身上呢?在VM身上,而且呢,它不叫set了。他叫Dollar for,哎呀,完成的事儿呢,跟刚才那个一模一样,同学你看看一模一样的,随时在这怎么写VM,点下划线date,找到谁,Student添一个什么呢?性别啊,值是多少呢?这回咱换一个女来看效果啊,各位走哎,也有效果吧,输出VM,点下划线data。
14:19
走。打开student走同学性别在这儿呢,他的get是不是已经就位了,那他是不是响应式的呢?是咱们之前好像一直没验证它到底是不是响应式的是吧?那来验证一下VM点下滑线data点儿student点儿不是name了,是这个性别同学啥叫响应式啊?我这儿一旦改成南桥回车页面也得变,那你看看它变不变是不变。哎,这回不就可以了吗?啊,想想,但是同学啊,我说一下,刚才我们写的代码有点傻。怎么就傻了呢?我没说不对啊,挺对的,就是有点傻。为啥说傻呢?你看一下你写的这段代码。
15:00
你在干嘛呀?老师,我我找student呀,我添加一个性别呀,值为难呀,但是我问各位,红色框里写的不复杂吗?同学,你忘了一个人吧,数据代理啊各位,我想碰到student就这么难吗?我得VM点下滑线date.student呢?同学,我碰到student这么难啊,没有各位,我通过VM.student是不是也能碰到这个student对象啊?说老师真的假的,哎哟喂,你忘了吗?各位,来,我给你验证一下,这堆东西呢,我给你删掉,我给你验证一下VM点下滑线date.student到底是不是VM身上那student同学,如果你数据代理还记得,他俩就是一个玩意儿,你说对吧?哎,当然我这写的不对了,这变成复制语句了,是不是来刷新一下再来,这会儿得用什么呢?哎,这个是吧,你看一下各位是不是一个东西啊,是的。OK,哎,那所以说同学,也就是你想给他添加一个性别呀,你可以写的再简单一点,咋写呢?来瞧着view.site vm.student我问各位是不是就可以了,同学,这就是为啥我要先给你讲数据代理,然后再讲这些东西,先讲这些东西你就彻底乱了,对吧?各位好了,走是也有效果,那同理各位你调这个API的时候,就这个是不是也能再精简一点啊啊,那我们刷新一下,同学,你这就不能再写了,因为你已经给它加一次了,就不能再加了啊给它刷新一下,好这个吧,我这回写一个女啊,那当然这块儿呢,我得给它简单点啊,VM点是不是就可以了呀,来到这儿敲个推车是这意思不?哎,OK,那所以说各位呢,我可以做一个功能,就是在这儿呢,来个按钮叫做点,我给学生追加一个性别是不好了,那咱写写啊各位把这个东西呢形成代码,你不能总在浏览器那个控制台里敲啊,那就在这儿同学首先呢写一个H1吧,叫。
16:52
学生信息,然后把这个呢给它复制一份,往这儿呢,再来一个不叫学生信息了啊,叫做学校信息啊,然后这个里边呢,来一个按钮button啊叫做别说的那么复杂了,添加一个性别属性,默认值是。
17:15
OK,来个点击事件click艾sex添加性别吗?复制,然后怎么办?配置一个methods,跟data是平级的,不要写错,Methods里边是不是这个,好了,咱们写各位,就刚才那俩啊,都写一遍view.site然后什么呢?啊说老师知道了是VM.student各位这不对。这不对,你这不能用VM,这得用什么来着?This嘛,各位记不记得了,MY里面的方法,只要你正常写this一定是VMOK,好了,再往下加个啥呢?性别好了,再往后值是多少呢?难看看这回能不能加上去啊,回到这儿点击一下走,你是不是加上去了?
18:01
但是有同说老师你做的不好,没有性别他就不应该展示这一行啊,当然可以做来往上滑找到性别那一块,同学别忘了我们学过的条件渲染V-if,对,不判断谁判断学生有没有性别,有就展示,没有就不展示,OK,这不就得了吗?回到这儿,没性别一点击添加有性别,并且有值,而且最主要的是以后还能改VM.student点这个性别,比如说改成123,我知道这有点不太合理,但是我就这么练着,对吧?走同学是不是响应式的?哎,那除了用这个呢,来,咱再把那个呢也写一遍,把这个注掉,那这怎么写,this.dollar for set,对不也是可以的。好了,回到这刷新走你是不是也行?哎,那你可能说老师那我就记住了这个东西啊,可太好用了,View side,但是同学它有局限。不要觉得它是万能的,它有局限。好,演示一下这个局限学生啊,没有性别,我后来呀,可以借助点或者是VM点,是不是添一个性别呀,接下来呢,我提一个需求,学校啊,它只有上规谷北京对吧,名字和地址,接下来呢,我想给学校呢再添加一个属性,哎添加什么属性呢?比如说校长啊,来回到这儿写吧。
19:16
咋写?说老师那就写呗,校长,那就是master是吧?哎,主人或者是leader是吧?Led说老师就写呗,同学,我还是那意思,不是说刚开始一上来就写好了对吧?哎,说老师leader是谁呢?一会儿我再告诉你啊,一会儿再说,不是说一上来就写好的,是以后追加的对吧?舒老师,那也能写啊,就刚才那API呗,咱调就得了呗,好写着啊,比U哎,咱在这儿这么的吧,各位不用再写这个按钮了,一点怎么怎么地了是吧,咱直接就动手操练起来吧,对吧,先在控制台上玩一玩,如果成了,咱再把代码写一写,对吧,要不你犯不上了,写了半天对吧,结果不成啊,回到这。那接下来同学你得准备好这个结构,得展示校长的信息对不对?好,那在这开始呗,啊,学校地址,那这是什么呢?校长,校长是是什么呢?用这词吧,Le是吧leader啊,哎,不是小张哈,哎,是校长,校长不是小张啊,校长不是我啊,来,校长好,回到这儿,校长没东西,哎,同学。
20:18
报错是不是太正常了,报错太正常了,因为你的这个里边是不是没有leader啊,同学说好哪个里边没有leader,不是student这个对象里面没有leader,各位是data这个对象里面没有leader,你当年怎么给student加的性别,你现在就尝试着怎么给这个data是不是添加一个leader?好了,那开始写吧,对吧,报错你别怪人家,确实没这东西,那得怎么写呢?点S想好他给他写谁。不要再写VM点下线点student了,不要再写了。哎,老师,那我写谁呢?我写school吧,School学校吗?同学,我问一下你这个层级里面有school吗?有学校吗?没有,你的data里面只有name address和一学生完,我现在的要求是data里面除了有学校名字,Address,还得再来一个叫做leader,所以说你告诉我同学应该给谁加,不是student,不是school,而是data,那你说这是不是写到这儿就得了?哎,对吧,你看你得分析啊,到底整明白给谁加呀,是吧,那加吧,加个什么属性啊,Leader啊,那leader是谁呢?啊,我就这么写了,一个帅气的男老师啊,我不说是谁了是吧?啊,一个帅气的男老师好说老师,您加那不就得了吗?
21:41
加一下啊,报错,各位读一读,不允许你添加一个响应式的数据在view的实例身上,OK,就读到这儿你就明白了,各位他不让你这么做,也就是说这个view.set只能给data里边的某一个对象追加属性,而不能给data追加属性,知道不?哎,我知道有一些同学呢,想投机取巧,说老师啊,那这样啊,我这么写,你不是说直接这么写这个点下划线data不行吗?还有我这么的各位说老师我就往VM身上加,那不就得了吗?VM不也是一个对象吗?完,我加了一个leader,这不就可以了吗?哎,那你试试吧,各位也不行。
22:25
哎,他的意思就是各位VM不允许作为那个target vm身上这个根数据data也不允许作为那个target,也就是说的再直白一点,各位你在调这个view.site的时候,第一个参数不允许是VM,更不允许是VM身上那个直接的数据对象不行。必须得是data里边再有一个说老师,那我就想加嘛,那你可以这样把这些弄走school对吧,然后呢,把这个信息呢,给它配置进去对吧,学校有名吧,学校地址吧,那我问各位这上边这你就得死故点这儿就得死故点这儿就得死顾点儿对不?各位好,这回回来你再试试啊张贵顾北京你看着啊,Leader是一个帅气的男老师,走。
23:18
啊,说老师咋还不行呢,你这没改呀是吧?哎,清掉重新再来一下,走,那得是VM点啥不嫌麻烦你就下划线data.school对吧?看可以吧?哎,那你要嫌麻烦,那你就这么写,把这个data呀删掉,同学,记住这个原则,只要你能找到school就可以,你怎么找我不管你对吧?诶,是不是也行?OK,这回发现了吧,他不是万能的,说老师你咋知道的呢?你咋知道他不是万能的呢?来到官网寻找答案。找到学习里的API,找到view.site各位说的多明白呀,向响应式对象中添加一个属性,并确保这个新的属性同样是响应式的,且触发视图的更新,我觉得说的非常明白是吧?嗯,你再往后读,因为viewu无法探测普通新增的属性,比如this,点我的对象,点一个新的属性等于是不可以的,而且看注意对象不能是实例或者是实例的数据对象,同学这根数据对象说谁呀?就是那个data,或者说是VM身上那个下划线data对吗?好了,各位,那这一小节呢,我们听同学听我说啊,没有总结,现在还不到时候,现在呢,先听着先练着就可以OK好了,这小节呢,停。
我来说两句