Vue3 | 事件处理知识以及相关修饰符实战

凌川江雪

发布于 2021-03-05 11:17:42

97900

代码可运行

文章被收录于专栏：李蔚蓬的专栏李蔚蓬的专栏

运行总次数：0

代码可运行

完整原文地址见简书https://cloud.tencent.com/developer/article/1797878

本文内容提要

简单的事件逻辑，可以直接用表达式代替函数作为 @click**的参数**
MouseEvent对象了解
事件函数传入参
事件函数传入参同时获取原生MouseEvent对象的写法
一个按钮同时触发多个回调函数的写法
Vue的事件传递
Vue的默认事件传递是**由里而外**的【与安卓 自上而下的事件分发机制 恰恰相反】
可以使用**.stop**修饰符，拦截事件外传
@click**的**.self**修饰符**
@click**的**.capture**修饰符**
@click**的**.once**/**.prevent**修饰符**
@click**的鼠标修饰符**left**、**right**、**middle
@click**的精确修饰符**.exact
@scroll.passive**的**.passive**可以提高滚动性能**
按键事件指令**@keydown**
@keydown**的按键修饰符**.enter
@keydown**的按键修饰符**tab**、**delete**、**esc**、**up**、**down**、**left**、**right**等**

简单的事件逻辑，可以直接用表达式代替函数作为 `@click`的参数

methods函数型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick() {
                this.counter += 1;
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='handleBtnClick'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>
</html>

简化表达式型：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='counter += 1'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：

MouseEvent对象了解

事件响应函数无入参时，默认第一个参数，即是**MouseEvent**对象：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick(event) {
                console.log(event);
                this.counter += 1;
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='handleBtnClick'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

点击打印**MouseEvent对象**：

其中，**event.target**是被点击到的组件：

<script>
...
        methods:{
            handleBtnClick(event) {
                console.log(event.target);
                this.counter += 1;
            }
        },
...
</script>

效果图：

事件函数传入参

案例代码：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick(num) {
                this.counter += num;
                console.log(this.counter);
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='handleBtnClick(2)'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

实现内容即，点击按钮时，counter加2：

事件函数传入参同时获取原生MouseEvent对象的写法

即如**<button @click='handleBtnClick(2, $event)'>button</button>**，

在事件函数调用时候，**末尾入参**处，加上入参变量**$event**：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick(num ,event) {
                this.counter += num;
                console.log(this.counter);
                console.log(event);
                console.log(event.target);
            }
        },
        template: `
        <div>
            {{counter}}
            <button @click='handleBtnClick(2, $event)'>button</button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

点击打印：

一个按钮同时触发多个回调函数的写法

在**methods**中准备好回调方法，

将**要回调的函数名**以逗号隔开，作为**@click**的参数即可：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleBtnClick1(num ,event) {
                this.counter += num;
                console.log('handleBtnClick1:', this.counter);
                console.log(event);
                console.log(event.target, '<br>');
            },
            handleBtnClick2(num ,event) {
                this.counter += num;
                console.log('handleBtnClick2:', this.counter);
                console.log(event);
                console.log(event.target, '<br>');
            }

        },
        template: `
        <div>
            {{counter}}
            <button 
                @click='handleBtnClick1(2, $event), handleBtnClick2(6, $event)'>
                button
            </button>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

运行代码，点击按钮一次，效果：

Vue的事件传递

Vue的默认事件传递是**由里而外**的【与安卓 自上而下的事件分发机制 恰恰相反】：

如下，我们设置一层div组件，里面套着一个button，

内外两层皆设置点击事件，进行观察：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleDivClick() {
                console.log("handleDivClick");
            },
            handleBtnClick() {
                console.log("handleBtnClick");
            }
        },
        template: `
        <div>
            {{counter}}
            <div @click="handleDivClick">
                <button @click="handleBtnClick">button</button>
            </div>    
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>
</html>

运行，点击按钮，日志如下，

验证了 Vue的**事件传递**是**由里而外**的：

可以使用**.stop**修饰符，拦截事件外传：

<script>
...
        template: `
        <div>
            {{counter}}
            <div @click="handleDivClick">
                <button @click.stop="handleBtnClick">button</button>
            </div>    
        </div>`
    });
...
</script>

运行，点击按钮，效果如下，成功拦截：

`@click`的`.self`修饰符

修饰在外层DOM组件的**@click**上，

使得仅在点击 外层组件本身（如下代码的外层<div>） 或 仅隶属于外层组件**的组件（如下代码的**{{counter}}**）的时候，**

才会回调**外层组件**的回调方法，

而点击内部标签组件元素（如下代码的**button**）时候，

不会触发**外层组件**的回调方法：

<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods:{
            handleDivClick() {
                console.log("handleDivClick");
            },
            handleBtnClick() {
                console.log("handleBtnClick");
            }
        },
        template: `
        <div>
            <div @click.self="handleDivClick">
                {{counter}}
                <button @click="handleBtnClick">button</button>
            </div>    
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

`@click`的`.capture`修饰符

.capture**修饰符使得**事件处理顺序**变成**从外到内**:**

<script>
    ...
        template: `
        <div>
            <div @click.capture="handleDivClick">
                {{counter}}
                <button @click="handleBtnClick">button</button>
            </div>    
        </div>`
    });
  ...
</script>

运行效果：

`@click`的`.once`/`.prevent`修饰符

.once**使得对应事件仅执行一次；**

.prevent**则用于阻止默认行为；**

这两个修饰符在之前的博客中都有涉及过；

`@click`的鼠标修饰符`left`、`right`、`middle`

左键、右键、中间滚轮

`@click`的精确修饰符`.exact`

常规点击修饰符修饰组件，如：

<script>
    const app = Vue.createApp({
        methods:{
            handleClick() {
                console.log("click");
            }
        },
        template: `
        <div>
            <input @click.ctrl="handleClick"/>
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

按住ctrl键或者按住ctrl键同时按住其他键，再点击组件，都可以响应回调：

加上**.exact**之后，只有单独按ctrl键点击组件才响应：

<div @click.ctrl.exact="handleClick">123456</div>

`@scroll.passive`的`.passive`可以提高滚动性能

按键事件指令`@keydown`

常规的按键回调指令是**@keydown**，

被该指令修饰的组件，只要点击了，就会触发相关的回调方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        methods:{
            handleKeyDown() {
                console.log("keyDown");
            }
        },
        template: `
        <div>
            <input @keydown="handleKeyDown"/> 
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>
</html>

`@keydown`的按键修饰符`.enter`

当**.enter**修饰**按键事件指令**时，对应的组件需要输入**回车键**，

才会触发**按键事件**keydown**回调**：

<script>
    const app = Vue.createApp({
        methods:{
            handleKeyDown() {
                console.log("keyDown");
            }
        },
        template: `
        <div>
            <input @keydown.enter="handleKeyDown"/> 
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：

`@keydown`的按键修饰符`tab`、`delete`、`esc`、`up`、`down`、`left`、`right`等

意义同理于以上的**.enter**，被修饰的对应的组件需要输入**对应修饰符的键**，

才会触发**按键事件**keydown**回调**；

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

编程算法

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

jquery

编程算法

vue.js

登录后参与评论

0 条评论

热度