<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #parent{ width: 200px; height: 200px; background-color: #0000FF; } #son{ width: 100px; height: 100px; background-color: #008000; } </style> </head> <!-- 1. 绑定监听: v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参: event 隐含属性对象: $event 2. 事件修饰符: .prevent : 阻止事件的默认行为 event.preventDefault() .stop : 停止事件冒泡 event.stopPropagation() 3. 按键修饰符 .keycode : 操作的是某个keycode值的健 注意按键修饰符是按键名的只有少数特殊按键可以这么简写 .enter : 操作的是enter键 --> <body> <div id="d1"> <button @click="c1()">c1</button> <button @click="c2('c2_haha')">c2</button> <button @click="c3('c3_haha')">c3</button> <div id="parent" @click="par()"> <div id="son" @click="son()"></div> </div> <a href="http://www.baidu.com" @click="dianji()">跳转</a> <!-- 当我输入回车的时候才会触犯sr事件 --> <input type="text" @keyup.enter="shuru($event)" /> </div> <script type="application/javascript" src="js/vue.js"></script> <script type="application/javascript"> new Vue({ el : "#d1", data:{ }, methods : { c1(){ alert("我是c1"); }, c2(a){ alert("我是c2"+a); }, c3(a){ alert("我是c3"+a); }, par(){ alert("我是父亲"); }, son(){ alert("我是儿子"); /* 阻止事件冒泡 */ event.stopPropagation(); }, dianji(){ alert("不能跳转"); /* 阻止事件默认行为 */ event.preventDefault(); }, shuru(e){ if(e.keyCode=13){ alert("我要提交"); } } } }) </script> </body> </html>