事件修饰符
写一个简单的vue实例：
?
?
点击弹窗按钮：
?
?我们点击弹窗后就进入到这个页面了。但是我们现在不想点击弹窗进入这个页面，我们就要做一些修改。
我们要去阻止这种默认功能的发生。
再去运行：
?
?
这样我们去点击按钮就不会发生跳转。
我们也可以不用去亲自去写这个阻止事件。在click后去加也可以：
?
?这个prevent就是事件修饰符，是我们click事件的修饰符。
vue一共给了我们6个事件修饰符，前三个常用后三个不常用。
vue中的事件修饰符：
1.prevent：阻止默认事件（常用）
2.stop:阻止事件冒泡（常用）
3.once:事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self:只有event.target是当前操作的元素才是触发事件
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
?
运行：
?
?
因为我们的按钮绑定方法，div又绑定了这个方法。就无限嵌套，所以这时我们可以用第二个修饰符去破解这个嵌套。
?
我们只需要加stop修饰符就可以了。
接下来我们来学习第三个修饰符：
时间只会出现一次：
?
我们用once修饰符即可。
?接下来我们看看第四个修饰符，捕获模式：
?
?
?运行：
我们先从外向里去捕获事件，然后再由里到外去冒泡，最终是我们冒泡的事件是响应的。
我们不想要这样，我们想直接以捕获的事件去响应。
?
我们在外层的盒子上加上.capture。就是外面的盒子在捕获阶段就开始执行：
运行一下：
?
虽然我们先点击的2，但是我们从外向里捕获，先捕获box1，就先输出1，再捕获box2就输出2.
这个用的不多。
接下来我们开始去了解一下我们的第五个修饰符self:
?
这段代码和之前冒泡那个是一样的。
?
我们现在打印e.target
?
因为我们是一个按钮，所以我们会出现两个提示内容，我们点击的是button，所以当前的target一点是按钮。
我们去加上self:
?
再去运行一下：
?
这次只出现一个提示内容，因为冒泡出去后的本身是div不是button所以不触发事件。某种意义上来说这种方式也可以用来阻止冒泡。
我们现在说说最后一个修饰符：
这个passive用到的更少了：
?
?
?
我们每次拖动滚动条就会打印出@符，我们去运行一下看看：
?
我们有时候需要用到滚动事件时也不使用这个：也会使用wheel
刚才是我们的滚动条发生移动触发事件，这个是我们的鼠标滚动轮发生移动触发事件：
运行：
?
这两种方式的区别就是，滚动条到最后的位置就不再触发了而我们的滚动轮即使到最下方，只要我们的滚动轮还在动依然会触发事件。
?
我们去更改我们方法中的内容再去运行一下：
?
我们滚动滚动轮 ，疯狂开始计数，但是我们发现我们的滚动条一点也没有变化，这是因为我们是滚动我们的滚动轮，先去触发我们的事件，等事件都处理完了，才去让滚动条滚动一下。
我们加上我们的passive修饰符再去重新运行一下：
?
用了这个修饰符，我们先去做我们能做的再去回调函数。
这个如果是移动端我们可能会去使用一下。前三个我们要掌握，后三个了解即可。?
?