在事件绑定上，类似原生Javascript的onclick写法，也是在HTML上进行监听的。@click的表达式可以直接使用javascript语句，也可以是一个在Vue实例中methods选项内的函数名。

    <div id="app">
        点击次数:{{ counter }}
        <button @click="handleAdd()">+ 1</button>
        <button @click="handleAdd(10)">+ 10</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                counter: 0
            },
            methods: {
                handleAdd: function (count) {
                    count = count || 1;
                    //this指向当前vue实例app
                    this.counter += count;
                }
            }
        })
    </script>

vue提供了一个特殊变量$event,用于访问原生DOM事件

    <div id="app">
        <a href="http://www.baidu.com" @click="handleClick('禁止打开', $event)">打开链接</a>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                counter: 0
            },
            methods: {
                handleClick: function (message, event) {
                    event.preventDefault();
                    window.alert(message);
                }
            }
        })
    </script>

修饰符

在上面使用的event.preventDefault()也可以用vue事件的修饰符来实现，在@绑定的事件后加小圆点“.”，再跟一个后缀来使用修饰符。

事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once

<!-- 阻止单击事件继续传播 -->  
<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>

按键修饰符

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统修饰符

• .ctrl
• .alt
• .shift
• .meta

本作品采用《CC 协议》，转载必须注明作者和本文链接