1 概述

事件修饰符
.stop 阻止单击事件继续传播 event.stopPropagation()
.prevent 阻止事件默认行为 event.preventDefault()
.once 点击事件将只会触发一次
按键修饰符
格式： v-on:keyup.按键名或 @keyup.按键名
常用按键名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

2 要点

<body>
    <div id="app">
        <!--单击事件继续传播-->
        <div @click="todo">
            <!--点击后会调用doThis再调用todo-->
            <button @click="doThis">单击事件会继续传播</button>
            <!--点击后只调用doThis-->
            <button @click.stop="doThis">阻止单击事件会继续传播</button>
        </div></br>

        <div>
            <!-- 阻止事件默认行为 -->
            <a href="http://www.baidu.com" @click.prevent="doStop">梦学谷官网</a>
        </div></br>

        <div>
            <!-- 点击事件将只会触发一次 -->
            <button @click.once="doOnly">点击事件将只会触发一次: {{num}}</button>
        </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                todo: function () { alert("todo...."); }, 
                doThis: function () { alert("doThis...."); }, 
                doStop: function () { alert("href默认跳转被阻止....") }, 
                doOnly: function () { this.num++ }
            }
        }) 
    </script>
</body>