<!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>
