作者：Sam
1. 简介
本篇介绍如何在vue中为元素绑定事件
2. 基本用法
-
在元素上绑定事件名
在元素上，使用例如v-on:click的形式，绑定事件
<input type="button" class="btn btn-danger" value="Get Value" v-on:click="getText">
v-on:click可以简写为@click，例如
<input type="button" class="btn btn-danger" value="Get Value" @click="getText">
其中getText就是事件名
- 在vue对象中，设置事件处理函数
const vm = new Vue({
el: '#div1',
methods: {
getText(){
alert('hello world')
}
}
})
3. 方法传参
3.1 不传参
调用事件函数，如果没有参数，可以不加()，也可以加上，效果是一样的
<input type="button" class="btn btn-danger" value="Get Value" v-on:click="getText()">
<!-- or -->
<input type="button" class="btn btn-danger" value="Get Value" v-on:click="getText">
3.2 传参
- 将需要传递的参数，传递到括号内
<input type="button" class="btn btn-danger" value="@Set Value" @click="setText(new Date())">
在示例中，new Date()就是一个参数
在示例中可以看到，参数可以使用js表达式的方式来传入
- vue对象中的方法，也需要相应来接收这个参数
const vm = new Vue({
el: '#div1',
methods: {
getText(){
alert('hello world')
},
setText(date){
alert(date)
}
}
})
参数名是任意的，只要顺序对于即可
3.3 获取event
- 当不传参的时候
不传参的话，则第一个参数就是event
<input type="button" class="btn btn-info" @click="test01" value="get event">
const vm2 = new Vue({
el: '#text2',
methods: {
// 即使不传参，在没有参数的情况下，第一个参数就是event对象
test01(event){
console.log(event)
}
}
})
-
使用$event来获取
在传递参数的情况下，需要传入$event关键字，来获取event对象
<input type="button" class="btn btn-info" @click="test02('Sam','123',$event)" value="get event2">
const vm2 = new Vue({
el: '#text2',
methods: {
// 在获取参数的时候，需要按照顺序获取
// 参数的名称任意
test02(username,password,event){
console.log(username,password)
console.log(event)
}
}
})
4. methods
4.1 methods不会被代理
methods中所定义的方法，不会和data中的数据一样被代理到vm的_data中
但是vue会把函数复制一份放在vue实例上，以便于调用
4.2 methods中的this
-
methods中的方法，一般使用function的形式写，不推荐使用箭头函数
-
使用function形式写的时候，this指向的当前的vue实例对象
5. 事件修饰符
语法
使用@click.prevent.stop="fn1"的形式，来使用事件修饰符
前三个为常用的选项
事件修饰符可以用链式调用的方式一起调用，例如
@click.prevent.stop="fn1，表示先取消了事件的默认行为，再取消事件的冒泡
| 修饰符名 | 说明 |
|---|---|
| prevent | 阻止默认事件 |
| stop | 阻止事件冒泡 |
| once | 事件只能被触发一次 |
| capture | 使用事件的捕获阶段 |
| self | 只有元素自己触发了事件，才会执行事件函数 |
| passive | 事件的默认行为会在事件处理函数之前优先执行 |
6. 键盘按键
6.1 获取键盘按键
通过@keydown事件对象event中的key，就能获取事件的按键名
<input type="text" class="form-control" @keydown="test01">
const vm4 = new Vue({
el: '#text4',
methods:{
test01(event){
console.log(event.key)
}
}
})
6.2 指定按键绑定
通过@keydown.enter的形式，就能对按键进行绑定
<input type="text" class="form-control" @keydown.a="test02">
const vm4 = new Vue({
el: '#text4',
methods:{
test02(event){
console.log('a 被按下了')
}
}
})
按键的名称，大部分和键盘上的名称相同
| 按键 | vue中名称 |
|---|---|
| Enter | enter |
| backspace delete | delete |
| esc | esc |
| space | space |
| tab | tab |
| 上 | up |
| 下 | down |
| 左 | left |
| 右 | right |
| Ctrl | ctrl |
| Shift | shift |
| Alt | alt |
| meta | meta |
注意点
- tab要使用，需要绑定keydown事件，否则会另元素失去焦点
- ctrl alt shift meta 一般要配合keydown来使用
6.3 自定义按键别名
Vue.config.keyCodes.am = 87
将编码为87的键与“sam”字符串进行绑定
【注意】别名不能使用大写字母
<input type="text" class="form-control" @keydown.sam="test02">
const vm4 = new Vue({
el: '#text4',
methods:{
test02(event){
console.log('sam 被按下了')
}
}
})
6.4 组合键
通过@keydown.ctrl.y的形式，就能设置ctrl+y的组合键
<input type="text" class="form-control" @keydown.ctrl.y="test03">
const vm4 = new Vue({
el: '#text4',
methods:{
test03(event){
alert('Ctrl + y 被按下了')
}
}
})
网友评论