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="component">
<h2>绑定监听</h2>
<button @click="test">不传入参数值</button>
<button @click="test1">不传入参数值（函数包含事件参数）</button>
<button @click="test2('msg')">传入自定义参数值</button>
<button @click="test3($event)">传入事件参数值</button>
<button @click="test4('msg',$event)">传入自定义参数值及事件参数值</button>
<h2>事件修饰符</h2>
<div style="width:100px;heigh:100px;background: #0accff;" @click="test5">
<div style="width:30px;heigh:30px;background: red;" @click.stop="test6"></div>
</div>
<a href="http://www.baidu.com" @click.prevent="test7">(阻止事件的默认行为)--百度一下</a>
<h2>按键修饰符</h2>
<input type="text" @keyup.13="test8">
<input type="text" @keyup.enter="test8">
</div>
<script type="text/javascript" src="../../lib_001_vue/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#component',
data: {},
methods: {
test() {
alert('无参数');
},
test1(event) {
alert(event.target.innerHTML);
},
test2(msg) {
alert('自定义参数'+msg);
},
test3(event) {
alert(event.target.innerHTML);
},
test4(msg,event) {
alert(msg+'---'+event.target.innerHTML);
},
test5(){
alert("outter");
},
test6(){
alert('inner');
},
test7(event){
alert(event.target.innerHTML);
},
test8(event){
alert(event.keyCode+' '+event.target.value);
}
}
});
</script>
</body>