指令 v-on 用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码，简写为 @ ，其事件类型由参数决定，与 v-bind 指令相同，冒号后面是参数，举个栗子如下

<div id="app">
    <button v-on:click='count++'>click</button>
    count: {{count}}
</div>

const vm = new Vue({
    el: '#app',
    data:{
        count: 0
    }
})

【结果】

v-on 还可以接收一个需要调用的方法名称，方法写在 methods 对象中。举个栗子如下

<div id="app">
    <button v-on:click='addCount'>click</button>
    count: {{count}}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        addCount() {
            this.count++;
        }
    }
})

【结果】

【注】methods 中的函数，可以直接代理给Vue实例对象，因此可以直接运行 vm.addCount()

除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法

<div id="app">
    <button v-on:click='addCount(5)'>click</button>
    count: {{ count }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        addCount(num) {
            this.count += 5;
        }
    }
})

【结果】

在内联语句中使用事件对象时，可以利用特殊变量 $event.

<div id="app">
    <button v-on:click='addCount(5, $event)'>click</button>
    count: {{ count }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        addCount(num, e) {
            this.count += 5;
            console.log(e.target)
        }
    }
})

【结果】

【注】可以动态绑定事件，Vue版本需要2.6.0+

<div id="app">
    <button v-on:[event]='addCount(5)'>click</button>
    count: {{ count }}
</div>

const vm = new Vue({
    el: '#app',
    data: {
        event:'click',
        count: 0
    },
    methods: {
        addCount(num, e) {
            this.count += 5;
        }
    }
})

可以不带参数绑定一个对象，Vue版本需要2.4.0+，不支持修饰符和函数传参，语法如下

.bg {
    width: 100px;
    height: 100px;
}

<div id="app">
    <div class="bg" v-on="{mousedown:doThis, mouseup:doThat}" v-bind:style="objectA"></div>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        count: 0,
        objectA:{
            backgroundColor: '#f88'
        }
    },
    methods: {
        doThis() {
            this.objectA = {
                backgroundColor: '#88f'
            }
        },
        doThat() {
            this.objectA = {
                backgroundColor: '#f8f'
            }
        }
    }
})

【结果】

【拓展】为什么在HTML中监听事件

1. 轻松定位JavaScript代码里对应的方法
2. ViewModel 代码可以是非常纯碎的逻辑，和DOM完全解耦，更易于测试
3. 当ViewModel被销毁时，所有事件处理器都会自动被删除