vue 事件修饰符

<div id="app">
     <div class="inner" @click="divClick">
           <input type="button" value="点我" @click.stop="btnClick">
     </div>
</div>


        <script>
            // .prevent 阻止默认事件 比如a标签的跳转
            // .stop  阻止事件冒泡
            // .capture  添加事件侦听器时使用事件捕获模式  事件默认按照冒泡的顺序触发，添加capture后，事件就会按照捕获的顺序触发。【注意：capture修饰符一定要写在外层才生效！】
            // .self  只当事件在该元素本身触发时才会触发   【比如如果给父元素的点击事件添加.self修饰符，当子元素发生点击事件后，会冒泡到父元素，但由于冒泡触发的事件不是由父元素本身触发的，所以添加.self后父元素的方法不会被执行】
            // .once  事件只触发一次  【当@click.one="func"，不管点击多少次，func函数只会触发一次】
            var vm = new Vue ({
                el: "#app",
                data: {
                   
                },
                methods:{
                    divClick() {
                        console.log('div');
                        
                    },
                    btnClick() {//点击input,会触发btnClick，接着事件冒泡，会触发父元素的divClick。通过事件修饰符.stop阻止事件冒泡
                        console.log('input');
                    }
                }
            })
        </script>

冒泡模式：事件从子组件向父组件逐层传递。

捕获模式：自顶向下。事件从父组件向子组件逐层传递