可以使用v-on指令将事件侦听器绑定到元素上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>输入和事件</title> </head> <body> <div id="app"> <p>共点击了 {{count}} 次</p> <button v-on:click="count++">数量增加</button> <button v-on:click="addCount">数量增加绑定方法</button> <!-- 和v-bind指令类似，v-on指令同样有一个简写方式。可以将v-on:click简写为@click。 --> <button @click="addCount">v-on 的简写</button> <!-- 事件修饰符 .prevent: 阻止执行事件默认行为 .stop: 阻止事件继续传播 .once: 只在第一次触发事件的时候触发事件侦听器 .capture: 如果想要使用捕获模式，也就是说，事件会在传递到当前元素的下级元素前触发（而在冒泡模式中，事件会先在当前元素上触发，然后沿DOM树向上冒泡） .self: 只监听元素自身而不是它的子元素上触发的事件 也可以只设置事件名和修饰符而不传入侦听器，而且可以将修饰符串联起来使用: @click.stop.once.capture 按键修饰符 .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right --> <!-- 事件修饰符使用方法 --> <button @click.once="addCount">只触发一次</button> <!-- 按键修饰符使用 --> <input type="text" @keyup.esc="addCount"> <!-- 跟上面效果相同，esc的keyCode为27 --> <input type="text" @keyup.27="addCount"> </div> <script src="https://unpkg.com/vue"></script> <script> let vue = new Vue({ el: "#app", data: { count: 0, }, methods: { addCount() { this.count++; } } }) </script> </body> </html>