「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。
vue中的事件绑定
使用 v-on 指令
- vue 使用 v-on 绑定事件,无需获取 DOM, 直接在模板中绑定
<button v-on:click="fn($event,1,2)">点我试试</button>
事件函数
- vue 的时间函数写在 methods 属性中
- 示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<button v-on:click="fn($event, 1, 2)">点我试试</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '六六六'
},
methods: {
fn(a, b, c) {
// 1. 如果在绑定时，fn 不带小括号，那么函数会默认接收一个事件对象作为参数
// 2. 如果绑定时带有小括号，那么默认不接收事件对象
// 3. 如果既要事件对象，又要传递参数，需要在小括号中写一个 $event 用来标识事件对象，后面才是真正的参数；
console.log(a);
console.log(b);
console.log(c);
}
}
});
</script>
</body>
</html>
事件修饰符
事件修饰符是什么?
- 为了方便 vue 的事件处理,vue中增加了事件修饰符
- 用法: v-on: 事件名.修饰符
示例:
<a href="/" v-on:click.prevent="fn">点我试试</a>
常见的事件修饰符
- 事件修饰符
- .prevent 组织元素的默认行为
- .stop 阻止事件冒泡
- .capture 事件在捕获阶段触发
- .once 事件只执行一次
- .self 只有触发自身的事件才触发
- 键盘事件修饰符:
- .enter 回车
- .esc 退出
- .delete 退格
- .space 空格
- .tab tab键
- .left 左
- .right 右
- .up 上
- .down 下
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<!-- <button v-on:click="fn($event, 1, 2)">点我试试</button>
<a href="/" v-on:click.prevent="fn">点我试试</a> -->
<div @click="parent">
parent
<div @click="child">
child
<div @click.stop="grandchild">
grandchild
</div>
</div>
</div>
<a href="/" v-on:click.prevent="fn">请点击</a>
<input type="text" @keydown.up="add" v-model="num">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '六六六',
num:1
},
methods: {
// fn(a, b, c) {
// // 1. 如果在绑定时，fn 不带小括号，那么函数会默认接收一个事件对象作为参数
// // 2. 如果绑定时带有小括号，那么默认不接收事件对象
// // 3. 如果既要事件对象，又要传递参数，需要在小括号中写一个 $event 用来标识事件对象，后面才是真正的参数；
// console.log(a);
// console.log(b);
// console.log(c);
// }
fn(e) {
console.log(1)
},
parent() {
console.log('parent');
},
child() {
console.log('child');
},
grandchild() {
console.log('grandchild')
},
add(e) {
this.num++; // 在方法中使用数据，需要使用 this.xxx 的方式获取，并且操作这些值，页面中的值也会跟着改变
console.log('加')
}
}
});
</script>
</body>
</html>
