1. 綁定監(jiān)聽:
   v-on:xxx="fun"
   @xxx="fun"
   @xxx="fun(參數(shù))"
   默認(rèn)事件形參: event
   隱含屬性對(duì)象: $event
2. 事件修飾符:
   .prevent : 阻止事件的默認(rèn)行為 event.preventDefault()
   .stop : 停止事件冒泡 event.stopPropagation()
3. 按鍵修飾符
   .keycode : 操作的是某個(gè)keycode值的健
   .enter : 操作的是enter鍵

HTML:

<div id="example">

    <h2>1. 綁定監(jiān)聽</h2>
    <button @click="test1">test1</button>
    <button @click="test2('hello')">test2</button>
    <!-- <button @click="test3($event)">test3</button> -->
    <button @click="test3">test3</button>
    <button @click="test4(123, $event)">test4</button>

    <h2>2. 事件修飾符</h2>
    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
    </div>

    <a  @click.prevent="test7">去百度</a>

    <h2>3. 按鍵修飾符</h2>
    <input type="text" @keyup.13="test8">
    <input type="text" @keyup.enter="test8">

</div>

new Vue({
        el: '#example',
        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(){
                alert('inner');
            },
            test7(){
                alert('點(diǎn)擊了');
            },
            test8(event){
                // if(event.keyCode === 13){
                    alert(event.target.value + ',' + event.keyCode);
                // }
            }
        }
    })