1、案例1
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绑定监听</title> </head> <body> <div id="app"> <!--func0没有传参且没有加(),则默认会传$event--> <button @click="func0">我是按钮0</button> <!--func1虽然无参数，但是加了(),则默认不会传$event--> <button @click="func1()">我是按钮1</button> <!--func2有参数时，若需要$event参数，则必须显式的加上才会有--> <button @click="func2('abc',$event)">我是按钮2</button> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { }, methods: { func0(event) { //此时event.target是button按钮 alert(event.target.innerHTML); }, func1(event) { //此时event是undefined }, func2(msg, event) { //此时event.target是button按钮 alert(msg) alert(event.target.innerHTML); } } }); </script> </body> </html>
2、案例2
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>事件修饰符</title> </head> <body> <div id="app"> <!-- 默认情况下点击内层div时，点击事件会向上冒泡， 点击了内层div时会先调用innerFunc方法，再调用outerFunc方法。 解决方法： 在绑定内层div点击事件时加上.stop,阻止事件冒泡， @click.stop阻止点击事件冒泡。 --> <div @click="outerFunc" style=" 200px;height: 200px;background-color: blue;"> <div @click.stop="innerFunc" style=" 100px;height: 100px;background-color: rgb(214, 136, 136);"></div> </div> <!-- 默认情况下点击了超链接会自动跳转到指定的url， 若需要阻止超链接的默认行为，在点击事件上加.prevent就可以了, @click.prevent会阻止超链接的默认行为。 --> <a @click.prevent="clickFunc" href="http://www.baidu.com">我是超链接</a> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { }, methods: { outerFunc() { alert("outerFunc"); }, innerFunc() { alert("innerFunc"); }, clickFunc() { alert("clickFunc"); } } }); </script> </body> </html>
3、案例3
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按键修饰符</title> </head> <body> <!-- 为了在必要的情况下支持旧浏览器， Vue 提供了绝大多数常用的按键码的别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right --> <div id="app"> <!-- 绑定回车事件的2种方式： 1、@keyup.enter 2、@keyup.13,13为回车键的keycode值 --> <input @keyup.enter="func1" type="text" /><br> <input @keyup.13="func2" type="text" /> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { }, methods: { func1() { alert("func1"); }, func2() { alert("func2"); } } }); </script> </body> </html>