vue的事件监听

  　　　　　　<div id="app">
            <button type="button" @click="btnClick(a,$event)">maomao</button>
            <!-- 阻止单击事件继续传播 -->
            <a v-on:click.stop="doThis">阻止单击事件继续传播</a>

            <!-- 提交事件不再重载页面 -->
            <form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>

            <!-- 修饰符可以串联 -->
            <a v-on:click.stop.prevent="doThat">修饰符可以串联</a>

            <!-- 只有修饰符 -->
            <form v-on:submit.prevent>只有修饰符</form>

            <!-- 添加事件监听器时使用事件捕获模式 -->
            <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
            <div v-on:click.capture="doThis">...</div>

            <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
            <!-- 即事件不是从内部元素触发的 -->
            <div v-on:click.self="doThat">...</div>

            <!-- 点击事件将只会触发一次 -->
            <a v-on:click.once="doThis">点击事件将只会触发一次</a>

            <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
            <!-- 而不会等待 `onScroll` 完成  -->
            <!-- 这其中包含 `event.preventDefault()` 的情况 -->
            <div v-on:scroll.passive="onScroll">...</div>

        </div>
        

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm = new Vue({
                el:"#app",
                methods:{
                    btnClick(a,e){
                        //若调用时时 btnClick(a)
                        //则获取event的方式是 console.log(a,event.target.innerHTML);
                        // console.log(event.target.innerHTML);
                        console.log(a,e.target.innerHTML);
                    },
                    doThat(){
                        console.log("dothat!");
                    },
                    doThis(){
                        console.log("dothis!");
                    }
                }
            })
        </script>