Vue第9话 事件处理

逆流者 2020年01月04日 105次浏览

1.绑定监听

  • v-on:xxx="fun"
  • @xxx="fun"
  • @xxx="fun(参数)"
  • 默认事件形参: event
  • 隐含属性对象: $event

2.事件修饰符

  • .prevent : 阻止事件的默认行为 event.preventDefault()
  • .stop : 停止事件冒泡 event.stopPropagation()

3.按键修饰符

  • .keycode : 操作的是某个 keycode 值的键
  • .keyName : 操作的某个按键名的键

4. 编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-事件处理</title>
</head>
<body>
<div id="app-8">
    <h2>1、绑定监听</h2>
    <button v-on:click="test1">Hello one</button>
    <button @click="test1">Hello two</button>
    <button @click="test2($event, 'hello')">Hello three</button>

    <h2>2、事件修饰符</h2>
    <!-- 阻止事件的默认行为 添加这个 prevent-->
    <a href="http://www.baidu.com" @click.prevent="test3">百度一下</a><br><br><br>
    <!-- 停止事件冒泡 stop-->
    <div style="width: 200px;height: 200px;background: red" @click="test4">
        <div style="width: 100px;height: 100px;background: green" @click.stop="test5"></div>
    </div>

    <h2>3、按键修饰符</h2>
    <input @keyup.13="test6"><br><!--13代表enter键-->
    <input @keyup.enter="test6">
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app-8',
        data: {

        },
        methods: {
            //event: 默然事件形参
            test1(event) {
                console.log(event);
                console.log(event.target.innerHTML);
                alert(event.target.innerHTML)
            },
            test2(event, msg) {
                alert(event.target.innerHTML + '----' + msg)
            },
            test3() {
                alert('阻止事件的默认行为测试')
            },
            test4() {
                alert('外部')
            },
            test5() {
                alert('内部')
            },
            test6(event) {
                alert(event.keyCode + '----' + event.target.value)
            }
        }
    });
</script>
</body>
</html>
上一篇： Vue第10话 表单输入绑定