vue-处理用户交互

最新推荐文章于 2024-05-28 11:44:38 发布

薛定谔的猫不是猫，是王维诗里的猫

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量470

点赞数

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

本文链接：https://blog.csdn.net/m0_53614495/article/details/126896292

版权

vue 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

一、事件的监听与处理

1、事件监听示例

使用@click直接绑定单击事件方法，是一种基础的用户交互处理方法，当然，我们也可以直接将要执行的逻辑代码放入@click赋值的地方。通常事件处理方法都不是单行js代码能够搞定的，更多时候我们使用的是绑定方法函数。

<div class="app">
        <button @click="addCount">点我</button>
        <!-- 等价于 -->
        <button @click="count++">点我</button>
        <div class="message">点击次数{{count}}</div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                addCount() {
                    this.count++
                }
            },
        })
    </script>

click函数并没有参数，实际上当触发我们绑定的事件函数时，系统会自动将当前的Events对象传递到函数中去。

addCount(event) {

this.count++

console.log(event);

}

event对象中会存储当前事件的许多信息。

绑定DOM元素执行事件的函数需要自定义传递参数怎么办？

我们需要在绑定事件时，需要给绑定事件传入$event参数。

<div class="app">
        <button @click="addCount(2,$event)">点我</button>
        <div class="message">点击次数{{count}}</div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                addCount(step, event) {
                    this.count += step
                    console.log(event);
                }
            },
        })

2、多事件处理

多事件处理是指对于同一个用户交互事件，需要调用多个方法进行处理。在vue中，绑定事件时支持使用都好对多个函数进行调用绑定。

注意绑定多个事件需要带小括号。

<div class="app">
        <button @click="addCount(),log($event)">点我</button>~~{{count}}
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                addCount() {
                    this.count++
                },
                log(event) {
                    console.log(event);
                }
            },
        })
    </script>

3、事件修饰符

当我们在页面上触发了一个单机事件，当事件从父组件传递到子组件时，就是，这一过程被称为事件捕获。当事件从子组件传递到父组件时，这一过程被称为事件冒泡。

在vue中使用@click的方式绑定事件时，默认监听的是DOM事件的冒泡阶段。

点击内层按钮，触发冒泡。

<style>
        .outside {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .middle {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .inside {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

    <div class="app">
        <div class="outside" @click="click3">
            <div class="middle" @click="click2">
                <div class="inside" @click="click1"></div>
            </div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            methods: {
                click1() {
                    console.log('我是内层');
                },
                click2() {
                    console.log('我是中层');
                },
                click3() {
                    console.log('我是外层');
                },
            },
        })
    </script>

结果：

如果需要监听事件捕获，就需要事件修饰符capture，可以将监听事件的实际设置为捕获阶段。

点击内层按钮，触发捕获。

<style>
        .outside {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .middle {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .inside {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

    <div class="app">
        <div class="outside" @click.capture="click3">
            <div class="middle" @click.capture="click2">
                <div class="inside" @click.capture="click1"></div>
            </div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            methods: {
                click1() {
                    console.log('我是内层');
                },
                click2() {
                    console.log('我是中层');
                },
                click3() {
                    console.log('我是外层');
                },
            },
        })
    </script>

结果：

在有些场景，当用户点击内层按钮时，我们只想触发绑定在内层内层组件的方法，我们就需要使用stop修饰符，stop可以阻止事件的传递。

<style>
        .outside {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .middle {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .inside {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>

    <div class="app">
        <div class="outside" @click.stop="click3">
            <div class="middle" @click.stop="click2">
                <div class="inside" @click.stop="click1"></div>
            </div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            methods: {
                click1() {
                    console.log('我是内层');
                },
                click2() {
                    console.log('我是中层');
                },
                click3() {
                    console.log('我是外层');
                },
            },
        })
    </script>

结果：

事件修饰符可以串联使用。

@click.stop.once=""

once只触发一次事件

self当事件对象的target属性是当前组件时才触发

prevent禁止默认事件

passive不禁止默认事件

二、Vue中的事件类型

1、常用事件类型

<div class="app">
        <button @click="click">单击事件</button>
        <button @dblclick="dblclick">双击事件</button>
        <input type="text" @change="change" @blur="blur" @focus="focus" @select="select">
        <button @mousedown="mousedown">鼠标按键被按下事件</button>
        <button @mouseup="mouseup">鼠标按键抬起事件</button>
        <button @mousemove="mousemove">鼠标在组件内移动事件</button>
        <button @mouseout="mouseout">鼠标移出组件事件</button>
        <button @mouseover="mouseover">鼠标移入组件事件</button>
        <input type="text" @keydown="keydown" @keyup="keyup">
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            methods: {
                click() {
                    console.log('单击事件！');
                },
                dblclick() {
                    console.log('双击事件！');
                },
                focus() {
                    console.log('获取焦点事件！');
                },
                blur() {
                    console.log('失去焦点事件！');
                },
                change() {
                    console.log('change事件！');
                },
                select() {
                    console.log('选中事件！');
                },
                mousedown() {
                    console.log('鼠标按键被按下事件!');
                },
                mouseup() {
                    console.log('鼠标按键抬起事件!');
                },
                mousemove() {
                    console.log('鼠标在组件内移动事件!');
                },
                mouseout() {
                    console.log('鼠标移出组件事件！');
                },
                mouseover() {
                    console.log('鼠标移入组件事件!');
                },
                keydown() {
                    console.log('键盘按键被按下！');
                },
                keyup() {
                    console.log('键盘按键抬起！');
                }
            },
        })

注意：单击事件时鼠标抬起事件。

2、按键修饰符

当需要对键盘按键进行监听时，我们通常使用keyup参数，如果仅仅要对某个按键进行监听，可以通过event对象来判断。

<div class="app">
        <input type="text" @keyup="pressEnter">
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            methods: {
                pressEnter(event) {
                    if (event.key == 'Enter') {
                        console.log('回车键被点击了！');
                    }
                }
            },
        })
    </script>

