Vue事件监听、事件修饰符、按键修饰符

    <div id="app">
            <h3>事件监听</h3>
            <button @click = "test1">test1</button>
            <button @click = "test2('abc')">test2</button>
            <button @click = "test3">test3</button>
            <button @click = "test4(123,$event)">test4</button> 
                   
            <h3>事件修饰符</h3>
            <div style="width:200px;height:200px;background: red" @click = "test5">
                 <div style="width:100px;height:100px;background: blue" @click.stop = "test6"></div>
            </div>          
            <a href="htttp://www.qq.com" @click.prevent = "test7"></a>   
     
            <h3>按键修饰符</h3>
            <input type="text" @keyup.13 = "test8">
            <input type="text" @keyup.enter = "test8">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                test1(){
                    alert("test1")
                },
                test2(msg){
                    alert(msg)
                },
                test3(event){
                    alert(event.target.innerHTML)
                },
                test4(number,event){
                    alert(number +'---'+event.target.innerHTML)
                },
                test5(){
                    alert("out")
                },
                test6(){
                    // event.stopPropagation()
                    alert("inner")
                },
                test7(){
                    // event.preventDefault()
                    alert("点击行为")
                },
                test8(){
                    alert(event.target.value +' '+ event.keyCode)
                }             
            }
        })
    </script>

v-on 有默认参数event，如

v-on:click= "func(event)" 等价于 @click="func"

需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法，如：

@click = "function(item,$event)"