事件
传递参数
在事件函数上传递参数
代码示例
<!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>