等价于

<div class="app">
        <input type="text" @keyup.enter="pressEnter">
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            methods: {
                pressEnter() {
                    console.log('回车键被点击了！');
                }
            },
        })
    </script>

修饰符的命名规则与Event对象中属性key值得命名规则略有不同，Event对象中的属性采用的是大写字母驼峰法，如Event、pageDown，在使用按键修饰符时需要将其转换为中画线驼峰法。如enter、page-down。

vue还提供了一些特殊的系统按键修饰符，这些修饰符是配合其他键盘按键或鼠标按键进行的。主要有以下4种。ctrl、alt、shift、meta。

<input type="text" @keyup.ctrl="press"> 只有配合ctrl键按下才会触发！

<input type="text" @keyup.alt.enter="press"> 只有同时按下enter加alt键才会触发！

上面的代码，只要满足了alt+enter就会触发此事件，即使用户再按下shift键时也会触发。如果要进行精准的按键修饰，可以使用exact修饰符，使用这个修饰符后，只有精准地满足按键的条件才会触发事件。

<input type="text" @keyup.alt.enter.exact="press">

vue中还有三个常用的鼠标按键修饰符，一般左键用来选择，右键用来配置。

left right middle

三、范例

1、随鼠标移动的小球

<style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            margin: auto;
            position: relative;
        }

        .box .ball {
            width: 25px;
            height: 25px;
            background-color: #fff;
            border-radius: 25px;
            position: absolute;
        }
    </style>

    <div class="app">
        <div class="box" @mousemove="move">
            <div class="ball" :style="{top:top+'px',left:left+'px'}"></div>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    left: 0,
                    top: 0
                }
            },
            methods: {
                move(event) {
                    let ballWidth = (document.querySelector('.ball').offsetWidth) / 2
                    let ballHeight = (document.querySelector('.ball').offsetHeight) / 2

                    console.log(event.offsetX, event.offsetY);
                    //边界检测
                    if (event.offsetX <= ballWidth) {
                        event.offsetX = ballWidth
                    } else if (event.offsetX >= document.querySelector('.box').offsetWidth - ballWidth) {
                        event.offsetX = document.querySelector('.box').offsetWidth - ballWidth
                    } else if (event.offsetY <= ballHeight) {
                        event.offsetY = ballHeight
                    } else if (event.offsetY >= document.querySelector('.box').offsetHeight - ballHeight) {
                        event.offsetY = document.querySelector('.box').offsetHeight - ballHeight
                    } else {
                        this.left = event.offsetX - ballWidth
                        this.top = event.offsetY - ballWidth
                    }
                }
            },
        })
    </script>

2、弹球小游戏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <style>
        .container {
            position: relative;
            width: 500px;
            height: 400px;
            background-color: #ccc;
            margin: auto;
        }

        .ball {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 25px;
            background-color: #fff;
        }

        .board {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 10px;
            background-color: pink;
        }
    </style>
    <div class="app">
        <div class="container" @mousemove="move">
            <div class="ball" :style="{left:ballX+'px',top:ballY+'px'}"></div>
            <div class="board" :style="{left:boardX+'px'}"></div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '.app',
            data() {
                return {
                    //控制弹球位置
                    ballX: 0,
                    ballY: 0,
                    //控制弹球移动速度
                    rateX: 0,
                    reteY: 0,
                    //控制木板位置
                    boardX: 0,
                    //定时器
                    timer: null
                }
            },
            mounted() {
                this.rateX = Math.random()
                this.reteY = Math.random()
                timer = setInterval(() => {
                    if (this.ballX < 0) {
                        this.rateX *= -1
                    } else if (this.ballY < 0) {
                        this.reteY *= -1
                    } else if (this.ballX >= document.querySelector('.container').offsetWidth - document.querySelector('.ball').offsetWidth) {
                        this.rateX *= -1
                    }
                    this.ballX += this.rateX
                    this.ballY += this.reteY
                    //接住了小球
                    if (this.ballY >= document.querySelector('.container').offsetHeight - document.querySelector('.ball').offsetHeight - document.querySelector('.board').offsetHeight) {
                        if (this.ballX > this.boardX - document.querySelector('.ball').offsetWidth && this.ballX < this.boardX + document.querySelector('.board').offsetWidth + document.querySelector('.ball').offsetWidth) {
                            this.reteY *= -1
                        } else {
                            alert('抱歉，你没有接住小球，游戏失败！')
                            clearInterval(timer)
                        }
                    }
                }, 1)
            },
            methods: {
                move(event) {
                    this.boardX = event.offsetX - (document.querySelector('.board').offsetWidth) / 2
                    if (this.boardX >= document.querySelector('.container').offsetWidth - document.querySelector('.board').offsetWidth) {
                        this.boardX = document.querySelector('.container').offsetWidth - document.querySelector('.board').offsetWidth
                    }
                    if (this.boardX <= (document.querySelector('.board').offsetWidth) / 2) {
                        this.boardX = 0
                    }
                }
            },
        })
    </script>


</body>

</html>