00:00
好嘞,各位,那在这一小节呢,咱们把这个需求二啊给它实现一下来读一读啊,定义这么一个指令叫做V-F半的,注意啊,多了个字母F,它和正常的V杠半的功能类似,但是这个F半的呢,它多了一个小功能,就是可以让特的元素呢默认获取焦点。说老师那为啥叫F的呢?因为这个词啊,各位来fo是不是有焦点的意思,哎,我取它的首字母了啊,Focus的首字母F的,好,咱写写啊各位在这呢,我写一个HR这个分隔线,分隔线的下方啊,代表我在实现那个需求二好,我先拿正常的那个V杠半的写一写啊绑定Y流属性值是N好了,回到页面呢,看一下效果,诶在这儿呢,是吧,默认有值了,而且你更新这个N值的时候,它下边也跟着更新是不?嗯,这个big呢,总输出干扰我们,所以说在这儿呢,我注意一下啊各位把它临时呢注掉好来吧,接下来用的可不是半的叫F半的,没有这个指令呢,那就去定义,根据我们上一小节所学的各位F半的直接写成一函数,函数会收到什么呢?指令所在的元素以及本次绑定的信息,对吧?想让你的input框有值吗?哎,那你就得这么写。
01:22
Input框点Y6等于完顶点Y6,你注意啊,同学,这行参都叫element,但是这个element是指那span,这element是指那input框是吧?这就不墨迹了,因为你的f band不是写在了这个input元素上吗?对不对?各位好了,来看一下效果啊,跟刚才一样,一上来有值诶一更新这也行,那就差一个功能了,各位是吧,就是一上来让他诶默认获取焦点。然后呢,之前在线下讲的时候啊,有同学反应特别快,说老师来吧,走你啊,自动获取焦点,写完了老师来看着一刷新上来了,啊同学啊,是这样,你要这样写呀,我这个自定义指令就玩不下去了,你要是这样实现的话,各位OK,那我就不用再写什么它的对象形式了,对吧,那有一个点就没有带出来,还有一个就是同学你在input里边直接写这个,它不是到什么浏览器上都好使,咱不考虑用这个是吧,方法肯定有很多,现在主要练自定义指令啊说老师那接下来怎么办呀,靠写JS代码实现的,同学音input的元素我都给你了,那你说接下来是吧,同学就把一个input的元素给你,现在我让你获取焦点,你说咋写特别简单,这个元素点同学还是刚才那单词fo CU focus,是不是获取焦点说老师这就写完了呗,嗯,是的呀,理论上确实是写完了呀,是吧,你看我一说理论上是吧,来看一下效果,各位刷新走。
02:50
完了没效果。哎,那同学怎么排查问题呢?有些同学可能会想到,哎呀,老师是不是把这单词写错了呀,同学没错,这单词要真错了呀,你看一下,他在这儿会飘红的,这方法找不见,所以说同学可不是我们把单词写错了,说老师那我知道了,就是由于某种原因呢,这40行啊,他没执行。
03:15
不对,我告诉你同学,40行绝对执行了,说老师,那还有这么神奇的事儿吗?这行代码执行了,哎,完了,这个input元素就不获取焦点,这也太奇怪了吧,各位,奇怪的事儿呢,还不止这一个,你看着来。一上来没获取焦点吧,我点一下按钮,诶你看他又获取焦点了,说老师这什么情况啊,来各位是这样,咱们不在这个里边啊,去探讨这个问题啊,咱们给它关掉,自己写一个干干净净的网页,不用view原声去写一个逻辑,然后呢就能把这问题说明白好写一按钮,按钮啊有一功能叫做点我创建一个输入框,给按钮一个ID叫TN1段脚本,首先呢,获取这个按钮好,随后绑定一个点击事件,写箭头函数里边干嘛呀,创建一个input元素,用最原始的写法啊,在这儿直接写document,点儿有个API叫做创建元素,写上元素名,随后同学我问你,如果我什么都不做了,页面上。
04:32
会出现这个input框吗?绝对不会,没有放入页面对吧?我在这呢,也就不再准备什么div了,把它放里面去,我就直接往那个body里面放啊,那你说我是不是得这么写呀,document.body然后点a child把谁放进去啊,Input。来我们看一下效果啊,打开。控制台呢,也开好啊,来走着input框是不是出来了,好继续提出一个需求,就是input框出现的时候,让它自动获取焦点,来写着input点是不是有这个API叫做focus,好瞧效果,回来走你出现并且获取焦点啊说老师这不很正常吗?不就应该这样吗?那刚才怎么不好用呢?来回来各位你听我说第14行的这个代码获取焦点,不是说你写在什么地方都行的,你看着我把它换个地方,各位走着放在这啥意思?
05:31
创建了一个元素,告诉他你要获取焦点,随后我再把它放入body中给你做一个呈现,你看这回它的效果就是啊。走会出现,但是咋的,你那个获取焦点的代码执行了,但是不奏效。说老师,为什么呢?你想想各位音into的这个元素,你只有放到页面了,然后你才有资格谈,说用户点击它了啊,或者说用户要操作它了,他得获取焦点,你说对吧,各位你不能纸上谈兵啊,所以说你像这种操作一定要放在哪儿第14行后边去执行,放在前边呢,那不奏效,说老师那明白了,就是什么东西都得放在第14行以后去执行呗,也不是的,各位大部分的操作啊,在十五行啊,现在应该是16行了,对吧?啊,就在这行之前都可以,你比如说你写几个,各位我想让这音input出现的时候啊,有一个样式,那我就这么写吧,点2CLASS name,比如说起个名字叫做DEMO,那在上边呢,我简单写一个style,然后在这儿呢,写一个DEMO,给他一个背景色吧,背景色是orange橙色,好,那你看能不能奏效呢?回头看一下,一点是不奏效。
06:48
哎,不一定说什么东西都得放在它之后是吧?还有什么呢?比如说同学input.value干嘛呢?指定它的初始值吧,那你看一上来走99是不是也奏效,哎,回来还能干嘛呢?同学正常的都可以input点,比如说绑定一个交互的事件click,在这写一个箭头函数里边呢,我就做一个alert,一好你瞧一下效果啊,各位回到这儿走啊,背景也有值对不对?一点你看也能弹窗,所以说大部分的在这儿还是可以的啊,但是有一些就必须得放在它之后,其实还有一些常用的,比如说给大家说一个啊,就是如果这个input元素出现了以后呢,我让input这个元素的副元素背景色是天蓝色。
07:32
那我得怎么写呢?来input点是不是它的parent element呀啊,然后点什么呢?Style,然后再点什么呢?Background color,我在这就不写什么样式的类名了,直接变成蓝色啊,SKYB是吧,那你看一下效果呗,回到这一点是不?但是如果你把这段代码写在了他之前,那可就不行了。同学,而且还会报错的,你看一下。不能够读取style在谁身上啊,在这个no身上,也就意味着各位你得到第24行代码,你的音input的元素才能放入页面,我没有放入页面,我哪知道的,我负极元素是谁呀?是那意思不?我这结构还没形成呢呀,所以说你看22行代码你就得放在这儿,它刚才的意思是,如果你放在这儿,各位你去测试一下就明白了,在这儿呢,我把它拿走,我在这儿呢,做一个输出,完了你看好了,各位input这个元素的副元素,你看看能不能拿得到走,它是没东西的,对吧?一旦你把这段代码给它放在这个的后方了,那就可以了,空行删掉,往前调一下,瞧着一走,他就知道是body OK,这回明白了啊,一句话啊,不是代码错了,而是执行的时机有问题,好,把它关掉啊,那回到这儿就能解释清它了,来咱聊聊吧,各位代码没问题是。
09:00
执行的时机有问题,那你就得分析一下这个F半的到底是什么时候被调用的对不对?F半的只要一调用,那我绿色框呢,是不是就执行了啊?那分析分析吧,这个F半的什么时候调用?我们上一小节聊过了各位两个时候指令与元素成功绑定时,哎,就是我们说的一上来是吧?同学我告诉你就是在这儿出的事儿,你读读绿色框里的文字,叫指令谁V-f band与元素谁input成功怎么的绑定时,同学我并没有说成功,放入页面时,OK,各位,也就是说view干活呢,是分好几步的,View拿到了这段代码,然后view说,哎呀,小伙子写的是音input的元素啊,那你指令用的是什么呀?啊,叫做V-F半的,好,那我就把这个元素和这个指。
10:00
令进行一次什么来着,叫做绑定,同学绑定成功了,仅仅代表着在内存里面建立了这个关系,你的input元素并没有跑到页面,那此时此刻你在调这个element.focus同学呢,当然是不奏效的呀,是吧,可能同学哎想着想着同学说老师不对不对啊,你看你刚才这是属于页面上,你看老师啊,这是你的脚本,我折叠起来,刚才你这例子是属于页面上压根没有input框,完了你一点的时候,哎出现的这个问题,什么先放页面后放页面,但是老师我们这儿不是啊,老师,我这input框明晃晃的写在这儿呢呀,我这音input是我写好的呀,你怎么刚才感觉你说着说着把我套路了呢?同学呀,是这么回事儿,来,你琢磨琢磨我这一堆红色的东西啊,我问你各位是不是得经过view的编译啊?也就是说你20行确实写了一个音input,但是我想问你,你这音input是不是模板呀,模板不是说直接就往页面上放的呀,是吧?你最终看到的是模板编译的后果啊,所以说同学是这个绿色的这一小条得交给view对吧?绿色以外的咱不研究绿色这一小条交给view,然后view分为好几步把活干完了,第一步当然就是指令与元素的绑定,绑定成功了,各位,那只是说啥呀,关系建立起来了,页面上有input吗?没有对吗?各位,所以说你调这个肯定不好用,说老师那为什么回头。
11:33
诶,它又获取焦点了呢,那你再分析呗,各位你点了按钮改了谁呀?改了NN只要一改,我问各位整个红色框的模板是不是重新解析,那一重新解析,诶同学是不是又遇到了它呀,又遇到了它是不是还得再一次的去调这个F半的呀,但是重学我问你等你再次去调这个f band的时候,那个input元素就这个东西是不是已经出现到页面上了,出现到页面上你再执行它这个focus,那肯定他就获取焦点了呀,对不?各位琢磨琢磨,一上来不行一点,哎一点就行,哎说老师那是哈,那这问题怎么解决呀?啊说老师要不我引导他一下,我说你点一下这按钮,它就能获取焦点了,那肯定不行啊,诶我要的是一上来就获取焦点呢,哎同学,那你说我们是不是得在这个时机去执行40行,哪个时机呢?你听我说。
12:27
就是我们能够发现view呢,不仅仅把指令和元素啊绑定成功了,而且view还把这元素放入页面了,然后在这个时候我问你各位,咱们咔嚓一下子执行40行是不是就可以了呀?是这意思不?各位哎,那也就是说我们想把这个时间点呢划分的再细一点,那同学你听我说,只要你把F半的写成一个函数,那这个功能你就是没有办法实现的,因为F半的一旦被你写成函数了,只有两个时候调用指定元素绑定成功,或者是重新解析时,你根本拿不到那个时间点,就是view把元素放入页面了,对不?所以说接下来啊,同学你得这么玩了,瞧着把这两行代码先粘走,省得一会儿我们再写了,然后在这啊,你看好了,同学,F半的不要写成一个函数了,就得用最完整的那个写法写成一个对象。
13:22
接下来你听我说,各位,在这个对象里面,你可以准备很多的函数,举个例子,你准备一个A函数啊,你再准备一个B函数,哎,你再准备一个C函数,同学,你是不是准备了很多函数啊?哎,View给你了一个承诺,说哥们儿,我会在特殊的时刻去帮你调特殊的函数。比如说举个例子,比如说呀,一会儿呢,一旦我把那个元素放入页面了,我就帮你调一下B函数,哎,你看我们是不是就得到这个关键的时间点了呀啊,当然人那些函数各位不叫ABC都有特别好听的名字,而且你还不能写错,同学你写错了,那就找不见了呀啊这里边常用的呢,各位有三个,来我给你写一下,第一个不叫A函数,叫半的函数,准备好还有一个啊,你听听这名inserted啊,Insert是不是有插入,那你说inserted什么意思呢?来我先写着,等我把最后一个写完,最后一个叫做update更新好了,同学咱聊聊这三个函数吧,都什么时候调用啊同学,这个B呀,非常简单,就是咱们之前说的这个。
14:37
帮指令与元素成功绑定时,诶比又说这样吧,小伙子,你看我把指令和元素啊绑定成功了,那咋办呢?我帮你调一下B的前提啊各位是你得给人家准备band这个函数,如果你没准备人怎么调啊对吧?在这呢,来一个consolo叫做band,那这个inserted什么时候调用呢?关键点来了各位叫做指令所在元素被插入页面时,然后呢调用。
15:11
啊来,那它是什么时候调用呢?各位,那就是这个指令所在的模板被重新解析时调用,同学你有没有一种感觉啊,我们一直在这儿做准备性工作,我准备一个半函数,我准备一个iner函数,我在准备一个update函数,我都准备好,那就等着谁呀,就等着view去调用,View干完了一个活就帮你调一个函数,干完了一个就帮你调一个,对不对?哎,我把这些呢都做一个输出,在这呢,再来一个inserted,把它复制在这呢,我再输出一个叫做什么呢?哎,这个update走,那同学你看一下整体这个流程啊,一定是他先把元素和指令建立一个联系,我们就绑定。先输出的是band,随后输出的是inserted咋的,插入页面了以后你只要一改数据,引起它所在模板被重新解析,那么update就得被调用,你看一下这个顺序,各位来看这时间点划分的很详细吧,你看等你去点的时候走看update再走再走再走对吧?哎,同学你看看关键的时间点view帮你去调一个关键的函数,那同学就这几个函数啊,B in和update啊,都能够收到这两个参数,各位那你说接下来怎么办?
16:32
嗯,首先说说band里边一般我们干嘛啊同学,这个band呀,就属于刚才我给你写的这段代码的这段区域,这就属于band的区域,哎,元素已经出来了,和指令呢,已经绑定好了,但是还没放到页面,你可以去写一些什么样式啊,什么value值啊,绑定事件呀都可以啊,那我们需要做的是啥呀?当然是这个呗,给他拿过来在这儿一写,当然不是input的,是element,那当然不是99是它的点Y6值是这意思不?OK,那同学你知道这我要做什么了,就是刚才那个操作呀,element.fo cos是不是获取焦点呀?OK,那说老师更新的时候怎么办呀?嗯,要不别写了,那你看你不写是什么后果啊,各位你看一下啊,一上来,哎同学奏效了,你看一刷新,你看一刷新是不是自动获取焦点。
17:25
哎,然后如果你的update里面不写逻辑啊,你看是什么效果啊,各位当我点按钮的时候啊,各位你分析一下,我一点按钮是不是属于光标从input这块失去那个焦点了呀,所以说这会儿一会儿肯定得失去焦点的,那是正常的,来我点一下走走走走。怎么的了,这会儿是不是不变呀,说老师为啥不变呢?是因为人家一直在帮你调这个update,但是你在update里却什么也不做,那你看效果吧,同学急死个人呢是吧?所以说update里边你得怎么写呀,各位,哎,还得是把这句话是不是给他写一遍呀。
18:01
对不?各位,那这回你看这逻辑就完整了呀,一上来获取焦点了,哎,我一点对吧,那一点肯定失去焦点呢,这啵啵还能再走是不说老师,那我想让他一点的时候,他也不失去焦点,我一点的时候他继续在这儿,哎给我维持住,其实也可以,各位,只不过你那功能有点诡异,就是你把这句话呀,你给它复制一份在这再写一下就得了,对不对?各位你看一更新,诶,我重新再给你获取焦点,那你看一下效果吧,刷新来到这儿走走走走,是是这样的吧,哎,但是你这功能这有点诡异,咱就不再做这儿了啊,那同学回头你看看你觉不觉得这个粉色框里的逻辑。很多时候都跟这个绿色框里的逻辑是一样的,你一上来准备好值,那你一更新呢,你原来的值怎么算,这是不是还怎么算呢?你比如说我这说了要乘以20,那你说你这一更新是不是也得乘以20啊,这个逻辑往往办的和update他俩是咋的重复的,所以说各位人家就给你设计了一个函数的写法,同学你看看big函数什么时候调用。
19:07
指令与元素成功绑定时说的谁呀band,那你再往后看指令所在模板被重新解析时说的谁呀,Update,所以说各位你如果用了这个简写方式,其实你就是只写了band和谁update,但是没有写谁inserted,对不?各位哎,所以说你要是有那种特殊的需求,比如说老师什么获取焦点呢,拿到它的副元素啊,怎么怎么地你都得需要这个inserted这个函数,OK,其实各位这三个人呢,可以被称为呢钩子,但是在这儿呢,我先不提,因为我们还没有讲到生命周期呢,在这儿呢,我们先有一个大概的印象,就是红的绿的粉的,他们三个呀,都是函数,View会在不同的时刻帮我调用不同的函数。好嘞,各位,那就把这种对象的形式呢,就说完了。
我来说两句