vue-事件修饰符+键盘事件

事件修饰符

1、prevent：阻止默认事件（或在方法中使用e.preventDefault()）

<a href='https://blog.csdn.net/weixin_52993364?type=blog' @click.prevent='showInfo'>点我</a>

说明：这样点击后就不会发生地址的跳转

2、stop: 阻止事件冒泡(或在方法中使用e.stopPropagation())

3、once：事件只触发一次

4、capture:使用事件的捕获模式

5、self：只有event.target是当前操作的元素才触发事件，类似于阻止默认事件

6、passive: 事件的默认行为立即执行，无需等待事件回调执行完毕（常用语移动端和平板）

<body>
<ul @wheel.passive='demo' class='list'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
<script type='text/javascript'>
    methods: {
        demo() {
            for(i = 0; i < 1000; i++) {
                console.log('666')
            }
            console.log('累死了')
        }

    }

</script>

事件处理

<template>
    <button @click="clickme($event, 666)">点我传个数据</button>
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        clickme(e, number) {
            console.log(e.target.innerText, number);
        }
    }
}
</script>

键盘事件

一、常用的按键别名

1、按下回车enter

<template>
    <input type="text" placeholder="按下回车显示输入" @keyup.enter="showInfo">
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        showInfo(e) {
            console.log(e.target.value);
        }
    }
}
</script>

2、删除 =》delete(捕获‘删除’和‘退格’键)

扫描二维码关注公众号，回复： 15827298 查看本文章

3、退出 =〉esc

4、空格 =》 space

5、换行 =〉tab （@keydown.tab）

6、上 =》 up

7、下 =〉 down

8、左 =》 left

9、右 =〉 right

二、系统修饰键（ctrl、alt、shift、meta）

（1）配合keyup使用：按下修饰键同时，再按下其他键，随后释放其他键，事件才捕获

（2）配合keydown使用：正常触发事件

三、自定义键名

 Vue.config.keyCodes.huiche = 13

总结

事件修饰符可以连着写：

阻止默认也阻止冒泡

<a href='http://www.cc.com' @click.stop.prevent='clickme'>点我</a>

修饰键，只有按下ctrl+y才可以触发：

<input type="text" placeholder="按下回车显示输入" @keydown.ctrl.y="showInfo">