00:00
好嘞,各位,那在这一小节呢,咱们给大家说说这个自定义指令在真正应用的时候容易踩的坑,然后呢,我们再把这个自定义指令相关的东西啊进行一个总结,我改一下文件名啊,它的编号呢是第一个,好,这个的编号呢是第二个,但是给它换个名吧,别叫DEMO了,叫回顾一个道操作,那这里边我们回顾的就是先操作元素还是后操作元素这事儿,对吧?来给这关掉,回到一里边,首先说说第一个坑,那就是指令名,同学,你看我现在这两个名啊,V-big和V-FB都是由一个单词组成的,不算那V杠啊,就说V杠后边的东西,你看big f半的。但有些时候呢,同学我们的指令比较复杂,需要有多个单词组成,你比如说第一个我不叫V-big,我叫V-big number啊,Nu br,对吧,那有可能啊,你就这么写了,Nu b就按照咱之前那个小驼峰命名法去写了,说老师那有什么不可以的吗?你这么写啊就不太好,同学你看着啊,我在这儿写一下,肯定官方不推荐这种写法啊,那你就这么写了,能怎么着呢,咱们看看啊,来打开你瞧一眼啊,各位,首先这块呢,它肯定是不好用了,你看控制台呀,它开始报错了,各位他说什么,有一个指令找不见谁。
01:23
Big number同学,我定义的时候明明写的是大写的number,对不啊,我用的时候也确实写的是V杠,然后big再写的那个大写的N,你说对吧?但是在这儿有一种感觉,同学你那大写他好像不认是不?哎说老师那我明白就是把这个给它复制过来,然后往这一写,这不就得了吗?那同学你看看你用的时候是小驼峰,N是大写的,定义的时候呢,N还是小写的了啊,而且两个单词咋的还混在一起了,这就不太好,我知道这样能用,但是这个绝对不是官方那个风格指南里边推荐的,他不推荐你这么写,那推荐你怎么写呢?各位你看都出现V杠的杠了,人家的意思是啊,多个单词用杠做分格,然后你直接写正常的number就可以了,V-big-number啊,说老师那明白了,就是这个东西复制过来,这也得这么写呗,嗯,那你看你写呀。
02:19
哎,你看这是个坑,说老师这怎么办呀?同学,我问你一下,现在35~38行啊,你是不是用的简写形式?同学,你还原成最完整的那个写法,诶,我问你对象里面所有的key是不是都是字符串,所以说你应该给big number包一个引号,然后你再还原成最完整的写法,是不是得有冒号,然后是不是得有function这个关键字?同学,这是最完整的写法吧,一点毛病没有。同学,对象里边有一个KK的值是什么?Big-number对吧?可以这么写,要求是你得用引号给它包起来啊,值呢,值是一个函数。那再精简一点,同学方式删掉冒号删掉是不是可以这么写呀?哎,只不过呢,好像之前我们没这么写,我就觉得很神奇是吧?其实同学你之前一直在用简写形式,就是不写这个引号,但是你可要知道,如果你的K里面出现杠这种东西了,那咋的你就不能用简写形式喽,都得这么写,说白了你那F办的呀,其实也得这么写,但是一般来说我们都喜欢这个简写形式,对吧?诶推荐你这么用,你看这回就可以了,各位,诶没什么问题,所以说这就是指令名的问题,OK,多个单词这么一个事儿,好,那这样啊,各位,我不破坏这个东西,我复制一行,我把这个呢给它注掉,我告诉你得这么玩是吧,然后我把这个呢也给你复制一行,然后把这个呢也给你注掉,就告诉你还可以这么写,这块呢,我还原成那个正常的那个big那个写法,OK,好了,这个问题说明白了,再说另外一个问题,各位,就是关于啊,这个指令回调函数里的this问题同。
03:59
跟我们曾经说过这么一个事儿,就是所有由view所管理的函数里边的this不用我们去操心啊,直接就是这个实例对象VM对吧?那各位你看一下啊,我输出big里的意,哎,我在输出谁呢?F半这个半的函数里的this啊,这会再来一个是F半里的那个半,好了,再给它复制一份,再写这是F半里的谁呢?Inser好,把这个再复制,再看这个F半里的那个update对吧,你看一下各位,你看看他们的this啊,都是谁啊,来刷新一下啊,这有问题是因为这块我没改是吧?来改过来,走,把这个number给它删掉保存,回头你看一下各位,来我再点一下更新,你看的更明白了,同学,你看他们都是谁啊。
04:53
千万别踩这坑啊,他们可都是window啊,哎,舒老师,不对呀,我挺听话的呀,你看这东西我写的也不是箭头函数啊,同学,你听我跟你说,这块跟你写不写箭头函数一点关系都没有,因为所有指令相关的回调里边的this肯定不是VM,是谁呢?就是window,也就是说同学,这个this,这个this view没管你那事儿,没有帮你去维护这个this,哎,说老师你说为啥他不帮我维护这个this呢?同学你想想,只要出现在这个directive里的东西,是不是都是指令?那我再问各位,你说指令是不是就是让你去操作元素的,我把元素给你了,我再把谁给你,你绑定相关的信息给你,剩下的事儿我一点儿都不管了,完全交给你了,对吧,你也别拿我那个VM,你拿了也没啥用,说老师那我需要里边的数据怎么办呀,各位需要数据是不是都以这种形式给你传进来了呀,是吧。
05:53
啊,所以说这块你要注意各位,这个this的指向是谁呢?是window啊,那这样吧,同学,我把这个呢删掉,这个也删掉,这个也删掉,我留一个就得了,行吧,在这给你写一个注释,叫做注意此处的this是谁呢?是window,好了,完活还有一个事儿,各位,就是整个我们开始讲指令的时候啊,无论是你的big指令,还是你的F半的指令,都是属于局部指令,什么叫局部指令呢?就是只能给这个view实例对象去用,别人用不了,来举个例子,页面上我再整出来一个容器ID呢,叫二里边呢,我还想用这个东西,哎,Input写在这啊,回车回车还是这F办的哈,来。
06:45
那看一下吧,同学,就得有一个vu实例去管理它,你说对不?我把这个呢给它折叠起来,在这儿呢,我再创建一个VU实例里边这回不叫N了,换一个叫X,那在这儿呢,同学我绑定的是谁呢?X,你觉得各位来这会也改一下,你觉得就这个实例。
07:02
能用V-F半的这个指令吗?肯定不能啊,所以说你看他报错了没有找到对吧?那怎么把这个指令变成一个全局指令呢?同学我就这么跟你说,跟咱们讲那个过滤器的时候一模一样啊,那你说咋写,同学一定是从view的身上哎,去找谁呢?叫做directive,注意这块就没有S了,叫做directive啊,跟过滤器要不咱咋说一模一样,各位你看看啊,全局的过滤器啊,你定义的时候叫做view.filter你在里边写局部的时候,它叫做什么呢?Filter是不?各位好了回来,那这呢叫做directive,你比如说同学我就想把这个嗯,F半的变成一个全局的指令,那怎么办呢?来,各位首先把他的名字呀拿过来。哎,在这写作为第一个参数传进去,然后你后边不是写了一个配置对象吗?你把整个这个配置对象啊都给它拿过来,然后往这儿一写,作为第二个参数传进去就可以了,对不?各位来,那我们改个名吧,各位叫F半的二或者这样我就叫F半的啊,然后我把局部的这个吧,给它撤掉啊,局部的这个给它整个都给它注掉,好嘞,各位,这回你的F半的不一般了啊,是个全局的指令了,这里边的东西该怎么写还怎么写,这时候你发现同学俩容器咋的都能用这F半的了,是这意思不?哎,好了,回来啊,说老师,那这就是全局的写法,那要是函数怎么办呀,函数更简单呀,各位,比如说你这是不是一个函数,这个big number,那你就把这个直接拿过来,把第二个参数啊,别写对象写函数啊就可以了,OK好了,那再给大家演示一下啊,回来慢慢的啊,把这。
08:55
个重新解开,然后我把这个big呀,定义成一个全局的,那我就这样先把这个东西啊给它注掉,然后再写一个叫做view.direct然后传谁进去呢,这个big名,然后你就把它的函数作为第二个参数给它写进去就可以了,别忘了function这个关键字好了,OK,这就写完了,那么你这个big指令的同学就是哪都能用了啊,我把这个呢也给它注掉,好同学我留一个吧,行吧,我留一个,我把这个呢给它删掉啊,然后这个呢,这个呢,这个正常写,这个也正常写,我把全局的那个给它注掉,诶给你写在这儿走,叫做全局指令加个词儿定义说老师哪个用的多呢?同学,看你场景吧,如果你这个指令呢,是有很多特殊功能的,那可以怎么讲,定义成一个全局的,让所有的这个编码人员全能用,但如果说你这个东西啊,只是你自己在用。
09:55
最好定义成一个局部的,OK,同学,等我们讲了组件之后啊,你就会发现每一个组件呀,都可以有一些自己的这个局部的指令,我现在同学没有体现出来组件,你明白吧,现在我就是一个VM,两个VM,那你看借助开发者工具啊同学你看一下走有几个呢?你打开是不是两个VM,咱之前也说过,一个应用不可能出现两个,对不对啊,那这怎么回事呢?啊,F半的没有找到,嗯,那是因为这同学我把这注掉了对不对?好,那我就把这个有实力啊就给它删掉,我只是为了演示一下问题行不?各位我觉得这块也没多难,我演示了之后呢,大家也能听得懂,因为你是有过滤器这个基础的,所以说我就不把那么多的东西都给大家留下了,这容器呢,也让他拜拜对吧,正常来说肯定是一个容器,好,这就是关于全局指令啊好同学,那么最后呢,我们总结一波吧,行吧,各位来看一下代码报错不啊,不报错还可以来那咱总结一波啊同学,在这儿总结一下所有指令相关的啊,来吧,定。
10:55
一的语法同学,局部指令啊,是这么定义的啊,第一种就是directives,直接写什么呢?指令名里边写配置对象,还有一种简单的写法就是directives,然后里边呢,哎,同学这块啊,你要注意这块咱有点问题,给这改一下,Directives还是写指令名,但是这块不写配置对象了,这块写什么呢?哎,叫做函数,其实说的好听一点,应该叫做回调函数,对不对?哎,啥叫回调函数?我们定义的,我们没执行,但是最终这个东西执行了是不?各位好啊,那全局的就是这么定义,叫做view.directive没有S指令名配置对象,或者是指令名回调函数是吧?好看这个配置对象中常用的三个回调啊,第一个就是band指令与元素成功绑定时调用,那么第二个呢,就是inserted,指令所在的元素被插入页面时调用啊,还有一个就是update指定所在的模板呢,重新解析时被调用啊,有两个备注,指令名定义时不加V,杠用的时候必须加V。
11:55
杠指令名,如果是多个单词,要用keep case,这个keep case就是刚才你说的那个短横杠连接,你比如说user-name,这就是keep case命名,如果你写的是这个叫做user,然后呢再写一个name,这就属于camel case,就叫驼峰命名法OK view里面的指令推荐用这个OK,那同学我们就把自定义指令相关的东西呢,就都给大家说完了,那这小节呢,我们停。
我来说两句