学习Vue第三天-事件修饰符

最新推荐文章于 2023-12-27 14:31:10 发布

wgm_123

最新推荐文章于 2023-12-27 14:31:10 发布

阅读量96

点赞数

分类专栏： Vue 文章标签：学习 Powered by 金山文档

本文链接：https://blog.csdn.net/wgm_123/article/details/128499285

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

常用的三个事件修饰符

prevent:阻止默认事件发生

在代码中加入这一行后，会阻止默认事件的发生（不发生页面跳转），执行showinfo()

stop:阻止冒泡发生

        <div v-on:click="showinfo" style="background-color: bisque; width: 100px;height: 100px;">
            <button v-on:click="showinfo">点击我显示更多</button>
        </div>
    </div>

当点击按钮时，弹窗会弹出两次，

先弹出因为按钮点击引起的事件，再弹出因点击到了盒子所触发的事件，这就是冒泡。

当stop加到盒子事件的时候，这种情况会消失。

once事件只触发一次

     <button v-on:click.once="showinfo1">点击我显示更多</button>

点击按钮后，弹窗只会弹出一次。

常用的键盘事件

Vue中常用的按键别名

回车=》enter

删除=》delete（捕获删除和退格键）

退出=》esc

空格=》space

换行=》tab(必须搭配keydown使用，搭配Keyup会倒致切换焦点，事件无法执行。)

上=》up

下=》down

左=》left

右=》right

Vue里面常用@keyup或者@keydown来绑定按键事件

<body>
    <div id="demo">
        <h3>欢迎来学习{{name}}</h3>
        <input type="text" placeholder="按下回车出现提示" @keyup.enter="showinfo">
    </div>

    <script type="text/javascript">
             Vue.config.productionTip = false;
        var vm=new Vue({
            el:'#demo',
            data:{
                name:'Vue'
            },
            methods:{
                showinfo(e){
                    console.log(e.target.value);
                }
            }
        })
    </script>

</body>

根据Vue提供的9个按键可以实现我们想要的功能

2.但是现在如果我们想要使用未给我们提供的按键，又该如何呢？

键盘上每一个键都有名字和编码

比如回车名字(Key)时Enter,编码（KeyCode）是13

因此我们可以使用键的原始Key值（即名字）去绑定相应的按键，但名字是两个字母的要要分别小写且要以下划线分割开来。

例如切换大小写的按键caps-lock的形式才可以

3.特殊的系统修饰键 ctrl,alt,shift,meta键

配合keyup需要在按下修饰键的基础上，按下其他键才会生效

配合keydown正常使用。