谁在看我的手记？
今天打卡有点晚，主要是在18点的时候，自己在搭建 K8s 集群遇到了问题，查资料查了半天，然后自己动脑筋解决了。
都是 kubelet 版本惹的祸 ~

开始好好学习：

课程内容：
20220816 - 今日学习的内容包括：
吐槽：到这里，我还在打 vue 的基础，等到写项目的时候，要关掉视频自己敲出来检测掌握情况！

第2章 Vue.js基础

2-13 事件绑定-事件修饰符

代码：


解读：
今天，我们来学习：
vue 里面事件相关的内容，
然后在这里我只写一个button 就可以了。写一个方法，叫做handleBtnClick。‍‍
当点击button的时候，我们想做一些事情，比如说我在 methods上面先来定一个data，‍‍里面我们定义一个属性叫做counter，return 一个对象，然后这里来一个counter 给个 0，‍‍

下面我们去展示 count，点击button的时候，我希望让它加1，我们可以怎么做？【计时器，累加，sum=0 sum += counter】

我们可以像以前一样写一个handleBtnClick这样的方法，‍‍然后在这里面去写 counter加等于1就可以了。

保存一下，我们过来看一下，‍‍点击没问题，可以有一个不断往上加的效果。

当然实际上我们绑定事件的时候啊，‍‍还可以更简单的去编写这块的代码，我先把它注释掉。‍‍在这里面我可以不调用这个方法，
我们可以直接写一个表达式，‍‍

我们来看一下效果刷新，没有任何的问题，

也就是我们可以在绑定事件的时候里面直接写一些表达式，这里的表达式或者说这里的一些js的内容，‍‍等于counter加1。

当然如果你在这里面去写一些语句或者表达式的话，你能写的内容非常的少，‍‍所以一般我还是建议大家不要这么去写，虽然它能写，
但你还是用这种方法的形式来写。‍‍

继续，我们说当你点击button的时候，一般我们绑定一个原生事件的话，‍‍比如说在我们写这个标准的js原生的时候，我们绑定一个函数，比如说button上绑定一个click事件的话，‍‍它里面能接收到一个叫做event这样的事件对象，打印一下 event，看一下在 vue里面我们能不能接收到它，

保存一下，‍‍然后到我们的页面上打开控制台，我们刷新点击button，大家会发现有各种各样我们想要的东西，一般来说我们会去使用它的target这样的东西 即 event 点target，‍‍我们来看一下刷新点击，

它会告诉你 你现在点击的内容是button这个按钮，‍‍所以在vue里面如果我想获取到原生的事件的话，
在这个函数里面‍‍第一个参数event就是对应的原生的事件对象，

你可能会问，假设‍‍我调用handleBtnClick这个方法的时候，想去额外传一点其他的参数，比如说现在counter每次加1，‍‍
我先把 event给它去掉，现在每次counter加1，我想让它每次counter加2 怎么写？
我可以这么去写，‍‍

在这里我后面加一个括号填一个2，【箭头所指】
我点击的时候handleBtnClick把 2 传递进来，‍‍那么这块我就可以接受一个叫做number，然后加等于number就行了。

每次点击的时候我调用这个方法，‍‍传递来的 number 是2，所以每次counter应该加2，我们看一下这么写行不行？刷新一下，点击2468 10，

哎这么写也可以。

所以我们去调用一些方法的时候，如果想自己在这里固定的传一些参数的话，你也可以这么传。‍‍
但是如果你这么传的话，刚才我们说第一个参数本来应该是event，现在这个event就获取不到了，有没有办法我能获取到event？‍‍

有的。你可以这么去传，在这里传一个$event过去，那么第二个参数里我就可以接受这个event，‍‍

然后我打印一下 在21行上面加上console.log(event)
咱们来看一下，保存刷新，点击button，是不是event又打印出来了？‍‍

所以我们能学到什么？
如果我们要额外传递参数，同时要获取到原生的事件对象的话，‍‍那么你要在你的模板里使用$eventt这样的变量，
你用$event之后它指的就是原生的事件，你把原生的事件传递给handleBtnClick这个函数，handleBtnClick这个函数就可以接受这个事件了，‍‍
那么你就可以获取到原生的事件，这个东西大家记一下，在实战之中经常我们还是要使用的。‍‍

继续，有的时候当一个点击发生的时候，我们可能要执行多个函数，想一想我们可以怎么写？‍‍
可不可以这么去写？

再来一个handleBtnClick1，‍‍在methods里面的handleBtnClick的下方写。

handleBtnClick这块就不接受参数了，counter 就不加了，alert 一个1，下面 alert一个2，‍‍保存一下。

意思就是当我点击button的时候，我想执行handleBtnClick和handleBtnClick1这两个函数，‍‍

