本文主要是介绍Vue8基础：事件处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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>
这篇关于Vue8基础：事件处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
