Vue--事件修饰符

刚刚学习了点击事件v-onclick，在点击某个控件的时候进行事件的绑定，触发某一个事件，注意需要在vue实例中将定义的触发函数进行注入，

如果说想对于href这种能够点击的事件进行触发事件，我们就需要首先将本身的点击进行阻止，使用e.preventDefault()组织默认行为，或者是@click.prevent

总共的事件修饰符：

. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）。

. prevent：阻止默认事件的发生。

. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。

. once：设置事件只能触发一次，比如按钮的点击等。

. passive：

一般用于wheel 事件，wheel事件的执行会优先执行处理函数的程序，执行完成后再执行浏览器默认事件将滚动条滚动到对应的位置，那么如果你的处理程序是一个需要很久才能处理完的程序比如很大的for循环或者 awiat等待的程序，那么他就会出现滚动条卡顿的情况，解决方法就是添加修饰符 passive ，他能让默认事件先执行，也就是滚动条先滚动，然后再去处理事件处理程序的回调，就不会卡顿了，

    <style>
        *{margin: 0;padding: 0;}li{list-style: none;}
        .list{
            height: 300px;
            width: 200px;
            background: orange;
            overflow: auto;
        }
        .list li{
            height: 100px;background-color: skyblue;margin-bottom: 20px;
        }
    </style>

<ul  @wheel.passive='roll' class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
new Vue({
        el : '#root',  
        data : {},
        methods:{
            roll(){
                for(i = 0 ; i < 5000;i++){
                    console.log('事件处理中')
                }
                console.log('事件处理完成')
            }
        }
    })