可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
基础用法：
<div id="APP"> <button v-on:click="add">添加</button> <p>您已购买 {{num}} 件</p> </div>
注：使用 v-on:xxx 绑定事件，其中 xxx 是事件名。事件函数 add 如果不需要传递参数，() 小括号可以省略不写。
const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add: function(){ this.num++; }, }, });
注：事件函数需要写在 methods 对象中，事件函数最终会在 vm 上。如果需要使用 data 中的数据，可以用 this.xxx 操作数据，其中 xxx 是数据名。
v-on 指令简写【常用方式】
<div id="APP"> <button @click="add">添加</button> <p>您已购买 {{num}} 件</p> </div>
注：v-on: 可以简写为 @ 符。变为 @xxx 绑定事件，其中 xxx 是事件名。
const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add(){ this.num++; }, }, });
注：事件的回调可以简写为 add(){ } 的形式，与之效果相同。
事件函数中的 this
事件函数中的 this 默认指向 vm ，也就是 Vue 实例对象 或者 组件实例对象。
<div id="APP"> <button @click="add">添加</button> <p>您已购买 {{num}} 件</p> </div>
const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add(){ console.log(this); // Vue this.num++; }, }, });
注：data 中的数据相当于都在 Vue 实例上，而 this 又指向 Vue 实例，所以我们才能通过 this.num 操作 data 中的 num 数据。
另外注意 methods 中配置的函数，不要用箭头函数！否则 this 就不是 Vue 实例了。
<div id="APP"> <button @click="add">添加</button> <p>您已购买 {{num}} 件</p> </div>
const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add:() => { console.log(this); // window this.num++; }, }, });
注：现在的 this 指向 window ，而 window 中没有 num 这个数据，所以 this.num++ 不会发生任何变化。一定不要使用箭头函数！不要使用箭头函数！不要使用箭头函数！
事件对象 Event
<div id="APP"> <button @click="add">添加</button> <p>您已购买 {{num}} 件</p> </div>
const vm = new Vue({ el: "#APP", data(){ return { num: 0, } }, methods:{ add(e){ console.log(e.target); // <button>添加</button> this.num++; }, }, });
注：在不传递参数时，可以直接接收 event 事件对象。
原创作者：吴小糖
创作时间：2023.2.23
