vue3 基础-事件绑定 & 修饰符
无非就是 js 的一些 事件, 按键, 鼠标 等的一些绑定在 vue 的实现而已, 很好理解. 先来看一个基础例子.
事件初体验
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件绑定</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { counter: 1 }
},
methods: {
handleClick () { this.counter += 1 }
},
template: `
<div>
{{counter}}
<button @click="handleClick">增1</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
则表示给这个 "增1" 的按钮绑定了一个 "点击" 的方法叫 "handleClick", 每点击一次则 counter 的值就加1.当然这里其实还可以简写, 就不用写在 methods 里面, 但不建议这样写, 是简洁了, 但是不够优雅吧.
template: `
<div>
{{counter}}
<button @click="counter += 1">增1</button>
</div>
`
获取原生事件对象 & 函数传参
有的时候我们想要获取到原生 js 的 event 对象, 同时又想在触发事件的时候传递参数, 二者要能同时实现:
<!DOCTYPE html>
<html lang="en">
<head>
<title>获取原生事件对象event</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
counter: 1
}
},
methods: {
handleClick (num, e) {
console.log(e)
this.counter += num
}
},
template: `
<div>
{{counter}}
<button @click="handleClick(3, $event)">增1</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
函数是可以传参数的, dom 里面穿实参, 定义的形参放在 methods 里面
$event 是一个关键字, 表示原生 js 的 event 对象啦
<button @click="handleClick(3, $event)">增1</button>
handleClick (num, e) {
console.log(e)
this.counter += num
}
一个事件可绑定多个函数
<!DOCTYPE html>
<html lang="en">
<head>
<title>获取原生事件对象 event</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
counter: 1
}
},
methods: {
handleClick1 (num) {
this.counter += num
},
handleClick2 (num) {
alert('click2')
}
},
template: `
<div>
{{counter}}
<button @click="handleClick1(2), handleClick2()">多函数</button>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里同一个点击事件, 会触发 "handleClick1" 和 "handleClick2", 直接用 "," 分割往后写即可, 注意同单个方法不同在于, 多个函数是需要写 "( )" 来表示调用的.
事件修饰符
常用的一些如 stop, prevent, capture, self, once, passive 等. 这里以 阻止冒泡的 stop 来做一个演示.
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
counter: 1
}
},
methods: {
divClick () {
alert('divClick')
},
btnClick (num) {
this.counter += 1
}
},
template: `
<div>
{{counter}}
<div @click="divClick">
<button @click.stop="btnClick">点我</button>
</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
关键在于这里的 .stop 阻止了 button 向外冒泡.
<div @click="divClick">
<button @click.stop="btnClick">点我</button>
</div>
对几个常用的事件修饰符进行梳理如下:
- .stop: 阻止事件冒泡
- .self: 点自己本身(子元素非自身) 才会触发
- .prevent: 阻止默认行为 (如 form 表单的自动跳转)
- .capture: 设置事件从默认的"冒泡"形式转为"捕获"模式 (捕获: 从外到内)
- .once: 设置事件只能执行一次
- .passive: 设置滚动事件( @scroll.passive) 的默认行为, 需注意不能和 .prevent 同时使用
按键修饰符
vue 对一些常用的按键进行了封装, 如 enter, tab, delete, esc, up, down, right, left 等. 这里咱以 enter 键为例做一个演示.
<!DOCTYPE html>
<html lang="en">
<head>
<title>按键修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
methods: {
handleEnter () {
alert('enter!')
}
},
template: `<input @keydown.enter="handleEnter" />`
})
const vm = app.mount('#root')
</script>
</body>
</html>
即点击或者往输入框填内容后, 按下 enter 键则会触发 "handleEnter" 这个函数.
同样对这些常用的按键修饰符做一个梳理如下:
- .enter : 回车键则触发
- .delete: 删除键delete触发
- .esc: 退出键Esc触发
- up, down, left, right : 方向键则触发
鼠标修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<title>鼠标修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
methods: {
handleEnter () {
alert('mouse-right')
}
},
template: `<div @click.middle="handleEnter" >鼠标事件</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里演示以鼠标滚轮为例子, 鼠标事件无法就如下3个场景.
- left: 鼠标左键
- right: 鼠标右键
- middle: 鼠标滚轮
精确修饰符
可理解"多键的精确组合", 要完全按对了才会触发. 这里以 exact 为例, 需求是必须 "按住 ctrl 再 click" 才能触发
<!DOCTYPE html>
<html lang="en">
<head>
<title>精确修饰符</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
methods: {
handleEnter () {
alert('exact!')
}
},
template: `<div @click.ctrl.exact="handleEnter" >精确修饰符</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
总结
本篇内容还是蛮多的, 就最后来波小结吧:
-
事件绑定函数可以传参和绑定多个函数
-
绑定函数时可以在 dom 上传一个实参 $event 则为原生 js 的事件对象
-
事件修饰符: stop, prevent, capture, self, once, passive
-
按键修饰符: enter, tab, delete, esc, up, down, right ...
-
鼠标修饰符: left, right, middle
-
精确修饰符: exact
