Vue中还有一个很重要的指令就是事件绑定v-on，让DOM可以去做更多的事情。

v-on事件绑定(简写'@')

使用的方式为v-on:[事件名称]="运算式"，像count++较简短的运算可以直接写，而比较复杂的运算式可以使用methods处理，给予一个事件名称做绑定。

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

const vm = Vue.createApp({
    data() {
        return {
            count: 0,
        }
    },
    methods: {
        add() {
            this.count++
        }
    }

}).mount('#app');

event物件

若需要传入参数可以用$event带入，就像范例中input改数字後会传入methods的add(amount,event)，再次按下add按钮就会count+5，改变了原本的count+1。

<div id="app">
    <p>count : {{count}}</p>
    <input v-model.number="amount"></input>
    <button v-on:click="add(amount,$event)">add</button>
</div>

const vm = Vue.createApp({
    data() {
        return {
            count: 0,
            amount: 1
        }
    },
    methods: {
        add(amount, event) {
            this.count += amount
            console.log(event.target.tagName, amount)
        }
    }

}).mount('#app');

Modifiers修饰子

事件修饰

• .stop : event.stopPropagation()，click事件不会向外层传递
• .prevent : event.preventDefault()，阻挡元素预设行为
• .capture : 点击内层元素会先触发有绑.capture的外层
• .self : 触发元素本身
• .once : 触发一次
• .passive : 阻止event.preventDefault()

键盘修饰

@keyup.enter

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down

系统修饰

• .ctrl
• .alt
• .shift
• .meta : meta 对应command 键(⌘)；Windows 系统键盘对应Windows 徽标键(⊞)
• .exact

<!--ctrl+任何按钮都会触发-->
<button v-on:click.ctrl="onClick">A</button>
<!--只有ctrl才会触发-->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

鼠标按钮修饰

• .left
• .right
• .middle

参考资料

监听事件
https://cn.vuejs.org/v2/guide/events.html#按键码