我们来试一下。‍‍刷新，点击button，‍‍你发现没有任何的效果，那么我这么去写行不行？我加一个括号，括号，

再保存一下，我们来看刷新‍‍点击button，1 2 弹窗就出来了。‍‍

所以大家会看到在vue里面绑定事件还有这么一个语法，‍‍如果你绑定一个事件，想让它执行多个函数的时候，你把这多个函数写在后面，用逗号间隔，‍‍然后记得掉这些函数的时候，就不能直接写函数的引用了，你要去写一个括号()。这个语法大家也把它记住。‍‍

到这里 vue 事件绑定的一些最基础的内容就学完了。‍‍

接着我要给大家讲解 vue 事件绑定里一个重要的东西叫做修饰符，我们来看看代码案例：

上述代码为什么这么写？
在这里我在外层为了方便给大家做一个展示，‍‍我再写点东西，然后我在这写一个 @click 等于handleDivClick。‍‍

然后在handleBtnClick上面我去写一个handleDivClick这样的方法，alert(“Div Click”)。
保存一下，‍‍然后到页面上我们刷新，点击一下button，

你发现div clicked 也被执行了，‍‍再点一下div clicked 又被执行了，这是怎么回事？

这是因为当你点击button的时候，实际上事件是冒泡的，它会把这个click事件冒泡到上层的 div标签上，
所以上层的div标签也会感知到点击，然后打印出div clicked，‍‍

有的时候我希望它停止冒泡，我可以怎么写?
其实很简单，我们只需要在这里‍‍

当button click 的 时候，我用一个修饰符，大家记得在事件click后面加一个点stop‍‍ 代表的就是stop修饰符，
它指的是停止向外做这个事件的冒泡。‍‍

写完了之后，我们再来看一下刷新，点击button，‍‍你发现click弹不弹窗了了？

不弹窗了，是不是冒泡就被禁止了？

我们再来看‍‍刚才讲的修饰符，叫事件修饰符，因为它都是对事件做修饰的，比如说对 click事件做修饰，‍‍

我们再来讲一个其他的修饰符，
来看具体的代码：【Dell 老师录屏效果可以，环环相扣】

代码是什么意思呢？

有的时候我希望你 点击子元素的时候，不要给我去触发自己的click事件，只有我点击的是自己的情况下，‍‍我才去触发我的click 事件，handleDivClick才会被执行，
想做到这一点怎么办呢？‍‍我可以在 click上面加一个点self这样的事件修饰符，它的意思是‍‍你点击我这个div dom下的其他的dom结构 可以，但是我会去做判断，‍‍如果你点击的这个东西是我自己的话，比如说你点button，他点的是button 这个元素，并不是我最外层的 div元素，‍‍

那么我不会去执行handleDivClick，而只有你点击的元素真正的是我自己的时候，我才会执行handleDivClick。‍‍

我写完了之后，我们到页面上刷新，点button，你发现没用的， click不会弹窗，‍‍

但我点10的时候它是会弹窗的。

为什么？

当你点 button 的时候，‍‍你触发的 dom是button，而不是最外层的div，
所以handleDivClick就不会执行，‍‍因为它会判断我的这个事件是不是我自己触发的，不是，是button触发的，所以它就不会执行。‍‍

但你点这个数字也就是点counter的时候，实际上这个时候你点击的是div这个标签，‍‍你绑定的事件它会去判断是不是你自己 div标签触发的事件。其实这个时候是的，‍‍那么handleDivClick就会被执行，打印出div clicked，

这就是self修饰符的作用，‍‍它修饰的就是我这个事件的触发，必须是我自己这个dom标签的触发才会执行。‍‍

如果是子标签触发的这种dom事件，它是不会执行的。‍‍除了self这样的一个事件修饰符之外，‍‍

事件修饰符其实还有很多其他的东西，比如说prevent，‍‍之前我们讲过这是一个阻止默认行为的事件修饰符，‍‍你这个dom就会自动阻止 div click的默认行为。‍‍好，还有其他的比如说还有once，它指的是这个事件绑定只执行一次。

点击0，它会弹一次窗，‍‍再点击你发现就不会弹窗了，我怎么点都没用了，所以它的意思是‍‍handleDivClick事件的绑定只执行一次。‍‍

有的时候比如说你会绑定@scroll.once="handleDivClick"这样的事件，当你的 div滚动的时候 做的一些事情，‍‍

当然scroll的时候，它这么直接去绑原生事件性能会比较低，‍‍所以chrome浏览器都会给你提一个性能警告，那么这个时候你加一个passive模式， passive也是一个事件修饰符，‍‍就会比较好的提升你滚动的一个性能 @scroll.passive="handleDivClick"。