00:00
好嘞,各位,那说完了组件的基本使用之后呢,我们再来说几个注意点啊,我在这儿呢,创建一个简单的组件,还是之前的那个school,我呢就不复制粘贴了,直接再写一遍,让大家呢也加深一下这个印象啊,写一个结构templl,还是展示学校的两个信息啊,一个是名字,一个是地址,写个div,在这写一个H2啊,叫做学校名称差之语法读取这个name,再来一个叫做地址,然后这呢是address,好,然后呢得配置数据了,哎,注意了这个数据data是不是得写成一个函数形式啊嗯,然后return,这个真正的数据对象有name啊,是上硅谷好了,再来一个叫做北京,就简单写了啊OK,同学,我这一步叫做什么来着,叫做定义组件,那接下来呢,是不是得注册呀?哎,折叠起来,这个和这个想注册你就必须得有一个VM,对不?咱之前说过所有的组件呢,得经过一个VM的管理啊。
01:00
至于说这吧,同学你写不写数据呢?那就看你用不用啊,你要想用就写点,来咱简单写一个MSG啊,内容呢,叫做欢迎学习啊,不用再来一个感叹号,OK,写完了,那接下来呢,你得去注册组件,Components,这叫什么注册来着,局部注册对吧?完整的写法呢,应该是这样的,School,诶,School OK,这回就可以用了。同学来到上方,首先呢,我先写一个H1吧,啊把我刚才写那message给它展示出来,同学,我这用组件了吗?这没有,哎,然后你不是有一个school吗?那在这就可以用了,School走,当然同学啊,我粘的是这块,但是它的名真正是由这儿决定的,对不对,他俩同名是不?哎,所以说我直接粘过来就用了,那同名就是是吧?诶,可以简单一点,好了,打开看一下啊走,诶,OK,没问题,控制台呢,也没报什么错误,借助开发者工具走,你这是VM有自己的数据,这是组建school有自己的数据,对不对?哎,咱之前也聊过了,这个S大写是正常的啊,它会自动给你调成这个首字母大写,虽然你这写的是小写的,好同学聊聊几个注意点里的。
02:00
第一个点啊,就是关于组建名,这里边有点说斗啊同学是这样啊,目前来说吧,我要是完整写呢,应该是这样的,对不?哎,但是由于它俩同名,所以说我总用这个简写方式,那接下来呢,这样防止大家误会我在这儿能用S,那你说我这得怎么写冒号,S是这意思不?各位哎,OK,那view官方呢,给我们推荐了一些组建的命名,同学我就不说那个不推荐的了,不推荐的太多了,五花八门的对不对,除了推荐的那几个,剩下全是不推荐的,所以说在这儿呢,我就直接说说他怎么推荐咱们写啊同学呢,他是这样说的,他说呀,你首先考虑好你这个组件名啊,是一个单词组成的,还是多个单词组成的,那同学我问一下,我们目前这个组件名,就这玩意儿是几个单词组成的呀?一个他说如果是一个单词组成的,那么第一种写法就是纯小写的字母,School用的时候也是纯小写的,哎,这是第一种,我们之前一直是这么用的。还有第二种就是他说你可以把这首字母S给它调成大写的,哎,那你用的时候呢,就得与之呼应上也得是大写的。
03:00
对不好了,回头看效果一刷新,你看它也是可以的啊,有人呢,就喜欢这种写法,诶,首字母大写,你知道为什么吗?因为他觉得呀,这么写能跟开发者工具呼应上,同学你看开发者工具的呈现是大写的s school,那我注册的时候也是大写的s school,用的时候也是这个,你看对吧?哎,都能呼应上,OK,一个单词组成的名很简单,咱再说说,如果我这组件名是多个单词组成的怎么办啊,其实同学咱这么说啊,我现在这组建吧,用一个单词就挺好的,学校嘛,School多么的自然呢,但是我得给你讲多个单词怎么写,所以说接下来我改个名啊各位,我叫这个名前面加个单词叫my my school,哎,就是我的学校,好,官方是这么推荐的,官方说如果你的组件名是多个单词组成的,那么第一种写法就是全都小写my school,但是这样的话不是区分不开这个单词了吗?他说这么的多个单词之间呢,你用杠做个连接啊,我这么写之所以不对呢?
04:00
是在GS语法的层面上来讲,如果你的对象里的key呢,是有这种短横的啊,这种短横杠的你不可以直接写,你得用一个引号包起来对不?哎,那你用这个组件的时候,同学当然就my school,这呢MY-school就可以了,好,回头来看,刷新一波,一切正常。诶值得你注意的呢,是这儿对吧?各位,我写的是MY-school,最后又是把这单词啊都拎出来了,并且把那个短横啊给你干掉了,然后呢,把首字母这个M这个S都给你大写了,是my school对不?诶同学这块呢,你不用过多的去纠结,这是view的一个呈现,OK,诶咱们关注的是编码的时候咱们怎么写好,这是官方推荐的,如果组件名是多个单词的第一种写法,还有第二种写法,诶,那怎么写呢?瞧着各位不用短横作为连接了啊,这么的把这引号给它删掉,删掉不用这杠了,那这样的话还是区分不开单词啊,他是这么说的,每一个单词的首字母都要大写,包括。
05:00
第一个单词这S也大写,哎,那你就可以这样去写了,别MY-school了,大写的M,大写的s my school,好,我们看一下效果,回来刷新出事了各位,嗯,东西没了,而且控制台还报错,你看看他报的是什么错读蓝色框里的就够了,他说一个不知道的元素my school,同学有没有一种感觉啊,好像比又犯错了,我明明写的是my school,对不?各位,但是他最终却说这个东西找不到,我也没让他找这个呀,这是什么情况啊?说老师你说错了吧?嗨,你还跟我说什么?哎,官方推荐这种写法是吧?哎,两个单词啊,然后那个首字母都大写,诶说一下各位回来官方的推荐的并没有错,你这么给他起名字没毛病,你这么用也没毛病。说老师,那哪出的毛病呢?听我说啊,由于你没有用脚手架,人家推荐你这种方式啊,确实是对的,但是有前提,你得在脚手架环境里面去这么写,你现在这不属于脚手架同学。
06:00
你就是简单的在一个HTML文件里边,诶,简单而又粗暴的引入了一个v.JS然后你就开始写代码了,这哪算脚手架呀,这可不是脚手架,简单给大家渗透一下,啥叫脚手架呀?你得拿webpa搭建出来那一整套的工作流,那才叫脚手架,OK哎,说的再直白点,同学HTML里面直接引入这个VGS是不能够处理这种大写字母的,OK哎,所以说同学以后这种方式用的也不少,只不过在这儿呢,咱们有点行不通,你等到咱们讲到脚手架的时候啊,我马上就给你验证这事儿,哎,说老师那记不住啊,这东西太多了,简单给你总结好了来。关于组件名,一个单词组成的时候,同学第一种写法纯小写,第二种首字母大写啊,那么如果是多个单词组成的,各位可以用短杠这种方式叫keep kiss命名,还可以用这个camel case,注意我这C是大写的,啥意思,大驼峰,但是这块得有前提,需要用到view脚手架,哎,在这儿呢,我给大家写了几个备注啊,就是说有的时候吧,咱们同学呢可能会比较。
07:00
怎么说比较欠儿呢,各位就有人啊,他定义组件的时候说我那组件叫HR,或者是组件叫大写的HR,同学你这都不行,来我们试试啊,你就比如说你定义组件的时候不叫my school叫H,老师,那你看怎么的了呢?那我用的时候我也用H2呗,但是各位你心里边比谁都明白,这HR是不是本身HTML里边也有这元素,你说你非得定义一个组件跟人家HTML里边那个H是同名的,那你这样的效果就是同学你自己看吧,啊刷新一波,他报什么错误呢?不要使用,你看do not use,不要使用HTML中已经预留的,已经保留的这个元素作为你的组件名,谁呢?HR你看说的还不够明显嘛,所以说同学不要这样做啊,然后有同学呢,就钻空子说,诶,老师我这么做,嘿,我看HR我大写对不对,诶老师HML里边预留的那个呀,是小写HR,哎,我写的呀,诶是大写HR,同学不要企图这样蒙混过关啊,你最终实现的效果呢,是这样的。
08:00
同学很搞笑,错误也不报,效果也没有,我告诉你最终它是什么样子啊,就你写那大的HR,诶,他强制给你转成小写的HR了,而且里边还没有内容,OK,各位,哎,说老师,那我要写点内容呢,那你写一个呗,比如说你写个123,那你知道效果来回来是不,同学他当成普通元素去处理了啊,所以说各位我们就本着一个原则,尽可能回避,把你的组件名字起成跟HTML中已有元素同名的,知道不尽可能去回避,大写小写你都回避,如果实在回避不了了,同学咱拿多个单词用杠给它连接一下是不是也行啊。哎,OK,好了,再说另外一个事儿,同学挺有意思的啊,一个全新的配置项叫做内幕,好,先把这折叠起来,我慢慢引导大家,同学你说啊,这个红色框里边我在干嘛,是不是在定义组件,那你说绿色框里边我在干嘛,是不是在注册组件,通俗点说,同学,组件在哪定义的,嗯,在这定义的,那在哪用的,嗯,在这用的,那以我们目前这个写法啊各位。
09:00
你说组件的名最终最终其实是在哪儿指定的,有没有种感觉,在定义组件的时候,其实我们并不能决定它的名字,而是在使用的时候我才给你起一个名字,是这意思不?哎,但是有些时候同学我们希望呢,是这样一种场景,就是定义的时候我也能给它起个名字,哎,来同学慢慢写啊,在这呢,写成正常的思路,复制一份,走走,咱慢慢来啊各位,现在呀,它这个效果肯定是没问题的,那中间就不用写123了,回来看啊,现在这个学校啊,肯定是能展示出来,同学我问一下啊,View的开发者工具把我那个school识别成什么名字了,叫school,为什么呢?是因为你注册的时候,是不是你说了叫school,然后人家把你首字母咔一大写,那可不就是school了吗?哎,那我要这么写呢,学校,那你这就呼应上吗,也叫学校吗?那你说VIVO的开发者工具就认为,诶他叫啥学校,那你说就这个名字,同学,咱们能不能改一改呢。对吧,同学是有两个地方的啊,这个地方是你注册的时候叫什么名字,你注册的时候叫什么名字,那你用的时候同学是不是就叫什么名字,这两个红色圈里边咋的,你得呼应上,你得对应上,对不?各位哎,然后同学至于说view的开发者工具,为什么管这叫学校,那不还是因为读取这儿了吗?那我能不能把这儿调整一下,听明白我的话,我要把这儿调整一下,说老师那在这调整你就改这个呗,我这一改这不也变了吗?那这不也得跟着变吗?哎,同学怎么能单独的诶把这改一下呢?可以各位靠一个配置项啊,你在定义组件的时候多写一个叫name,哎,比如说名看到啊叫艾特硅谷好了,同学你这么一写不要紧啊,就是你这个组件我都不管谁在用,我都不管它是怎么注册的,我都不管它用的时候给它起了什么名字,总之就我这红色的组件,只要你用了,那么开发者工具里面提示的这个组件名一直都叫艾特硅谷,不叫别的。来看效果吧,保。
10:58
嗯,回来刷新,各位看艾特硅谷,当然了,那A得给你改成大写的艾特硅谷是不?那同学你品一品,我注册的时候叫什么名啊,艾叫学校,你注册的时候叫什么名,你用标签的时候就得叫什么名,但是view的开发者工具是看了这儿对不?如果你这没写,那他当然把这个就拿回来了,是这意思不?哎,OK,所以说在这儿呢,给大家写了一个总结啊,叫做可以使用内幕配置项呢,去指定组建在开发者工具中呈现的名字啊,我可没说就直接把组件报出的名字都改了,只是在开发者工具呈现的时候的那个名字,OK,一般谁会做这种事儿呢?各位,呃,第三方的组件库不想让你在这儿说你的这个注册的名字就是人家的名字,哎,人家可能会写这么一个内幕是吧,还有就是做一些比较大型项目开发的时候啊,防止这东西错乱对吧,你这说学校,他那也叫学校,还以为这俩是一个,其实还不是一个对不?还可以在这儿呢,去指定一个名字,OK同学,再说第二个注意点就是关于组建标签。
11:58
怎么写,我们之前吧,各位一直都是这么写的,我给你折叠起来啊,我这是叫学校,那我写的时候是不是都是双标签的形式,你看有开始标签了,诶有没有结束标签,有其实你还可以有一种写法,各位诶就是这么写啊,把这学校呢给他拿过来,不写双标签了,写单标签,然后让他自闭合,诶在这写个杠,对不?这叫有开始有结束,这叫啥?这叫自闭合,哎写一个就够了,你看保存一下,诶也可以,你看出现这个了吧,这也出现了吧,你看两个学校,两个艾特硅谷,OK啊说老师那以后那我就用这个吧,但是你要注意一个事情,同学,就如果你想用34行这种写法啊,你必须保证你在脚手架环境下,说老师那你胡扯,你刚才说了说啊,如果这么写呀,它是可以的,但是必须得在view脚手架环境下,那刚才我确实没有在脚手架环境下,那结果他报错了,那老师你这也没有啊,你学校一个杠,这不挺好的吗?同学,这里边有一个隐藏的bug,你看一下啊同学,如果呀,我都用这种写法,你看。
12:58
看着我写三个学校是不是都可以用,嗯,三个艾特硅谷说老师这怎么两个,有的时候吧,他这开发者工具啊,刷新不及时,你刷一下同学他就是仨啊好了回来,哎,三个是不是都可以啊,但是如果你要用这种写法,哎,学校我也写三个,你注意看啊,挺有意思的,回来同学我问你报错吗?不报错,但是页面只出现几个学校呢,一个借助V忧开发者工具刷新一波,各位只有几个,只有一个,哎说老师那这不行啊,那你这么一写,把3435这两行的全都废了呀,各位是这样的,如果目前在你这种环境下,就是你整个HTML,哎,然后你咔嚓一下子在上边引入一个viu,就这么简单的一个环境下,同学他是没有办法处理好多个这种自闭合标签的,但是到哪就行了呢,脚手架里就行了,明白不?各位哎,这会儿是有这个问题的,OK,把这个删掉,所以说是有两种写法的啊,说老师那跟这个还有没有什么关系呢?其实同学就这么说吧,如果你叫学杠校,哎,你叫学杠校复制,那你说这怎么写,那也。
13:58
叫学杠校呗,对不?各位,哎,他俩是两套,你先决定好名叫什么,然后再告诉你这个标签有几种写法对吧?哎,一个是自闭合,一个是有开始有结束,对不啊,说老师哪个用的多呢?这个随你的便是吧,好了,在这呢,我先正常写啊,这儿不叫做学校啊,这还叫做school来把它复制呢,把这呢也给它写上,然后呢,我写这种啊好,各位,还剩下最后一个问题啊,就是有一个简写方式,简写方式能简写到什么程度呢?你读一下就知道了,各位,我这在干嘛呢?诶,是不是在配置学校这个组件呀,哎,或者说定义这个组件呀,同学,你往后看可以简写为来瞧cost school等于,哎哟。
14:37
哎,同学,你发现谁没了,你如果想创建一个school组件,是不是得调这个view.extend然后是不是得传入一个配置对象,如果你想简写啊,各位直接定义school,然后呢,我连view.is ten我都不去调用,我直接写那配置项,哎,说老师就这也行啊行,你看一下效果啊各位来在这啊,你看好了,这个是我调view.a extend的时候传入的对象,你说是吗?好了,把它剪切走,然后点s ten不要了啊来在这儿删掉不要了,直接写这配置对象,哎呀,说老师你这能行,你这比点s ten你都没调用啊行,看着一个配置项,来两个配置项写完了吧,保存看效果啊喂,行不行?行,哎,我知道有些同学可能就说,哎呀,老师你这你扯个啥,你当时就告诉我嘛,对吧,你就别给我讲那个view.extend了,你就告诉我对吧,定义组件的时候,咱直接写个对象就得了,这个对象直接就是配置对象,什么view点我也不想知道,同学是这样的。
15:37
你听我说你这种写法表面是没有调用view.extend的,或者说的再直白点,程序员是没有调用view.extend的,但是最终这个东西还是被调用了view.extend怎么证明呢?同学,很简单,你看着我在这个view的源码里面呢,我去找到那个extend,我搜索一下方式,Ten是不是在这儿呢,在这儿呢,我给你打一断点,第八个OK,断点打完了吧,你瞧着各位,我把这源码给它关掉,回到这,其实现在断点已经卡进去了,对吧?来给它关掉,我重新来啊,回到这,右键打开,走,各位啊,断点是不是卡进来了,所以说你看啊各位不是说你没有调那个view.s extend,它最终就没有调用它是这样的,它底层啊写了一个判断在哪呢?就是在这个选项里面,如果你传入的那个S就这个东西,它直接就是一个对象,那么在这一步他会帮你执行一下view.extend那如果说是这种情况,就是你当时写它的时候啊,你已经写好了这个view.extend那么在这。
16:37
这呢,它就属于拿过来直接就用了,明白不?各位说的再直白点,你写与不写都行,但是最终他有判断的,你写了人家就不补了,如果你不写人家会补一个,那如果说最开始我就告诉大家,我说这个你就拿不来吧,对吧?view.extend你也不用知道,你就直接这么写,同学,那就会造成后续我们去分析那个原型关系的时候,你根本不知道有一个view.extend方法的存在,你根本不知道它里边的原理,OK,所以说不能把东西讲的太精简啊,说老师那以后我们写不写这个view.extend呢?同学,等我讲到单文件组件的时候,你就会发现以后我们根本就不写这个view.extend是吧?怎么简单怎么来呀,是吧,各位,哎,OK,那在这儿呢,撤回来,我还告诉大家呢,这个标准的写法是这么写的,好了,那我们就把这些常见的几个注意点啊,就跟大家说完了,诶那回来各位源码不能随便改呀,这个删掉对不好了各位,那这一小节呢,我们停一下。
我来说两句