1.v-on语法糖
v-on:click="函数名"，可以简写为@click="函数名"。
2.v-on事件监听传参
其他情况下，如果函数需要参数，但是我们并没有传参，那么该参数就是undefined类型，但是在Vue中，我们在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的（并且只需要一个参数），这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入方法中，比如鼠标点击的数据。
如果我们想要在有参数的同时传入event事件对象，我们可以传入：$event,这样就可以得到浏览器参数了。而且我们也可以传入Vue对象中的data对象中的变量。
而对于没有参数的事件，我们可以直接调用事件函数，不需要小括号。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <button @click="func1">不用参数</button> <button @click="func2">有参不传</button> <button @click="func3('TES牛逼',$event)">多参和浏览器数据</button> <button @click="func4(name)">data数据传参</button> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed: [false, false, false, false], name:"涂博闻" }, computed: { }, methods: { func1(){ console.log("不需要参数"); }, func2(e){ console.log("有参不传"); console.log(e); }, func3(a,e){ console.log("多参和浏览器数据"); console.log(a); console.log(e); }, func4(x){ console.log("data数据传参"); console.log("我的名字是"+x); } } }) </script> </body> </html>3.v-on的修饰符
（1）.stop：关闭事件的冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <div @click="divClick"> <button @click="butClick"> 点击 </button> </div> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed: [false, false, false, false], name:"涂博闻" }, computed: { }, methods: { divClick(){ console.log("事件冒泡"); }, butClick(){ console.log("点击事件"); } } }) </script> </body> </html>使用.stop关闭事件的冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <div @click="divClick"> <button @click.stop="butClick"> 点击 </button> </div> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed: [false, false, false, false], name:"涂博闻" }, computed: { }, methods: { divClick(){ console.log("事件冒泡"); }, butClick(){ console.log("点击事件"); } } }) </script> </body> </html>
（2）.prevent阻止默认行为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <div @click="divClick"> <button @click.stop="butClick"> 点击 </button> </div> <form action="TES"> <input type="submit" value="提交" @click="submitClick"> </form> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed: [false, false, false, false], name:"涂博闻" }, computed: { }, methods: { divClick(){ console.log("事件冒泡"); }, butClick(){ console.log("点击事件"); }, submitClick(){ console.log("关闭默认事件，没有提交"); } } }) </script> </body> </html>我没有向上面加修饰符时
加入修饰符，阻止了默认提交的行为
（3）监听某个键盘的按键
举个例子，@keyup.enter="xxx"就是监听键盘输入的回车，当我按下回车时就会触发事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <input type="text" @keyup.enter="KeyUp"> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed: [false, false, false, false], name:"涂博闻" }, computed: { }, methods: { KeyUp(){ console.log("我按下了ENTER"); } } }) </script> </body> </html>（4）.once可以使得事件监听只会触发一次回调函数
