Vue2事件及事件修饰符

2023-08-30 30

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 从基础到实战，我们一环都不要少！

事件

传递参数

在事件函数上传递参数

代码示例

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

<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{
  { count }}</h1>
        <button @click="add(2)"> 🙋‍♀️ </button>
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            data: {
    
                count: 0
            },
            methods: {
    
                add(n) {
    
                    this.count += n
                }
            }
        })
    </script>
</body>

</html>

传递事件对象

代码示例

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

<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{
  { count }}</h1>
        <button @click="add(3,$event)"> 🙋‍♀️ </button>
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            data: {
    
                count: 1
            },
            methods: {
    
                add(n, event) {
    
                    this.count *= n
                    console.log(event)
                }
            }
        })
    </script>
</body>

</html>

---控制台---
PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
isTrusted: true
altKey: false
altitudeAngle: 1.5707963267948966
azimuthAngle: 0
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable:true
clientX: 22
clientY: 95
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
height: 1
isPrimary: false
layerX: 22
layerY: 95
metaKey: false
movementX: 0
movementY: 0
offsetX: 13
offsetY: 8
pageX: 22
pageY: 95
pointerId: 1
pointerType: "mouse"
pressure: 0
relatedTarget: null
returnValue: true
screenX: 70
screenY: 225
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: button
tangentialPressure: 0
target: button
tiltX: 0
tiltY: 0
timeStamp: 7497.4000000059605
toElement: null
twist: 0
type: "click"
view: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
which: 1
width: 1
x: 22
y: 95
[[Prototype]]: PointerEvent

就一定要在调用时从传入$event,才可以在函数内打印出事件对象吗?

当绑定事件时，没有加小括号，会自动传入事件对象，如果加小括号，并且需要用到事件对象时，需要手动传入事件对象:$event

代码示例

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

<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="del"> 🙋‍♀️ </button>
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            methods: {
    
                del(e) {
    
                    console.log(e);
                }
            }
        })
    </script>
</body>

</html>

---控制台---
PointerEvent

事件修饰符

prevent

阻止默认事件

代码示例

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .box {
    
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div @contextmenu.prevent="rightMnue" class="box">
            {
  {msg}}
        </div>
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            data: {
    
                msg: "Vue"
            },
            methods: {
    
                rightMnue() {
    
                    console.log('right click')
                }
            }
        })
    </script>
</body>

</html>

stop

阻止事件冒泡(事件冒泡是从内到外)

代码示例

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .big-box {
    
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .small-box {
    
            width: 60px;
            height: 60px;
            background-color: pink;
        }
    </style>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app"></div>
    <div class="big-box" @click="bigBox">
        <h1>big box</h1>
        <div class="small-box" @click.stop="smallBox">
            <h6>small box</h6>
        </div>
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            data: {
    },
            methods: {
    
                bigBox() {
    
                    console.log('小盒子被点击')
                },
                smallBox() {
    
                    console.log('小盒子被点击')
                }
            }
        })
    </script>
</body>

</html>

---控制台---
点击大盒子
log: 
大盒子被点击

点击小盒子
log: 
小盒子被点击 大盒子被点击

capture

事件捕获(事件捕获是从外到内)

代码示例

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .big-box {
    
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .small-box {
    
            width: 60px;
            height: 60px;
            background-color: pink;
        }
    </style>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app"></div>
    <div class="big-box" @click.capture="bigBox">
        <h1>big box</h1>
        <div class="small-box" @click="smallBox">
            <h6>small box</h6>
        </div>
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            data: {
    },
            methods: {
    
                bigBox() {
    
                    console.log('小盒子被点击')
                },
                smallBox() {
    
                    console.log('小盒子被点击')
                }
            }
        })
    </script>
</body>

</html>

---控制台---
点击大盒子
log: 大盒子被点击了
点击小盒子
log: 大盒子被点击 小盒子被点击

self

只有当事件的target是当前元素的时候,才会触发事件

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .big-box {
    
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .small-box {
    
            width: 60px;
            height: 60px;
            background-color: pink;
        }
    </style>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app"></div>
    <div class="big-box" @click.self="bigBox">
        <h1>big box</h1>
        <div class="small-box" @click.self="smallBox">
            <h6>small box</h6>
        </div>
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            data: {
    },
            methods: {
    
                bigBox(e) {
    
                    console.log('小盒子被点击', e.target)
                },
                smallBox(e) {
    
                    console.log('小盒子被点击', e.target)
                }
            }
        })
    </script>
</body>

</html>

once

表示事件是一次性绑定

代码示例

<div class="small-box" @click.once="smallBox">
small box
</div>

键盘事件修饰符

这些都是Vue封装好的键盘修饰符

enter
space 空格
delete
tab
shift
contrl
alt
esc

代码示例

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" @keyup.enter="add">
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            data: {
    },
            methods: {
    
                console.log('你点击了Enter键')
            }
        })
    </script>
</body>

</html>

那对于键盘上未被 Vue 封装的按键呢?

可以使用其 keyCode 值

例如 A 键的 keyCode 为 65

<input type="text" @keyup.65="keyup">

鼠标事件修饰符

left

只有左键可以触发事件

middle

只有中间滚轮可以触发事件

right

只有右键可以触发事件

修饰符使用

代码示例

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .box {
    
            width: 200px;
            height: 200px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" @mouseup.left="mouseup"></div>
    </div>
    <script>
        let app = new Vue({
    
            el: "#app",
            methods: {
    
                mouseup(e) {
    
                    console.log(e);
                }
            }
        })
    </script>
</body>

</html>

文章标签：

JavaScript

Vue2事件及事件修饰符

事件

传递参数

传递事件对象

事件修饰符

键盘事件修饰符

鼠标事件修饰符

热门文章

最新文章

相关电子书