1、事件处理
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="example">
<h2>1. 绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3('atguigu', $event)">test3</button>
<h2>2. 事件修饰符</h2>
<!--
阻止(prevent)事件的默认行为
停止(stop)事件冒泡
-->
<a href="http://www.baidu.com" @click.prevent="test4">百度</a>
<div style="width: 200px;height: 200px;background: red;" @click="test5">
<div style="width: 100px;height: 100px;background: blue;" @click.stop="test6"></div>
</div>
<p @click.once="test6">xxx</p>
<h2>3. 按键修饰符</h2>
<input type="text" v-model="msg" @keyup.13="test7">
<input type="text" v-model="msg" @keyup.enter="test7">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
msg: ''
},
methods: {
test1 (e) {
alert(e.target.innerText)
},
test2 (msg) {
alert(msg)
},
test3 (msg, event) {
alert(msg + '---' + event.target.innerHTML)
},
test4 (event) {
// event.preventDefault();
alert('点击了')
},
test5 () {
alert('out')
},
test6 () {
alert('inner')
},
test7 (event) {
// if (event.keyCode===13) {
alert(this.msg)
// }
}
},
})
</script>
</body>
