vue事件传参，修饰符,键盘事件

pqxpq

已于 2023-03-09 13:23:58 修改

阅读量249

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-03-09 11:34:31 首次发布

本文链接：https://blog.csdn.net/qq_52563729/article/details/129418470

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

事件基础以及传入参数

事件处理的写法：

不传入参数

<button @click="show1">点击调用vue实例,不传参</button>

传入参数的写法

<button @click="show2($event,66)">点击调用vue实例,传参</button>

@cilck=“这里写vue实例里面的事件名（参数列表）”

总体代码：

    <div id="root1">
        <!--设置两个事件来进行试验-->
        <button @click="show1">点击调用vue实例,不传参</button>
        <button @click="show2($event,66)">点击调用vue实例,传参</button>
    </div>
    <script>
        new Vue({
            el:"#root1",
            data:{
                name:"xppp",
            },
            methods:{
                show1(event){
                    console.log("调用show1");
                },
                show2(event,a){
                    console.log("调用了show2",event,a);
                }
            }
        })
    </script>

注意点：

1.我们所有的响应函数都必须写在methods里面，写在data里面也可以，但是vue实例会对函数进行数据代理，但是函数不需要数据代理，会让vue的负担加重

2.如果我们需要留下我们的event参数，那么我们要在写html代码里面留下占位参数$event

show2($event,66)

3.函数不能写成箭头函数，否则我们的this将会指向window

修饰符

Vue中的事件修饰符:
1.prevent:阻止默认事件（常用）;

<!--prevent阻止默认事件-->
        <a href="www.baidu.com" @click.prevent="show1">点击</a>

2.stop:阻止事件冒泡（常用）;

    <!--stop阻止冒泡事件-->
        <div class="demo1" @click="show1">
            <button @click.stop="show1">惦记我提示信息</button>
        </div>

3.once:事件只触发一次（常用）;

<!--once只事件触发一次-->
        <button @click.once="show1">惦记我提示信息</button>

4.capture:使用事件的捕获模式;
在捕获阶段就发生事情

5.self:只有event.target是当前操作的元素时才触发事件;

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
移动端优化会用！！！

7.修饰符可以连续写

@click.stop.prevent="shouw"

既阻止了事件的冒泡又阻止了默认行为

键盘事件：

什么是键盘事件，就是键盘点击后进行的操作，常见的键盘事件可以分为九种：

1.Vue中常用的按键别名:
1.回车=>enter
2.删除=>delete(捕获“删除”和“退格”键)
3.退出=>esc
4.空格=>space

5.换行=> tab（特殊，必须配合keydown去使用)
为什么配合keyup不行？
因为tab键会有默认的换行的功能，在我们按下之后会进行换行工作

<body>
    <div id="root1" >
        <input type="text" placeholder="按下tab提示" @keydown.tab="show">
    </div>

    <script>
        new Vue({
            el:"#root1",
            methods:{
                show(e){
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>

6.下=>down
7.左=> left
8.右=> right
9.上=> up

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
比如说我们要使用我们的中英文切换键来实现输入

<div id="root1" >
        <input type="text" placeholder="按下tab提示" @keydown.caps-lock="show">
    </div>

这里我们键盘代码是CapsLock，但是我们要写成caps-lock

3.系统修饰键（用法特殊）:ctrl、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。

问题:我们就要按下ctrl+y才能运行，其他的不行怎么做？

在这里插入图片描述

在ctrl后面加个.y

4.也可以使用keyCode去指定具体的按键（不推荐)
直接使用建码

@keydown.13

5.Vue.config.keyCodes.自定义健名=键码，可以去定制按键别名

<body>
    <div id="root1" >
        <input type="text" placeholder="按下tab提示" @keydown.huiche="show">
    </div>

    <script>
        Vue.config.keyCodes.huiche=13//定义别名按键
        new Vue({
            el:"#root1",
            methods:{
                show(e){
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>
</html>