大家先看一下代码，详解在下面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--<button v-on:click="f">登录</button>--> <button @click="f1">登录1</button> <br> <button @click="f2()">登录2</button><br> <hr> <button @click="f3">登录3</button> <br> <button @click="f4()">登录4</button><br> <hr> <button @click="f5">登录5</button> <br> <button @click="f6(1,2)">登录6</button><br> <hr> <button @click="f7(6,8,$event)" id="btn">登录7</button><br> <hr> <div class="plane"> <h3>标题<span @click="isShow = !isShow">{{isShow ? "收起" : "展开"}}</span></h3> <div v-show="isShow" style="width: 200px; height: 200px;background: red">这是一个盒子</div> </div> <a href="" @click.prevent="f8">百度一下~</a> </div> <script> /*document.getElementById("btn").onclick = function(){ 无效了 console.log("哈哈哈") }*/ let vm = new Vue({ el:"#app", data:{ isShow:true }, methods:{ f1(){ console.log("f1点击了...") }, f2(){ console.log("f2点击了...") }, f3(e){ console.log("f3点击了...:",e) }, f4(e){ console.log("f4点击了...:",e) }, // f5调用时，没有加()，函数定义处的第1个参数代表事件对象 f5(a,b){ console.log("f5点击了...:",a,b) }, f6(a,b){ console.log("f6点击了...:",a,b) }, f7(a,b,e){ console.log("f7点击了...:",a,b,e) }, f8(){ console.log("a标签的点击事件") } } }) </script> </body> </html>运行结果如下：
分析如下： vue中的事件处理： 通过v-on指令实现事件绑定 登录 可以简写：<button @click="f">登录</button>
1)对于绑定事件的监听器可以加()，也可以不加()： <button @click="f1">登录1</button> <br> <button @click="f2()">登录2</button>
2)如何得到事件对象： <button @click="f3">登录3</button> f3不加() 方法中第1个参数就代表事件对象 <button @click="f4()">登录4</button> 绑定时如果加了() 方法定义处第1个参数就不代表事件对象 f3(e){ console.log("f1点击了...:",e) }, f4(e){ console.log("f2点击了...:",e) }
3)参数传递： <button @click="f5">登录5</button> 不加() 不能传递数据 <button @click="f6(1,2)">登录6</button> 加(),可以传递数据 f5(a,b){ console.log("f5点击了...:",a,b) }, f6(a,b){ console.log("f6点击了...:",a,b) }, 4)需要事件对象，还需要传递，怎么做？ <button @click="f7(6,8,$event)">登录7</button> f7(a,b,e){ console.log(“f7点击了…:”,a,b,e) }
监听器： 1）如果监听器比较简单，写在行内 2）如果监听器复杂，直接封装一个函数，写在methods中的 vue中使用事件修饰符阻止默认事件： <a href="" @click.prevent="f8">百度一下~</a>
