事件
在 vue
中,事件通过指令 v-on
进行绑定,v-on
缩写 @
<组件 v-on:事件名称="表达式" />
<组件 @事件名称="表达式" />
一、组件的methods选项
在组件选项中,提供了一个 methods
选项,用来存放组件中使用的函数方法,且存放在 methods
中的函数方法可以通过组件实例(this)进行访问 ,函数方法中也可以通过this访问data中的数据。
二、通过内联方式绑定事件处理函数
<组件 @事件名称="fn" />
<script>
new Vue({
...,
methods: {
fn() {
//...
}
}
})
</script>
- 事件绑定函数中的
this
指向组件实例 -
事件绑定函数中的第一个参数默认为
event
对象
<组件 @事件名称="fn('kaikeba', $event)" />
<script>
new Vue({
...,
methods: {
fn(name, ev) {
//...此处ev即传入的事件对象$event
}
}
})
</script>
也可以在事件绑定中直接调用函数(并不会立即执行,也是通过事件触发执行的)。直接调用函数时,可以传入数据作为参数,此时必须手动传入事件对象$event(名称不能更改,位置前后都可)。
-
直接调用函数时,事件对象需要手动传入,名称为
$event
三、事件修饰符
在事件函数中,我们可以通过 ev.preventDefault()
、ev.stopPropagation()
来阻止默认行为,阻止冒泡,但是中 vue 中提供一些更加方便的方式来处理这些问题,这就是事件修饰符。
3.1 .stop 阻止事件冒泡
<div class="div1" @click="clickDiv">
<button @click.stop="clickBtn">按钮1</button>
<button @click.stop="clickBtn">按钮2</button>
<button @click.stop="clickBtn">按钮3</button>
</div>
3.2 .prevent 阻止事件默认行为
3.3 .capture 是否捕获
3.4 .self
div点击后,子级事件都不会触发,只触发自己的事件
<div class="div1" @click.self="clickDiv">
<button @click="clickBtn">按钮1</button>
<button @click="clickBtn">按钮2</button>
<button @click="clickBtn">按钮3</button>
</div>
3.5 .once 单次绑定
3.6 .passive 是否允许当前元素阻止默认行为
四、按键修饰符
vue
还提供了许多按键修饰符
需要在输入框中使用
4.1 .keyCode
<组件 @keyup.13="fn" />
4.2 .enter
4.3 .down
4.4 .exact
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件</title>
<style>
.div1 {
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="app">
<button @click="fn">Drag : {{canDrag}}</button>
<ul>
<li v-for="user in users" :key="user.id" @click="checkedUser(user,$event)">{{user.name}} -- {{user.checked}}</li>
</ul>
<!-- <div class="div1" @click="clickDiv">
<button @click.stop="clickBtn">按钮1</button>
<button @click.stop="clickBtn">按钮2</button>
<button @click.stop="clickBtn">按钮3</button>
</div> -->
<div class="div1" @click.self="clickDiv">
<button @click="clickBtn">按钮1</button>
<button @click="clickBtn">按钮2</button>
<button @click="clickBtn">按钮3</button>
</div>
<input @keydown.13="clickKeyCode" /> keycode13
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
canDrag: false,
users:[
{id:1,name:'lmf',checked:false},
{id:2,name:'yy',checked:false},
{id:3,name:'ll',checked:false}
]
},
methods: {
fn(){
this.canDrag = !this.canDrag;
console.log(this.canDrag);
},
checkedUser(user,event){
user.checked = !user.checked;
console.log(event);
},
// 需求:当按钮点击时阻止向上冒泡
clickDiv(){
console.log("点击了父级div");
},
clickBtn(ev){
console.log("点击了按钮");
// 原生js阻止冒泡
// ev.stopPropagation();
},
clickKeyCode(){
console.log("点击了keyCode13");
}
}
});
</script>
</body>
</html>
五、原生事件
自定义组件中可以自定义一些事件,可以通过 .native
修饰符来指定监听原生中的事件,而不是组件自定义事件