00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成修改属性中的查看模式与编辑模式的操作。那咱们呢,先看一下咱们的效果。比如说老师选择一个一级分类,比如说手机。手机通讯手机。那对于添加属性和修改属性,他们所跳到的页面的结构是一样的。那咱们呢,先看一下呢,点击添加属性。对不,那咱们呢,可以相应的输入你相应的属性名,比如说颜色。那以及啊,也可以给他添加相应的属性值,比如说黄色。那咱们呢,可以实现什么?是不是实现编辑模式与查看模式的切换?那么为什么可以实现呢?那咱们得看一下呢。是由于当你点击添加属性值这个按钮的时候,那咱们看一下咱们的代码。
01:02
对吧,咱们找一下咱们的结构当中的这个添加,哎,属性值这个按钮。当你一点击这个按钮的时候,那么会触发这个叫a DAP tr y这个回调。那咱们呢,去找一下子。是不是就是他?那当这个事件的回调触发的时候,做了一件事,什么事呢?给咱们的想的是数据,这个数据push了一个新的元素。而这个元素的身上啊,是有flag这个标记的这个属性。而且呢,要注意一件事,什么事在基础的时候咱们说过。这个数组啊,是一个响应式数据,当它通过push发生变更的时候,是可以检测到这些响应式数据的。对不?那么对于咱们基础的时候,咱们应该知道对于数组的变更,比如说push,对吧,Thought,以及还有什么数组的替换。
02:04
像这些元素当中的这个属性啊,是响应式的VE底层是可以监测到。那所以说你会发现,当咱们进行切换的时候,数据发生变化的时候,视图也跟着变化。对吧,哎,就是它。那咱们呢,去看一下咱们的这个修改属性。那比如说我现在想修改这个属性,对吧,那你要注意一件事,什么事,这个数据啊,这个已有的属性。是来自于哪?是不是当你确定了三级分类的时候,会向服务器发请求?那服务器响应数据成功是不是进行展示,那么我想修改的当然可以修改。但是你会发现一件事什么事,那这里面呢,就没办法实现所谓的编辑模式与查看模式的切换。那这又这又是为什么呢?
03:01
那咱们呢,得盯住数据。咱们得拿数据说话。那找到咱们的相应的组件,找到a tr。那咱们看一下子。比如说老师选择的是手机。手机通讯手机对不?那比如说咱们现在要修改这个大哥大这个属性,那咱们看一下子。那么你会发现这个属性的属性值的身上是没有flag。这个字段,所以说因此没办法实现什么,是不是实现查看模式与编辑模式的切换。对不,那你说这怎么办呢?那有的同学可能会想到,那老师很简单啊,把已有属性的属性值的这个身上加上flag字段不就行了吗?对吧,那咱们去看一下子,那咱们的这个修改属性的时候,这个属性是从何而来,看这啊。那是当你点击这个修改属性这个按钮的时候,那咱们看一下子。
04:05
找到相应的这个按钮,它呢该叫做,咱看一下它的名字叫啥啊,它没有名字对吧,就是修改,那咱们看一下它们应该是在上面的这个结构当中。对不,那咱们再找一下子,那不就这吗。那么当你一点击这个按钮的时候,咱们要update at DR是不是要修改某一个属性,你这不是要修改大哥大这个属性啊,对吧?哎,那他会掉肉,这个方法会把相应的这个属性啊传给这个回调。是不是就是他?对不?而我们当年做的一件事,什么事,是不是经营了深拷贝?但是你要注意咱们传过来的这个,哎,这个这个这个呃,属性的身上是没有什么的,是没有flag标记。所以说没办法进行切换。那咱们呢,可以看一下老师呢,给你打印一下子,你看啊,比如说老师点击这个修改,那你看咱们拿到的这个属性的属性值身上,它是没有flag这个字段。
05:12
所以说没办法进行啥进行切换。那所以说这个可以怎么办呢?可以这么办。当你点击修改这个按钮的时候啊,哎,你看这儿。当你点击修改的这个按钮的时候,它是不是把相应的属性传过来了,对吧,而且咱们进行了深拷贝,那你可以怎么办?你可以给这个对象的这个at tr value不就是相应的属性吗。把它的属性值这个数组里面的元素你给它加上,是不是加上flag标记就行。对不,那所以说咱们这儿可以怎么办,可以这么办,那么在修改某一个属性的时候,那么讲相应的属性值。对吧,啊元素那么添加上flag哎,这个标记。
06:05
对不,那咱们就可以来呀,这点at tr info.at tr value list.for each便利吗?对吧,那么便利item item是什么呀?是不是咱们的每一个相应的属性值。对不?那有的同学说那老师最简单了,那你不就是item.flag为啥?那你看默认应该为啥。你看已经写好了这个啊,你看这这已经写好的。比如说你点击修改,那默认是不是应该是查看模式对不?那所以说你item.flag为啥为false,那有同学说老师这么写行不行,那咱们可以看一下。对不,咱们刷新你看这儿啊手机。手机通讯手机。咱们呢,选择大哥大对不?那咱们点击气罐,你会发现是没用的。
07:00
那这是为什么呢?对不,那咱们看一下子,那首先说啊,他现在没有成功,但是呢,咱们呢,还是看一眼数据,你看这儿啊手机。手机通讯手机点击修改,那咱们呢,看一下这个属性值。你看它的身上是有这个字段的,For flag为false,但是你会发现你点击的时候,诶,他试图没有跟着变化,那这是为什么呢?哎,记住不能这么写。对吧。那么这样书写就是这样书写,相当于啊,这块也写一下吧,这样书写也可以给给谁给咱们的这个属性值添加flag字段。但是你会发现一件事啊,但是会发现视图不会跟着变化。那为什么呢?就是因为flag它不是响应式数据。
08:02
对不?这块呢,一定要注意,你不能这么搞。那有的同学可能会问啊,那老师用什么呀?那咱们得学一个新的小知识点,老师呢,带你们看一下文档,叫做Dollar side。来咱们找一下的API。这里面的老师给你们搜一下子,叫做Dollar set。行,那咱们呢,看一下子有没有对于Dollar set的一个解释啊,咱们找一下子。他这块呢,有两个是吧,咱看一下这。看有没有解释的啊,这块是没有的,咱们再找找,应该是在顶上。对吧,应该叫做Dollar side对吧,will1.side嘛,看这吧,对吧,那只不过这是全局的嘛。咱们说一下。那么到了side,它可以干什么呢?那首先说向响应式对象中添加一个属性。并确保这个属性啊,同样是响应式的,那什么是响应式?很简单,就是数据变化,试图跟着变。
09:06
对吧,且触发视图更新,对不?它必须用于想是对象上添加新的属性。对不啊,这块一定一定要注意啊,因为VE无法探测到普通的新增的属性。对不,所以这块呢一定要注意啊,这块呢,老师呢,给你拿过来给你做一下笔记。对不,这你千万别这么写,因为什么老师也说了,哎,是因为VE无法探测普通的新增的属性,对不,那么没办法让他实现什么是没办法。比如说这样书写的属性并非什么,并非响应式的。哎,响应式属性,什么叫响应式属性呢?很简单,就是数据变化,视图跟着变。那有同学说说老师怎么写啊,那可以这么写,用Dollar side,对不组件实例身上有一个叫做Dollar side这样的一个方法,它的第一个参数是什么?是给哪个对象添加,添加哪个属性。
10:13
值,为什么?对不?咱们默认是false,对不?这样搞就可以了。那咱们呢,保存一下子回到这儿,咱们再测试一下子,看一下O不OK。比如说手机,手机通讯手机修改。那这回啊,老师一点击看这是不是就可以了。对不,那这里面呢,老师呢,得说一下子说老师,那为什么上面这里就不需要像这种写法。对吧,那这块老师说一下子,因为本身这个就是响式数据,而对于响应式数据,它是一个数组,对于数组的变化,比如说push是在变化数组里边的元素,VE底层是可以检测到的,这些小是数属性的。对吧,而咱们学基础的时候应该知道,对于数组的一个是变更,还有一个是替换。
11:04
对不,都可以检测到这些数据的变化,对不?而你这种写法是什么?你这种写法是给一个对象添加一个新的属性,那这是没E无法探测到的。无法检测到数据变化的,试图跟着更新,所以说你得用谁用这点side这种写法。那咱们能说一下子,那么第一个参数是什么?是哎哪个对象。对吧,哎,对象。那么第二个参数是什么?添加新的属性来添加新的响应式属性。对吧,哎,属性。属性第三个啊,第三个参数是相应的新的。哎,新的属性的属性值。对不,所以说这个小知识点呢,要注意一下。
我来说两句