00:01
哈喽,各位小伙伴们,那咱们呢,接着继续。老师呢,在咱们前台项目的基础之上啊,又新增了几个路由组件,新增了几个呢?新增了六个123456。分别呢,叫做even的深入we model、深入属性修饰符think以及Dollar e tr与Dollar listen,对吧?还有什么Dollar children与parent以及作用插槽这六个路由组件。那这里呢,这六个呢是什么呢?是路由导航,那底下有相应的路由组件。那当然啊,咱们的路由的配置啊,老师已经写好了,在这儿。那有相应的一级路由,也有相应的二级路由。那么每一个路由组件里面呢,咱们呢,会讲相应的知识点。
01:00
那当然路由你得有,那当然组件你也得有,在咱们的communication里面有相应的这六个路由组件。对吧。那咱们要聊的第一个知识点是谁呢?就是even的深入,那even就不用老师过多去说了,这就是所谓的事件对象嘛,那even的跟谁相关呢?一定是跟事件相关。那所以说啊,咱们也做一下笔记啊,这块咱们先说第一个叫做哎,事件的注意的事项。注意事项。那咱们呢先聊聊,那这块老师呢,也给你标一个一吧,哎,咱们聊聊。那首先说事件。就是咱们学voe,就是从接触到现在你接触过的事件呢,其实呢,有两种,第一种呢,就是什么呢,属于哎这种系统事件。什么是系统事件呢?比如说单击事件呢,对吧,哎双击对吧,鼠标系列事件,哎鼠标系列等等等。
02:09
那这些呢,是属于系统事件,那当然还有另外一种,那当然是VE当中,咱们接触到叫啥叫自定义事件。对吧,啊,这是这两种,所以说从基础到现在为止,那事件无非就这两种呗,一种是系统事件,另外一种是自定义事件。但是不管是系统的事件还是自定义事件,一定要注意这几件事儿。第一个事件源。对吧,哎,事件员什么叫事件员,你这个事件是给谁绑定的。对吧,那第二个就是事件的类型。那你是单击事件还是双击事件对不?哎,你还是自定义事件,呃,叫什么名字,你事件类型也得有对吧?那第三个要注意的是什么,就是事件的回调。
03:00
所以说,不管是系统事件还是自定义事件,这三件事儿真的很重要。那咱们呢,去聊聊even的深入啊,也就是说跟事件相关的深入的学习,对吧,Even的深入。那咱们先说说谁呢?先说说系统事件,那咱找一下这个相应的组件去讲解一下这个知识点啊,就是就是这个even的test。那在这里呢,有even test,这是一个路由组件,那咱们呢,可以看一下,在这不标记了吗?叫做even的test组件,那不就是这吗。对吧。那咱们呢,先说第一个,哎第一个就是什么呀?哎系统事件啊,也说原生的道,哎绑定咱们的系统事件。啊,系统实践,那这个我相信啊,应该是没问题对吧,你看比如说咱们经常写,比如说来一个button。那老师问你这是不是这个button,是不是属于原生道。
04:00
对不,那么比如说咱们给他写一个文本吧,哎,比如说原生的到哎绑定。绑定原生的事件啊,原生事件。事件。那比如说咱们给他绑定一个单机时间,那这个很简单,艾click。对不,那比如说呢,咱们呢,也得给他来个回调叫handler。那你看现在,那现在无非是事件原是这个button绑定了一个什么,事件是不是原生盗墓事件是不是叫Li事件的回调是不是叫handle了啊,当然咱们这个事件的回调描写。所以说在当中啊,那咱们给他来一个呗,叫handler。对不,那这个咱们写一下子,这个是啥,是不是原生。到button。到事件的回调,那当然当你一点击这个按钮的时候,没问题,会触发这个回调,对吧,那咱们呢,可以打印一下console.log对吧?哎,比如说叫做原声down的单击事件。
05:11
那这个呢是非常简单的,比如说你一点击这个按钮,那你看是不是就会触发这个单击事件,那事件的回调是不是也会相应的去执行,这是没问题的。而且咱们应该知道他会给咱们注入什么,是不是注入even的实验对象啊?对吧,那咱们也可以打印一下。对吧,那咱们可以瞄眼对吧。对吧,这是没问题的。对吧,那也就是说现在咱们测试了一下什么原生的道。绑定原生的事件,说白了就是系统事件,这是没问题。对吧,但是你要想明白一件事,什么事。在咱们的这个组件当中,你看这啊,在咱们的这个even的test的组件当中。老师,这里是不是还引入了两个子组件?
06:01
引入了,而且还注册了,但没有使用。对不对,看这啊有EVENT1和二两个子组件。以及相应的注册。但你没有使用。那你看那举个例子,比如说老师在这搞一个叫啥叫e event1,哎,叫做Eve提一组件。对不,那么组件在使用的时候,那不也是以标签的形式。对不,比如叫Eve。那你看那老师问你,他是不是也是一个啊标签。只不过是属于一个自定义标签啊,因为W3C没有规定的。而像上面这个八字,那这不就属于系统原生的道路,而这个是属于组件标签。对不?那举个例子,那咱们先看一下吧,先看一下吧,那你看在页面当中是不是出现了一个叫做一一组件。对不对,对吧,你看在这嘛。
07:01
那现在老师有一个问题,什么问题,那如果老师给他绑定一个,比如起个名叫啥叫handle了,几个handle了一。对不?这没问题吧,那以及咱们呢,也给他写一个回调,叫handle了几handle了一。那这块咱们也做一下笔记,这谁这应该是低他,哎组件的,呃,事件的回调。对不,那当然咱们也可以打印一下conso第2LOG对吧,比如说叫一的事件的回调。虽然老师现在还没有点击这个一问他,但老师想问一下子。就算老师现在点击一文的事件。对吧,就是这个,呃,组件它会打印吗。这块要注意。就是老师给even的组件,因为组件在用的时候,它不也是个标签吗。
08:04
对吧,我也给他绑定了个事件叫做C,对吧。哎,事件的回调叫handle了一,但是你要想明白一件事,什么事,当老师点击这个even的组件区域的时候,它会触发这个HANDLE1事件。那咱们看一下他不会。对不对,你看咱们可以看一下,你看它有触发吗?根本没有。那为什么呢?为什么?很简单。因为一一。它并不是原生的盗墓事件啊。原生的盗。对不?而你给他绑定了一个原生盗墓实验,可利。咱们把这个cli,其实它是当做了什么,当做了自定义事件。这块一定一定要注意啊,那首先说一它是非。哎,原生的倒节点。而你而。
09:01
而。绑定的可立可事件其实是什么?哎,并非什么,写一下,哎,并非原生的,呃,盗墓事件。而是什么呢?而是一个自定义事件。哎,叫做自定义事件,你想想咱们在前面基础的时候所学的,那这不就是自定义事件的事件的简写的方式么,At什么什么。对不对,所以说你会发现一件事什么事,诶,当你一点击的时候,根本就不会执行。对吧,比如说那个事件回调根本没有执行,为什么?因为这是一个自定义事件。那么如果想要的执行,你想想这个子组件。的内部,你是不是得触发隐密,是不是才会执行这个回。所以这块一定一定要注意。那有的同学说老师,那我现在能不能给给什么给组建这样的标签,绑定原生道时间,那现在这么看是不是不行,但其实可以通过一个修饰符实现,就谁呢?点nineteen,哎,叫做点。
10:09
Native这个单词是什么意思呢?是原声的意思。它是一个修饰符,可以把把什么把这个I click,这个自定义时间变成原生的。盗墓事件就是那个点击事件,那咱们可以看一下,你看这样就可以了。对不,你看咱点击一下,你看是不是。对不对。对吧,所以说呢,这块呢,老师呢,要做一下笔记。咱们做一下笔记。这块要注意的第一个啊,第一个。写一下。比如说原生的道。对吧,应该就比如说咱们刚刚说的谁button它呢是可以绑定哎系统事件对吧,比如说点击事件click click对吧,哎单击事件双击事件等等等,这是没问题。
11:00
但是你要注意一件事,什么事?就是这种组件标签。对吧,就比如说咱刚刚说的谁是不是一。那你会发现它可以。可以绑定系统事件,但是你要注意它有起作用的,哎,不起作用。看为什么呢?哎,因为是属于什么,属于自定义时间。对不对,因为在刚刚你也看了,你不加native修饰符,根本起不到呃点击事件的效果,因为它是默认当做啥,当做自定义事件。对不,那么如果你想把这种啊这种形式呢,变成原生倒事件click,那你需要在后面加上一个修饰符点nat,哎,点na可以怎么的,是不是可以。哎,把把什么把这种自定义时间,哎变为啥变为原生的道物时间。
12:04
这个呢要注意一下。而且在后期项目当中,咱们也经常会用到。而且呢,咱们的这个EVENT1这个组件,咱从来没有看它内部的结构,那咱们稍微看一下一。看这对吧,EVENT1其实啊,在EVENT1组件内部当中,你会发现它是不是有一个根节点。根节点当中有H2标签和SPAN2个子节点。那你会发现,那其实这是谁,这是。H几H2,这谁这是SPA,那你会发现老师不管点击是HR,你看啊,我不管点击的是HR还是死SPA,都会触发单击事件。所以说你要琢磨一下子,Native的这个原理是什么?好,那所以说咱们在这呢也做一下笔记,那这块老师写一下吧,那就说艾Li点可以怎么是不是可以把自定义事件变为什么是不变为原生的。
13:13
盗墓事件。而且你要注意它的原理是什么。就是你要注意,你会发现,你看老师不管点击的是HR还是说死班,他都可以实现点击事件的触发。那所以说你要明白的一件事是什么,就是这个当前的这个可时间,哎,可Li就是原生。Down的可立事件,其实啊,哎,其实是给子组件的啊,子组件就是这个even的事件的啥根节点div绑定上的。对吧,其实是给子组件的根节点。绑定了什么呀,绑定了单机世界。那也利用到了什么,是不是利用到了,哎,利用到了事件的委派。
14:05
这就为什么说不管你点击的是哎H2还是子弹,它都会触发点击事件。对不,所以这块呢,一定一定要注意。所以说其实说白了,你这种写法,也就是说给这个组件的跟标签绑定了单击事件。那你所有的子节点,那说白是不是利用事件的委派。对不?哎,都可以触发这个单击事件。这里一定要注意一下,这是它。好,那咱们再接着,呃,深入的去学习一下实践。那举个例子啊,你看,比如说老师这么写呢,Button。那这是属于什么,是属于原生放啊。对不?哎,原生的道。那举个例子啊,你看老师给他来一个叫原生的道。哎,绑定自定义事件。
15:01
我举个例子啊,比如说老师给他绑一个爱的叉叉叉。对吧,回调给他来个叫handle了几handle了二。那老师问你啊,你说咱们给这个button绑定个什么时间,说绑定了一个自定义时间,给那个原声道。对吧,比如说下面的写法。下面的写法是给原声的道。绑定了自定义事件,我不知道你们以前有没有有没有这种写法。那你想想这种写法有意义吗?你看咱看一下子啊。这不就是原生道墓事件啊,当然咱没有写这个这个这个这个这个这个憨多拉二。对不,咱没有写汉多拉二,所以汉多二咱给他写上吧,对吧,Hand。因为我不知道你们曾经有没有想过这种写法,那这块咱写一下是不是就是原生的道绑定,哎,自定义事件。
16:01
那你看这种写法它行不行。就这种写法。其实啊,这种写法呢,是没有意义的。咱们应该知道自定义事件。它是需要。呃,DO2与DO1ME结合的。如果你要这么写,它是一个原声道。它并非一个组件,那你怎么能触发dollarit这个函数呢?对不对不对,对吧,所以说一定要注意给原声的道,哎,给原声的道。绑定自定义事件是没有任何意义的,为什么呢?因为是没有。办法触发Dollar emit函数,哎,Dollar emitit函数。对不对。你先用咱们前面基础所学的自定义事件,那不就是Dollar on dollarit。而且经常是给组件绑定自定义事件。对不?DO2与do隐秘,而你原声do是没办法去书写do隐秘的,你在哪写?
17:06
没地儿可写。对不?所以说给原生道绑定自定义事件是没有任何意义的。对不,所以这个一定要理解。对吧,那咱们再看下,在底下这老师还有一个组件。叫EVENT2,那这个呢,老师呢,把它呢也给它整出来啊几EVENT2,那咱把这个组件给他搞出来。也看一下呢,它的一个大概的一个结构是什么样子,哎,咱们也看一下叫二。对不,哎,看这。那你说在在在这儿,这不有一个叫EVENT2组件吗?你看一下子吧,这块是个H2,底下是两个button。对不对啊,那你看老师要做一件事,什么事来你看这儿。比如说老师来的,他叫爱的。老师现在什么课都没写呢,现在老师就想问一件事,什么事?艾特Li是原生道事件还是自定义事件?
18:09
对吧,跟丙是一样的。对吧,是不是自定义事件。对吧,所以这块老师一写啊,这是啥,是不是组建标签,哎,组建标签。哎,标签。那你要注意一件事,什么事?老师现在给EVEN2组件标签给他绑定了一个艾特click,但你要注意啊,这玩意是啥?是一个自定义事件。并非原生盗墓事件。对吧,这个一定要区分开。对不?那比如说老师给的EVENT2绑定了一个自定义时间,叫at click,比如事件的回调,咱们起个名吧,叫HANDLER3。对不,那咱来一个呗。来一个,那写一下这是二啥呀,自定义事件的回调,自定义事件的回调。
19:01
叫handle了,三。对吧,三哎,搞一下。那咱们打印一下子conso.log。答一下叫三的。自定义事件。那咱们先看一下子,你现在是给二绑定了一个自定义事件,叫做click事件,回调叫handle了三。对,不,但是你要注意一件事,什么事,你现在点击,哎,你点击EVEN2组件会触发吗?不会,因为咱们应该知道自定义事件是需要Dollar on与dollarit结合。对不对,对吧,你现在只是给EVEN2组建标签绑定了自定义事件,但是你没有触发一。那所以说咱们找到even的二组件在这儿,你看老师这不写了个巴塔吗。当老师一点击二组件当中这个button,我想让它触发这个自定义事件,咱就可以来呗艾click。
20:04
但是这里要注意一件事儿,老师在EVENT2组件当中所书写的这个艾,这可是什么?这可是原声do的点击事件。因为这个八是一个原生的道,原生道绑定原生道时间。对不,当你一点击的时候要干什么?老师要触发自定义事件,对不,就是dollarit。对不,事件的类型叫什么叫对不,那以及给这个自定义事件回叫传递的参数,比如说咱来一个叫啥叫自定义事件click。对不?那也就是说,当老师一点击这个按钮的时候。对不对,副组件绑定了这个自定义事件,可函数会触发,那咱们可以看一下是不是。对不当老师一点击这个按钮,你看一下是不是。
21:00
这不就是一三的自定义事件触发了,而且咱们还给它注入了一些参数,那当然咱们在这里可以接受。对不,比如咱们叫什么呢,就叫做。对吧,那当然你在这也可以打印叫。对吧,所以说那咱们呢,可以看一下,你看是不是。所以说同样的都是写的是I click,但你要注意。在这种组件标签身上,你写的爱的,可这叫啥?这叫自定义事件。对不?你在原生DOM这里面,你也写的是爱的可粒,但这是原生DOM事件。所以这两个一定要区分开。对不,那以及老师在EVENT2组件当中,这不还有一个but吗?写的叫做分发自定义叉叉叉事件,那你看咱们也可以给咱们的EVENT2这个组件标签,再给他绑定个自定义实验叫叉叉叉。
22:00
对吧,比如说事件的回调,咱也叫HANDLE3。那当然,那你回到一二当中,当你一点击这个按钮的时候,你得触发这个自定义事件。对,不就是dollarit事件的类型是什么?是叉叉叉。对不,那这块你再写上叫自定义事件参差是不是传递参数是不是就是它。对不,所以说一定要把自定义事件和原生盗墓事件要区分开。对不,所以说。咱们曾经想过而没敢写的代码,咱们在这里写了一下子,所以一定要区分开,对不?看到这这你得知道这是啥,原生的道绑定的原生道时间。那这是啥?这是不是属于自定义时间?但是加上了修饰符,是不是就变为了原生道路时间?对吧,那像这个属于自定义时间,原声到绑定自定义时间没有任何意义。对不,而且像最后这个组件标签这里,那这都属于什么,属于自定义事件。
23:04
所以这块一定要注意。
我来说两句