00:00
好的各位,在你已经掌握了GS叉啊一些基本的规则之后呢,我们开始做一个小练习来看课件,就是这个。在页面上动态的展示出前端GS诶框架的列表。动态的啊,不是写死的数据,来吧,开始我已经准备好了这个文件夹和文件啊,同学们,文件夹文件三个核心库帮你引入进来了啊,然后还有这个啊啊容器准备好了,接下来开始吧,第一步是不是创建虚拟盗墓,怎么创建呀?Cost名字叫做v do,那么你注意观察这个结构,这应该是一个H1或者HR标签,这应该是一个ul Li的列表,对吗?那整个外侧是不应该得来一个容器,因为GS叉有规矩,标签必须只有一个跟标签,那写吧,咋写多级的结构,那你不得不设把包一层啊,那这里边最开始写个H1,叫前端JS框架列表,那么下边u Li Li走。
01:18
那里边挨个写angel react,再来一个view,那没别的了,就这三个虚拟do创建好了,走,接下来进入第二步,渲染虚拟do到哪呢?页面react do.render渲染谁?就是这个V往哪放,Test右键打开看效果,OK,可以的哈,哎,那我们注意观察一下,这这也没问题。同学,别急啊,我慢慢来,现在你是写死的死数据对吗?你得让他动态起来,也就是说真实项目开发这个东西不是你写死的,是读后端传过来的数据,然后你去便利的,那当然在这儿呢,我们暂时先不进行前后台的数据交互,你别急,后边有专门的讲解,我先模拟一些数据可以吧,在最上方写好注释,模拟一些数据定义,好吧,数据那就叫做data。
02:31
啊,等于你觉得就这个列表用什么模拟最合适呢?首先他们是有顺序的,有排序的,其次呢,每个人好像只有一个名字,这个属性没有别的了,那所以说一个最简单的方式当然是用数组,数组里边每一个元素就是这个框架的名字,比如说第一个,那么第二个react,那么第三个呢,就是view,好写完了,那你这儿是不是就不能写死呀?
03:05
哎,那这我怎么写啊,老师你得循环便利,哎,同学先别急。这已经有数据了。你说我直接把数据写在这儿会是什么后果呢?我们试试,对,是不是写在这儿了啊?那你瞧吧,现在你可就犯错误喽,同学,嘿嘿,是不是没读变量啊?那咋办?你这就得data。是吧,OK,那我们看一下吧,走,哎哟喂。您不能说它没便利,他真帮你便利了,View便利了是便利了,但是你觉不觉得丢失了u Li Li里的那种结构呀,对吧,那怎么办呀。哎,同学你想一下,如果我们那个数据回来之后啊,是这个样子的。
04:01
哎,你自己用心体会一下啊,是这样的。然后这是呢,React,那这是呢,View,那这叫二,哎,你说我要这样写,同学,那你看一下效果吧,出来了老师挺好的,那就这么地吧,不行啊同学,谁家后台返回的数据是这种呀,带有标签的。不是一般返回的都是上面这种纯数据对吗。哎,那所以说同学,现在你能发现一个规律,如果你给react传了一个数组,React会自动帮你遍历这个数组,对吗?数组里有什么就往页面里面放什么,对吗?哎,好了,别急,先别去遍历。同学你说如果a react view这个数据我不是拿数组存的。我是拿对象存的呢。你比如说我这么写啊,它不是一个数组,是一个对象,第一个属性叫做NAME1里边是angle,再来一个叫做name,二只是react,再来一个name,三只是view,我挨个把它们放进来啊,走走走。
05:18
那我这就不能写data,我得写OBJ对吗?好,看看效果,首先东西没了,那你一个下意识的反馈就得赶紧看控制台对吗?打开划到最上方看看啊,它咋说呢?说object啊,这个对象类型是不允许作为react一个,哎,说老师child的孩子其实可以理解为不能作为一个react,一个合法的节点。你给数组,人家能帮你便利,但是你给人家对象啊,那他做不到了,所以说你刚才告诉你的说我找到了,哎,这些东西我找到了,你所有的key我只能帮你到这儿了,NAME1NAME2NAME3啊,那别的我帮不了你了,如果你真想去做便利,你看请你用数组去代替,OK,那在这同学我可带着你明确了两个事儿,你给react数组能帮你便利,你给react一个对象,它是根本展示不出来东西的,而且会给你报错,报哪个错误报这个。
06:19
同学,我希望你在学习框架的时候呢,能遇到更多的错误,其实这是好事,然后每一次出现错误呢,你别匆匆了事,你仔细读一读,说不定什么时候你会遇到他第二次,比如说这个以后你绝对会遇到见,就咱们在写案例的时候啊,OK,好了,给这个关掉,那行了,咱不做这么多无聊的事儿了,说说咱真正要做的事儿了,怎么的,数据有了,而且是纯数据,对吗?我就是想把纯数据加工成带有标签的数据,对吗?啊,来回来啊,嗯,那怎么办呀,得循环得便利吧,那所以说接下来在这儿你能直接写date吗?不能,那怎么办呀,同学可能就会想到了老师,那你循环嘛,对吗?哎,那我就写同学一个最简单的循环,是不是咱们熟悉的for循环呀,那我写一个啊那当然了,这里边有很多的东西啊,它是我们这里没有的,因为这是一个固定的代码模板嘛,那我们改一改吧,那计数器不用index了,我们用I吧,啊那I小于谁呢?不是A瑞点是塔点,塔不是数组吗?那这个就是I加加对吗?那这里边干嘛呢?你不知道你干嘛呢,就给它删掉啊,给它剔成一句conso log输出一。
07:39
但是你神奇般的发现啊,就二十七一直到30行这几行代码啊,我怎么写他都报错,他就说不对。那问题是这东西哪儿不对呀?是吧,哎说老师那不让选for循环感觉是吗?哎,那咱不写for循环同学,那我写个consolo,你说可以吧,啊console.log然后我输出3A同学,你发现它不报错对不对,是不是不报错,哎,那这东西能不能运行啊。
08:17
那试试吧,打开。那页面上肯定没有东西嘛,就这么一个标题,来看看控制台输没输出呢,刷新一下啊走是不是输出了呀,啊老师能总结出来了,能写for循环,但是不能写别的。嗯。哎,同学说老师好,能总结出来了,For循环的课不能写啊,不能写。哎,好,有同学说了,老师那明白了,For循环呢是不能写的,但是conslo可以写,哎,你能这么总结吗?太片面了吧,那到底这里边能写什么,它不能写什么呢?同学们你看一下啊,我刚才写data是不是能写?
09:02
啊,后来我又写了console log这个内置的函数调用是不是也可以写,但是我写for循环是不是就不让我写,那同学我再测试一下,我写个if判断,如果E等于一啊,这这么写E等于一同学,这是一个永远为真的判断,对吗?但你发现if判断是不是也不让你写?啊,行,For循环不让,If判断也不让,那到底这怎么总结呢?同学别急,我不给你卖关子了,接下来呢,咱得说明白一个事儿,就是什么是表达式,什么是语句。你发现之前我在给你讲GS叉规则的时候,我一直这样说,同学,咱打开看一下这规则啊,我怎么说的,标签中要混入GS表达式,你在用画括号,同学,我可没说标签里边混入GS代码啊。或者我可没说标签中要混入JS语句啊,我说的可是表达式,那么问题来了,表达式和语句和代码它有什么区别呢?
10:07
哎,那得把这个考虑好,那我直接告诉大家,就在这个位置啊,你只能写GS的表达式,不能写别的。来吧,总结何为表达式?嗯,其实呢,这应该是一个GS里的基础性问题啊,但是在这儿呢,拎出来跟大家聊一聊啊,写好了叫做一定注意区分,区分什么呢?走,用这个给你高亮一下啊,高亮一下显示一定要注意区区分JS语句啊,GS语句吧,同学也叫GS代码,那你可以语句代码,那不一个意思吗?但是他和谁就不是一个概念呢?GS表达式好其实就一个区别,先说表达式吧,一个表达式会产生一个值,好可以放在任何一个需要值的地方。
11:13
OK,接下来我给你写几个例子,例如。啊,下面这些都是表达式啊,这么写吧,下面这些都是表达式,来首先看第一个我写一下啊,大家感受一下。A,它就是个表达式。哎,苏老师,这是表达式,同学,你想A是不是可以理解为它是一个变量名啊?我是不是在读取这个变量里边所存的值啊?那你比如说同学,如果你前方写了这么一句代码cost a,然后呢,等于一,那你觉得我这A往这一写,是不是就读出来里边存的值一了呀?我知道有些同学说,老师那你要没定义呢,没定义也不耽误它是表达式,只不过这个表达式在运行的时候会报错,报的是a is not DeFined OK。
12:09
那你说我只写一个变量名,是不是表达式啊,是吗?它能读出来一个值吗?啊好了,那再走第二个,嗯,我再给你写一个啊,比如说我写了一个A加B,你说是不是表达式呢?是啊,它会找到A找到B,嗯,是吧,给你做加法,OK,还有第三个谁呢?DEMO小括号传个值同学,这是表达式不?这是不是表达式是?这是函数调用表达式对吗?你在调用DEMO这个函数,而且你传了一个参数几呢?一说老师,那怎么能界定它有没有值呢?非常简单,你就在这些人的左侧,你定义一个变量cost X在这接能接到值它就是表达式,接不到值它就不是表达式,说老师,那DEMO如果我没写返回值呢?兄弟,你没写返回值,它是不是也有一个return and fun的这个动作呀?
13:06
OK好了,那所以说这也是表达式,那再往下来走,第四个我再给你写一个啊ar.map。同学,这是不是表达式呢?Arr呢,代表一个数组,数组身上是不是有一个方法叫做map把方法,数组身上的map方法专门干嘛的呀?是不是用于加工数组啊?哎,那你比如说临时呢,我们写这么一小段东西啊demo.atl我先临时写一下,写完我就删掉了啊,因为这段代码呢,也不是很难let一个A22等于,比如说呢是135793和一中间呢。逗号,我想让13579每一个元素都比自己原来大一,那怎么办?你可以去加工一下,那就是ar.map是不是得给一回调啊?你拿到每一个是不是都是一个number啊?我就用nu去代替,那么你拿到了这个值之后,你要干嘛呀?Return um加一。
14:11
对吧,比原来大一,那我想问一下同学。a.map是不是你在调用一个map函数,或者说map方法,它有没有返回值呢?必须有定义一个变量去接result结果,然后你conslo输出这个result,你看看它有没有值不就结了吗?打开控制台刷新二四六八十对吗?哎,所以说呢,同学这些东西你得注意区分啊,数组身上的方法你得熟啊,OK,那这个呢,就是演示一下好了,关掉,那你说它是不是也是一个表达式啊,因为它有返回值吗?啊还有同学这个呢,也是有返回值的,你要注意啊方式,然后呢,C啊TL,比如说呢,叫做test。同学,你说第五个我在干嘛,是不是定义一个函数,其实你定义一个函数的时候,那你如果拿一个变量在这边接,你也是能接到的,它也是有返回值的啊,简单看一下吧,新建demo.at。
15:17
走英文的啊走这呢,写一段脚本cost X等于来吧,开始定义函数function式test函数呢,什么也不干啊,一上来就console out一个艾服务,那你看一下吧,我输出这个X,你看看它有没有值呢?有的啊,就是这个函数嘛,是吧,哎,函数本身,所以说哎,这个也算作是表达式,好了,右键把它删除。来吧,这就是表达式,那咱们再聊聊另外一个谁呀,是不是叫做嗯,语句啊,或者说叫代码啊,语句啊,或者咱说是代码啊,那哪些属于语句或者是代码呢?
16:06
写一下吧。复制下面这些都是。语句,或者可以称之为。代码那来一个一个瞧,首先我写一个啊一点儿,比如说我写一个if判断同学。是表达式吗?不是来,你拿个变量在左侧接,你看能不能接得到,你接不到,哎,If判断属于语句,再来一个,它也属于语句,谁呢?就是你们熟悉的for循环。嘿,你拿个变量接,你看你能接到吗?没有值,它不产生一个值对吗?好了还有嗯,就是咱们熟悉的这个Switch case是不是也是一种判断呀,Case什么什么什么对吧,同学你觉不觉得这些东西都是控制代码走向的?
17:01
If和Switch是控制什么时候走,什么时候不走,这for循环是控制你当你满足某些条件的时候,你走几次,什么时候还停下来,对吗?这些东西都是控制代码走向的,没有值,所以说不属于表达式,这些属于表达式,表达式会有一个值,好了,完了,这就是对表达式啊和语句的一个说明,那你说你这来吧,同学,你说你能写if判断吗?不能,你能写for循环吗?不能,但是你刚才写的conso log呀,我写个date是不是表达式,哎,OK,那你刚才写了一个console.log你写了一个一是不是表达式,是啊。啊,那同学你说这怎么办呀?我要把一个数据的数组是不是加工生成一个标签的数组啊?同学,那不就跟刚才我演示把一三五七九变成二四六八十是一样的效果吗?你给我的13579啊,那你加工完之后呢,二四六八十,那现在是我给你的是字符串的a react view,需要你加工成带有Li标签的angle RA view,那你这怎么写呀?
18:12
Date加工数组map啊,Map拿到的每一个,那如果你不知道叫什么名字了,你可以来一个item啊item,那你说这会怎么办呀?刚才是13579都加一,现在是under react view外侧全包裹个啥东西,包裹个啥是不是Li,所以说写啥。那咋写呢?Return的一个Li标签,Li标签里边是有内容的,那每个Li里边的内容是什么呀?是不是就是你拿到的那个名字呀,那你说我这么写对吗?不对不对,为什么这标签都出来了,你直接这么写,那你自己瞧效果吧,打开。所有人都叫item,那肯定不对呀,那你这得读变量,哎,得这么写是不是就读出来了OK。
19:09
但是啊,你别高兴的太早,控制台啊,可不愿意了,你读一下啊,同学,他说每一个节点在这个列表当中都必须拥有一个唯一的key属性,注意啊,必须得有一个属性名为K,而且它是什么呢?唯一的。那怎么办呀,我先说一下啊同学,这是为什么,我们之前是不是说了啊,存在一个非常优秀的盗墓的这个虚拟DOM的啊,一个低频算法啊,那个低频算法呢,就靠K同学,你就简单理解啊,页面上很多的Li,那每个Li都是不同的吧,所以说每个人得有一个标识,哎,那就是谁呢这个key。同学,就比如说啊,举个例子,如果是听课的男同学,那你跟我都属于男人这个分类里的,那咱们这一些信息都一样吗?不一样,所以说你得有身,你的身份证号,我得有我的,那这个key呢,就是虚拟盗墓的一个唯一标识,你如果没有的话也行,东西也能出来,但是它容易犯错误,所以说你就乖乖的在这Li里边给他一个什么属性呢?K问题是值是啥呢?老师随便写一个吧,比如说99,好,你要是敢这么写,那就是所有的Li的K都是99,他给你报了另外一个错误。
20:33
说至少有两个孩子,他那个key啊,都叫99,不对,这个key should be uniqueq应该是由唯一的,那所以说呢,那这不可能写死了是99嘛,那同学老师那咋办呀。同学我问你啊,Map遍历的时候,第二个参数是不是索引值啊,那你有100个元素索引是不是零到99啊,那你说每个人的索引值是不是不一样啊?哎,刚好利用这个我们是不是就可以写呀?同学说老师我写个随机数,我写个时间戳啊,倒也不是不行,但是简单来说用这个那不更简单吗,老存。
21:08
列表出来了,警告没了。但是我先声明一个事儿,咱们这么写是有点儿不合理的,有的时候甚至会产生一些严重的问题。说老师那你这不行啊,咱不能这么写呀。那同学啊,咱还没到那一步去详细的解释说这个index啊,把它作为这个key会有什么问题,没到那环节呢?现在咱们就是知道便利的时候,列表里边每一个元素都得有一个唯一值KOK,那都得有这个。啊,但是这个值呢,写啥无所谓,只要是唯一就可以,那我现在图方便就用这个index了,对吧,不是说写了它一定会有问题,同学,后期我们会仔细的探讨这个问题,什么时候行,什么时候不行,那它是怎么不行的是吧,咱都会详细的说明,现在呢就先简单来啊,希望大家呢明确表达式,还有语句啊,以及注意一个事情,你给react数组,React会帮你进行遍历,但是你给对象就不好使。
22:09
OK,那这一小节呢,我们停一下。
我来说两句