直接写表达式来进行事件绑定
<body> <div id="app"> <h1>点击次数：{{count}}</h1> <button type="button" @click="count++">点击</button> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ count:0 } }) </script> </body>
获取事件对象
<body> <div id="app"> <h1>点击次数：{{count}}</h1> <button type="button" @click="clickEvent">点击</button> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ count:0 }, methods:{ clickEvent:function(event){ console.log(event)//输出事件对象 console.log(this)//输出vue对象 this.count++ } } }) </script> </body>
事件传参
<body> <div id="app"> <ul> <!-- 点击列表能显示索引值,内容,以及事件对象 --> <li v-for="item,index in stars" @click="clickEvent(index,item,$event)">索引值：{{index}}-----内容：{{item}}</li> </ul> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ stars:[‘蔡徐坤‘,‘吴亦凡‘,‘鹿晗‘] }, methods:{ clickEvent:function(index,value,event){ console.log(index,value,event)//输出事件对象 } } }) </script> </body>
事件修饰符
.stop：阻止单击事件继续传播
<body> <div id="app"> <div class=‘btnParent‘@click="clickParent"> <!-- .stop阻止冒泡事件向上传递 --> <button type="button" @click.stop="clickEvent">按钮</button> </div> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ }, methods:{ clickEvent:function(event){ console.log("clickEvent") }, clickParent:function(event){ console.log("clickParent") } } }) </script> </body>
.prevent：提交事件不再重载页面
<body> <div id="app"> <form action="" method="post"> <input type="text" name="username" id="" value="" /> <!-- .prevent阻止提交默认表单 --> <input @click.prevent="submitMessage" type="submit" value="提交"/> </form> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", methods:{ submitMessage:function(event){ console.log("clickEvent") } } }) </script> </body>
原文：https://www.cnblogs.com/by-young/p/12952131.html