vue 02 事件处理

1. 绑定监听

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定监听</title>
</head>
<body>
<div id="demo">
    <button @click="test1">test1</button>
    <button @click="test2('abc')">test2</button>
    <button @click="test3">test3</button>
    <button @click="test4('abcd',$event)">test4</button>

</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {},
        methods: {
            test1() {//@xxx="fun"
                alert('test1');
            },
            test2(msg) {// @xxx="fun(参数)"
                alert(msg);
            },
            test3(event) {//默认事件形参: event
                alert(event.target.innerHTML);
            },
            test4(msg, event) {//隐含属性对象: $event
                alert(msg + '---' + event.target.textContent);
                // alert(msg + '---' + event.target.innerHTML); 效果等同
            }
        }
    })
</script>
</body>
</html>

结果：

2. 事件修饰符

prevent阻止事件的默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符prevent</title>
</head>
<body>
<div id="demo">
    <a href="http://www.baidu.com" @click.prevent="test1">百度一下</a>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {},
        methods: {
            test1() {
                alert('点击了链接');
            }
        }
    })
</script>
</body>
</html>

结果：正常情况下，点击了链接，会跳转到相应的地址。由于使用了prevent，阻止了跳转链接的默认行为。

stop停止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符stop</title>
</head>
<body>
<div id="demo">
    <div style="background: pink; width : 200px; height: 200px" @click="test1">
        <div style="background: skyblue; width: 100px; height: 100px" @click.stop="test2"></div>
    </div>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {},
        methods: {
            test1() {
                alert('out');
            },
            test2() {
                alert('inner');
            }
        }
    })
</script>
</body>
</html>

结果：如果不加stop，则点击蓝色的框后，会alert inner 和out。如果加了stop, 则只会alert inner。

3. 按键修饰符

.keycode : 操作的是某个keycode值的键，如.13,表示按键enter
.enter : 操作的是enter键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按键修饰符</title>
</head>
<body>
<div id="demo">
    <input type="text" @keyup.13="test1">
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {},
        methods: {
            test1(event) {
                alert(event.target.value + ' ' + event.keyCode);
            }
        }
    })
</script>
</body>
</html>

vue 02 事件处理

1. 绑定监听

2. 事件修饰符

prevent阻止事件的默认行为

stop停止事件冒泡

3. 按键修饰符

shasha

引用和评论

day34 gulp

手写一个动态海洋和天空效果的vue hooks

原生electron起步-从零到一完成构建和打包

更强大、更灵活！ defineModel 重新定义双向绑定

7天撸完KTV点歌系统,含后台管理系统(完整版)

vue3使用百度地图

彻底搞懂面包屑，手把手封装一个 Vue3 面包屑导航组件