00:00
好了各位,那说完了这些常用的内置指令之后啊,我们再来聊一下view里面如何去打造一个属于自己的指令啊,也叫做自定义指令,在真正讲这部分内容之前啊,我得跟各位明确一个特别重要的事儿,什么事儿呢?就是接下来我自定义的过程当中,所有对DOM元素的操作,这回都得我自己亲手去写了。说老师不对吧,咱们学习view的目的不就是想让view帮我操作DOM吗?那怎么到了你这一小节课还告诉我这DOM元素还得自己亲手去操作?我没听错吧?一个讲框架的老师居然告诉我盗M元素还得自己操作?老师,那这样的话我用view干嘛呀?我不学了呗,直接用j query多爽啊,写起来还简单,哎,同学,你听我解释一下你就明白了,来,这个指令都用过吧,它能干嘛?是不是控制元素显示和隐藏?那我想问的是,它是怎么能实现元素显示和隐藏的呢?不还是view帮你动了盗墓元素身上的这个display属性吗?是这意思不?各位那你看你琢磨琢磨,之所以人家的V杠受教内置指令,那是因为这个指令的名唯有作者定的。
01:09
这个指令背后所隐藏的操作盗墓元素的逻辑也是谁旅由作者写的,那你说我们现在在干嘛呢?是不是学这个自定义指令啊?那也就意味着如果有一天你弄出来这么一个指令叫V杠,哈喽,那同学我问你啊,这个指令名谁定的,我们定的,那我再问你,这个指令背后到底如何去操作盗墓元素,你说等着谁写呢?嗯,是不是等着我们去在这儿写的呀?你体会体会是不?各位啥叫自定义指令啊?明儿你定的指令背后操作盗墓的逻辑也是你写的对吧?各位,OK,所以说各位你觉不觉得啊,从某种程度上来说,View里的自定义指令其实就是把原生操作盗M进行了一次封装,我写了四个问号,就代表四次操作盗M,对吧?最终变成了一个V-hello这么一个指令,你同事如果也想进行这四个操作,同事不用自己操作盗了,同事用什么就可以了,V-hello是不是就可以了?诶你看这回就把这个问题就聊明白了吗?好,我们打开这个。
02:09
个16走里边呢,给大家准备了两个需求,在这一小节呢,我们先关注这个需求一啊,读一下说我要定义一个V-big指令,它的功能啊和VT的类似,但会把绑定的数值啊放大十倍啊,所以说我叫了这个名字嘛,V-big对吧?Big这词本身就有大的含义啊,来简单写写啊,比如说呢,我有一个有实例,里边存着一个N,初始值是一,我想把N呢展现到页面上,说老师那差之语法呗,不,咱们再学指令,用指令去写,指令是不能脱离元素存在的,对吧?所以说我得写一个SPA得有元素,元素里边你是不是可以用这指令啊,好,绑定的值呢是N,那这样的话,页面上肯定会出现这么一个N,对吧?那我完善一下各位,我写一个HR,让它看起来好看一点啊,叫做当前的N值是,然后再来这一堆,好把这个呢再复制一份,不叫当前的N值式了,叫做放大十倍后的N值式。
03:09
哎,那这也得改一下,不叫text叫做big,下边再准备一个按钮,让N呢能够加加,叫做点我N加一里边写一个逻辑走click n呢加加,OK,写完了咱看一下效果啊各位打开。这块是正常的,但是这儿呢,没有展示东西对吧,没展示也很正常,你用那指令它不存在呀,啊,我点一下这个加啊,OK也是没问题的,好了,刷新一波,去控制台看一个错误,同学,你看他报什么错误,说解析一个指令失败的,注意这个单词directive有指令的意思,来有道查一下directive看是吧,有指令指示的意思,哪个指令解析失败了呀,叫做。Big指令,注意他报错报的不是V-big,而是big,有两个情况同学是没有前缀的,第一个情况就是你写代码写错了,人家给你报错,人家报的错误是不带V杠的,还有就是各位你去定义那个指令的时候,不要再写V-big了,定义的时候你不得给指令起名字吗?这指令的名字直接就叫big,用的时候你规规矩矩的加上V-big好了,这不墨叽了回来,各位接下来定义你的big指令吧,怎么写呢?还得靠一个全新的配置项,它的名字叫做ER directives,注意这是带S的,诶,是一个复数的形式,它的值呢,也是一个对象,同学你品味一下啊,就咱们写的这个什么,呃,计算属性啊,监视属性啊等等,这些是不是都是一个配置对象啊?哎,这块都写的是一个对象,好,那接下来在这个绿色的对象里面,你就可以写各种各样你所定义的指令了,我们先写第一个就是V杠,Big不要加。
04:53
这个V杠呢,直接把big拿过来,那关键是它的值我得怎么写呢?这块呢跟大家说一下,它是有两种写法的,那么第一种写法呢,就是在这儿写成一个对象,对象里面继续去配置KY6 KYKY6有很多的配置象都是为这个指定服务的,那么这种写法呢,就是写起来麻烦,但是人家的优势呢,就在于能够处理一些细节上的问题,与之对应的还有另外一个写法,就是直接把big的值啊写成一个函数,这种写法的优势就在于写起来简单,但是它的弊端呢,就是它不能够处理一些细节上的问题,说老师呢,我看你接下来怎么选,是这样的,需求一怎么简单,怎么来写成函数式,那么需求二呢,咱得这么说,你用函数啊,你也实现不了,为啥呢?因为需求二里边我刻意的给你制造了一个细节上的问题,让你没有办法用函数写下去,诶自然而然就得用那个对象的形式了,OK,好嘞,各位,那把这行代码呢精简一下。
05:53
毕竟是对象里的一个方法吧,方式删掉,冒号删掉,这是GS语法层面的一个精简,你说对不好,各位就你写到这儿,你的代码已经不报错了,来回头看。
06:04
没有错误了,很简单,你用了这个自定义的V-big指令,而且呢,你也确实存在这个指令,人家为什么要报错呢?但是后边没有东西是正常的,就在这个位置,因为你的指令里面什么操作也没干,你说对吗?讲到这儿啊,可能有一些同学说,舒老师,我能不能这么理解,就以你目前这种写法,所谓的自定义指令,它就是个函数,哎,是的,它就是个函数,哎,OK,舒老师那个函数有被调用吗?当然有啊,Conslo输出一下什么呢?这个第一个回头看对吧?同学,人家调用也很正常,你用了人家这个指令,你说人家能不掉这函数吗?那你要说连我用都不用,那同学那肯定它不掉对不?哎,好了,回来走。那现在同学我们的关注点啊,就在这儿了,来,你瞧着V-T的功能是把N拿到,直接放在SPA元素里面,作为一个文本的呈现,那我现在就是把N拿到,把它乘以十放大十倍后放到里面,作为一个文本的呈现,是这意思,不说的再直白点,页面红色圈圈里边要放东西,靠谁把东西放进去,就靠这绿色的函数,而且非常肯定绿色的函数还被调用了,接下来你把粉色的箭头一实现是不是就可以了?那问题是怎么写呀?
07:19
可能有些同学啊会想到这儿说,老师,咱们之前讲过这个计算属性是吧,计算属性的简写方式啊,是这么写的,我只需要呼唤一下full name的名字,那么这个计算属性所对应的这个绿色的函数啊,就要被调用,调用之后啊,它就有返回值,那就把这个黄色的返回值啊,直接放到这儿就去做呈现了,老师,那我觉得这块啊,好像也是这么玩的,我是不是有返回值啊,我返回一个900,老师,我猜哈,这个死SPA里边就应该出现这个900了,是这样吗?看一下。显然不是说,老师你这讲了个啥呢?他要是一样,你带着我看看也行。同学,我说这么一下子就是防止你把之前的东西跟现在讲的东西给他混了,说老师你不说我不混,你一说反而我混了。同学,我可以回避这些东西,对吧?每讲一个东西的时候,不跟前边形成对比,就怕你乱,我连提都不提,但是最终你可要知道啊,你拿尾又去写一个整个大型项目的时候,这些东西要同时使用的,OK,各位,你现在不捋顺,明白了,早晚你得乱,是不不是靠返回值一定要注意,同学你信不信?很多的人在写这个指令的时候,写着写着,哎,很自然了,就写成返回值了,不是返回值啊,好了,不墨迹了。同学,不靠返回值,那靠啥?诶,我告诉你,就靠这个big函数所收到的参数啊,它收到的参数里面呢,有两个人比较常用,我先用A和B呢,给大家接收一下,然后呢,各位我输出这个A和B,你瞧瞧这A和B啊,它分别是什么来走。
08:48
同学告诉我A是什么啊,你说老师啊,这个A呀,是一个span,那你这么说呀,一点也不标准,这span是真实盗墓还是虚拟盗墓呀,对吧,你这没说明白呀,啊,我直接告诉大家,这个A是一个真实的盗墓元素span,老师你怎么证明?
09:06
对吧,不能你说是就是啊,好两个方式证明同学,第一个方式我不写conslo,我写DR,哎,输出这个A,你就能看到他最真实的样子,打开他身上拥有所有真实盗墓的属性和方法,那你说它不是一个真实盗墓元素吗?这是第一种验证,第二种验证啊,是这么玩的,各位还用log,但是我这么写A是否instance of谁呢?HTML element,诶,这块写一下element同学,Instance of是判断什么呀?谁是不是谁的实力,对不?哎,那你看一下最终它的输出是。那你看这就强有力的证明了,各位,这A是啥呀?是一个真真实实的倒梦元素是不?所以说同学行参别用A了啊,人家文档里用的是这词儿,Element啥意思?哎,元素,好了,那我们再看看这个B是什么啊?来回来刷新同学,从语法层面上来看呢,这B应该是个对象,那对象里面包含着什么呢?同学,你看有这么多的属性是吧?说一下这里边包含的属性挺多,但不是说所有的东西我们都用是吧?来各位,我们更关注的就是这个人谁value value是几?一一指的是谁?各位就是V-big这个指令所用到的这个值NN是几啊一如果你把这N呢给它改成99,你再点保存回来,你再看这个对象里的value是不是变成了99是吧?说老师,那其他的东西是啥呢?其他的东西呢,无关紧要了,你看一下这啊各位expression啥意思叫表达式。
10:44
表达式为啥是N呢?这很正常,各位,因为你的代码里边V-big等于你,那表达式写的可不就是1N吗?那如果你这么写,各位N加一再加二,那这回你回来再看,各位打开你看表达式变成了什么,N加一再加二,说老师那值怎么也变了呢?各位,那99加一加二可不一百02嘛,对吧?再看这这啥意思呀,这是你定义时候的名字,这是你使用的时候应该使的名字,叫做V-big对不?那所以说同学你看这么多东西摆在你面前,我们更关注的是啥呀?其实就是这个value流啊,他把别的信息也给你了,哎,就是你那个指令叫什么名啊,用的时候叫什么名啊,我们就不太关注了。好了,各位,那文档里面这个行参它也不叫做B,人家叫这词儿叫做班顶,班顶什么意思呀,叫绑定,那也就是说同学他把这个元素和这个指令啊,要进行一次绑定,各位啊,你可听我说,我说这绑定不是指我们之前学的那个V-B的V。
11:44
他办的是给一个标签里边的某一个属性绑定值用的,我这里边所说的绑定呢,是指元素和这个指令之间的一种关联关系,说的再直白点,各位,绿色的v big凭什么不去控制粉色的button,是因为你没有把v big写在粉色的button里面,你说对吧?你不写在这个按钮里面,那么呢,就不把这个v big和这个粉的button做关联,所谓的做关联就是把它俩怎么办绑在一起,就这意思,所以说这个呢叫做绑定对象啊,那我们更关注的是它里边的谁呢?这个value,那么各位,现在你考虑一下,这个死SPA真实的盗墓元素被你握在手里了,那么绑定的值你也可以通过点Y流取到,那接下来呢?
12:29
就开始你的原生DOM操作表演了,Element点是不是可以用这个inner text是不是可以修改这个原素里边的文本内容啊,它的值是什么呀?就是咱们这边这个单顶点谁呢?Y6,但是别直接放乘以十给它放进去是这意思不OK,这行输出先干掉同学功能实现了,回头瞧啊,说老师那怎是这么一个值呢?1020,这什么情况呢?来那咱说说啊各位你这是不是写的是N加一加二啊,那你这是啥?那算完可不一百02吗?那102再来个零对不对,那不就放大了吗?啊,你捋顺一下这个逻辑啊,回来那各位咱把这呢,别写这N加一加就写N,哎,一上来呢,比如说让它是一吧,好,回来看N是一,放大十倍后是吧,好考虑一个问题,各位,就是当我去点这个按钮的时候呀,这块肯定得变,我问你蓝色的地方变不变。
13:21
红色的地方是肯定变的是吧?那同学你说蓝色的这个十变还是不变,是不是取决于这个big函数还会不会再被调用了,是那意思不好,那我们来看一下啊,Lo输出这个big,我们瞧一眼啊,一十来点加走同学,事实证明了什么?证明了这个big函数会被再次调用。那同学咱们就得整明白,这个big函数到底什么时候会被调用呢?来贝函数何时会被调用,其实呢,同学它是有两个时机的,哎,我先说第一个时机,标准点说啊,应该这么说,叫做指令与元素成功绑定时会被调用,还是我刚才说那字儿啊,叫绑定,意思就是指令和元素得建立个关系,所谓的建立关系就是成功绑定。朱老师,那啥叫不成功绑定的,要么是你这个元素写的有问题对吧,要么是你这个指令写的它不存在,那他俩就不能成功绑定了,对吧?其实这儿呢,就是我们之前说的什么呀,就是一上来就怎么怎么地了,说白了就是初次遇见这个指令和这个元素要建立一个关联关系,对吧?一上来啊,还有一个时候,同学,我告诉你,这个V-big所对应的big函数也会被调用,什么时候呢?琢磨琢磨,同学,刚才我点了谁,是不是点了红色这个按钮,点了红色的按钮是不引。
14:45
及N的变化,那N只要一变,我问你同学那个指令V-big指令用到了谁,是不是用到了N,那你说这个指令所对应的函数是不是就得重新被调用,哎,那就有人这么总结了啊同学你看啊,他是这么总结的,我可没说这么总结对啊,有人这么总结,他说指令所用到的数据被修改时,或者说发生更新时啊,数据发生什么呢?更新时,同学你说这么说对吗?
15:15
貌似特别对,我一点按钮N就变,N1变V-B就用了,那一用了就得重新调,你看指令所用到的数据发生更新时多好啊,老师这么写不对呀,同学要听你这么说,那就是除了一上来的那一次,以后只要N发生变化,那V-big对应的这函数就得重新被调用呗。你看着我给你整一个特殊的情况啊,我在这写一个name,存生学校的名字叫上规谷。好了,同学你看好了,我在页面上要展示这上规谷,直接写差值语法,写这name OK,写完了吧,各位,一会儿我改谁呢?你听好了,我改这name。各位N从来我就不动,好吧,一会儿我这按钮我肯定不点,我改的就是学校名,你看看这个贝函数还会不会被调用了,回到这儿,同学,我借助V的开发者工具去改,打开这上硅谷后边加个123敲回车,同学,这是不是重新渲染的?哎,那看这嗯掉没掉掉了,那同学你这么总结对吗?
16:12
我V-B用到是N吧,那我问你N遍了吗?没有,那怎么它还执行了呢?所以说这么总结有点不准确,最好啊,应该这么总结,叫做指令所在的模板被重新解析时,这么说就对了。来同学,我问的是啊,无论我修改的是内幕还是这个N值,都会引起红色的模板发生重新解析,你说对吗?那整个模板一重新解析,模板里面是不是用着这个v big呢?他为了给你拿到一个精准的值不犯错误,他只能去调一下big,你说对吧?哎,那咱们这一小节就讲这么多行吧?哎,咱练练手,同学你回头感受一下啊,你看指令是干嘛的?同学,咱们之前讲view的这个模板语法里边咱们可说过这个东西指令语法,指令语法干嘛的?你看功能用于解析啥标签,那当年我们所说的标签,我问你各位最终落到实处,你告诉我是不是盗墓元素,那同学指令语法就是操作盗墓元素的啥?
17:12
属性盗墓元素里的内容,以及给盗墓元素绑定事件,你说对吧?所以说同学既然指令就是在操作盗墓元素,那你看人家多给力,Numberone打头的第一个参数,我就把一个真真正正的盗墓元素给你,那随你怎么办,对吧?绑定事件您绑去,改样式您改去,改文本您改去,你说是这意思不?哎,你看第一个就是把元素我给你,那既然你要对元素进行操作,那你绑定的值是多少呢?诶,我把值给你,我不仅把值给你,我把本次绑定的所有信息我都给你,对不对?你指定叫什么名,你表达是咋写的,我都给你,不管你用不用我都给你,是这意思不?哎,好嘞,各位,那这一小节呢,我们。
我来说两句