一、看一个例子：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="事件绑定" v-on:click="doIt"> <input type="button" value="v-on简写" @click="doIt"> <input type="button" value="双击事件" @dblclick="doIt"> <h2 @click="changeFood">{{food}}</h2> </div> <script> var app = new Vue({ el: '#app', data: { food: '西红柿炒鸡蛋' }, methods: { doIt: function () { //逻辑 alert("做it"); }, changeFood: function () { this.food += "好好吃" } }, }) </script> </body> </html>
结果：
点击事件绑定或者v-on简写或者双击事件，会：
点击西红柿炒鸡蛋：
说明：v-on可以为标签绑定事件，语法：v-on:事件名="方法名" ，可以使用@事件名="方法名"进行简写。改变标签里的内容可以利用this进行修改，内容会同步更新。
二、使用带参数的函数和事件修饰符
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="按钮" @click="doIt(1,2)"> <input type="text" @keyup.enter="sayHi"> </div> <script> var app = new Vue({ el: '#app', data: { arr: ['mike', 'bob', 'tom', 'jack'], arr2: [{ color: 'red' }, { color: 'blue' }, { color: 'yellow' }], }, methods: { doIt: function (p1, p2) { alert(p1 + p2); }, sayHi: function () { alert("你好啊"); }, }, }) </script> </body> </html>
效果：
点击按钮：
说明：在html标签中使用v-on时，参数保持一致即可。
在输入框中随便输入什么，按下回车键：
说明：v-on还可以使用各种各样的事件，具体可参考文档。