一.事件的基本原理
事件的基本使用：
- 1.使用 v-on:xxx 或者 @XXX 绑定事件，其中xxx是事件名；
- 2.事件的回调需要配置在methods对象中，最终会在vm上；
- 3.methods中配置的函数，不要用箭头函数，否则this就不是vm了；
- 4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或 组件实例对象；
- 5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
示例代码：
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- 引入开发版vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app">
<h1>欢迎来到{{year}}年</h1>
<!-- <button v-on:click="showInfo">提示信息</button> -->
<!-- 语法糖：v-on:xxx 简写为 @XXX -->
<button @click="showInfo1">提示信息（不传参）</button>
<button @click="showInfo2(66,$event)">提示信息（传参）</button>
</div>
<script type="text/javascript">
//创建vue实例
const vm = new Vue({
el: "#app",
data() {
return {
year: 2025,
};
},
methods: {
showInfo1(event) {
console.log(event);
console.log(this == vm); //此处的this是vm（vue实例对象）
console.log(this.year);
},
showInfo2(value, event) {
console.log(value, event);
},
},
});
</script>
</body>
</html>二.事件的修饰符
vue中的事件修饰符：
- 1.
prevent：阻止默认事件（常用）； - 2.
stop：阻止事件冒泡（常用）； - 3.
once：事件只触发一次（常用） - 4.
capture：使用事件的捕获模式 - 5.
self： 只有event.target是当前操作的元素时才触发事件； - 6.
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
示例代码：
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- 引入开发版vue -->
<script src="../js/vue.js"></script>
</head>
<style>
* {
margin-top: 20px;
}
.box {
border: 1px solid red;
}
.title {
color: grey;
}
ul {
height: 90px;
overflow: auto;
border: 1px solid red;
}
</style>
<body>
<div id="app">
<div class="title">阻止默认事件:</div>
<a :href="url" @click.prevent="showInfo1">百度官网</a>
<div class="title">阻止事件冒泡:</div>
<div @click="showInfo1">
<button @click.stop="showInfo1">百度官网</button>
</div>
<div class="title">事件只触发一次:</div>
<button @click.once="showInfo1">百度官网</button>
<div class="title">使用事件的捕获模式:</div>
<!-- 正常情况下，先捕获在冒泡，冒泡阶段执行点击事件，捕获是从外往里，冒泡是从里往外，所以输出是=> 2 1
加上修饰符capture后，捕获阶段执行点击事件，所以输出是=> 1 2
-->
<div @click.capture="showMsg(1)" class="box">
div1
<div @click="showMsg(2)" class="box">div2</div>
</div>
<div class="title">只有event.target是当前操作的元素时才触发事件:</div>
<div @click.self="showInfo2">
<button @click="showInfo2">百度官网</button>
</div>
<div class="title">事件的默认行为立即执行，无需等待事件回调执行完毕:</div>
<ul @wheel.passive="demo()">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data() {
return {
year: 2025,
url: "https://www.baidu.com/",
};
},
methods: {
showInfo1() {
alert(this.year);
},
showMsg(v) {
console.log(v);
},
showInfo2(e) {
console.log(e.target);
},
demo() {
for (let i = 0; i < 100000; i++) {
console.log("@");
}
},
},
});
</script>
</body>
</html>三.键盘事件
vue中的事件修饰符：
-
1.vue中常用的按键别名：
回车 => enter
删除 => delete（捕获删除和退格键）
退出 => esc
空格 => space
换行 => tab
上 => up
下 => down
左 => left
右 => right
-
2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为caps-lock（短横线命名）;
-
3.系统修饰符（用法特殊）：ctrl alt shift meta
1）配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
2）配合keydown使用，正常触发事件。
-
4.也可以使用keyCode去指定具体的按键（不推荐）;
-
5.Vue.config.keyCodes自定义键名=键码，可以去定制按键别名;
示例代码：
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- 引入开发版vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app">
<input placeholder="按下回车提示输入" @keyup.enter="showInfo1" />
<input placeholder="按下删除提示输入" @keyup.delete="showInfo1" />
<input placeholder="按下CapsLock提示输入" @keyup.caps-lock="showInfo1" />
<input placeholder="系统修饰符alt" @keyup.alt="showInfo1" />
<input placeholder="系统修饰符alt" @keydown.alt="showInfo1" />
<input placeholder="按下回车提示输入" @keyup.13="showInfo1" />
<input placeholder="按下回车提示输入" @keyup.huiche="showInfo1" />
</div>
<script type="text/javascript">
Vue.config.keyCodes.huiche = 13; //定义了一个别名按键
//创建vue实例
const vm = new Vue({
el: "#app",
data() {
return {};
},
methods: {
showInfo1(event) {
// console.log(event.target.value);
console.log(event.key, event.keyCode);
},
},
});
</script>
</body>
</html>四.使用技巧
vue中的事件修饰符：
- 1.修饰符可以连续写（即阻止冒泡又阻止默认事件）
xml
<div @click="showInfo1">
<!-- 修饰符可以连续写（即阻止冒泡又阻止默认事件） -->
<a href="https://www.baidu.com/" @click.stop.prevent="showInfo1">百度官网</a>
</div>- 2.可以指定两个键同时按下触发
xml
<!-- 同时按下ctrl+y提示 -->
<input placeholder="按下ctrl+y提示" @keyup.ctrl.y="showInfo1" />