1. 事件
1.1. 如何绑定事件
绑定事件使用v-on指令,事件后面跟上事件名称。也可以使用简写方式@+事件名称。在指令后传入发生事件时要触发的方法,当被调用的方法无需参数传入时可不加小括号()。指令内还可直接传入js语句。
<html>
<header>
</header>
<body>
<div id="root">
<p>{{ message }}</p>
<button v-on:click="changeMsg">点击改变message1</button>
<br/>
<button @click="changeMsg">点击改变message2</button>
<br/>
<button @click="this.message = this.message + 1;">点击改变message3</button>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
message: '码小飞'
}
},
methods: {
changeMsg() {
this.message = this.message + '1';
}
}
});
vue.mount('#root')
</script>
</html>
我们在调用事件时也可以传入参数,参数可以是data中的数据也可以是字面值,当想获取事件对象时需要在调用方法时传入$event对象。
<html>
<header>
</header>
<body>
<div id="root">
<p>{{ message }}</p>
<button v-on:click="changeMsg($event,4,5,6)">点击改变message1</button>
<br/>
<button @click="changeMsg($event,num1,num2,num3)">点击改变message2</button>
<br/>
<button @click="this.message = this.message + 1;">点击改变message3</button>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
message: '码小飞',
num1: 1,
num2: 2,
num3: 3
}
},
methods: {
changeMsg(event,a,b,c) {
console.log(event,a,b,c);
this.message = this.message + '1';
}
}
});
vue.mount('#root')
</script>
</html>
1.2. 事件修饰符
vue的属性修饰符有stop、prevent、capture、self、once和passive,事件修饰符可以直接跟在事件名称后使用,以下是详细介绍
- stop
作用:阻止事件冒泡
例子:
不加stop,点击子div后,事件会冒泡到父div
<html>
<header>
</header>
<body>
<div id="root">
<div id="parent-div" class="parent" @click="changeMsg($event, 'parent')">
父div
<div id="sub-div" class="son" @click="changeMsg($event, 'son')">
子div
</div>
</div>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
}
},
methods: {
changeMsg(event, msg) {
console.log(event.target, msg);
}
}
});
vue.mount('#root')
</script>
<style>
.parent {
padding: 10px;
background-color: blue;
}
.son {
padding: 10px;
background-color: red;
}
</style>
</html>
在子div点击事件后,添加阻止事件冒泡后,事件不会向上冒泡
<html>
<header>
</header>
<body>
<div id="root">
<div id="parent-div" class="parent" @click="changeMsg($event, 'parent')">
父div
<div id="sub-div" class="son" @click.stop="changeMsg($event, 'son')">
<!--添加阻止事件冒泡-->
子div
</div>
</div>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
}
},
methods: {
changeMsg(event, msg) {
console.log(event.target, msg);
}
}
});
vue.mount('#root')
</script>
<style>
.parent {
padding: 10px;
background-color: blue;
}
.son {
padding: 10px;
background-color: red;
}
</style>
</html>
- prevent
作用:阻止事件的默认行为,等同于 event.preventDefault()
例子:
<!--使用prevent修饰符阻止了a标签点击事件的默认跳转行为-->
<html>
<header>
</header>
<body>
<a href="https://www.baidu.com" @click.prevent="console.log('我要阻止默认行为')">点击我跳转</a>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
});
vue.mount('#root')
</script>
<style>
</style>
</html>
- capture
作用:使用事件捕获模式,即事件处理程序先在此元素本身运行,然后再运行子元素的处理程序。事件捕获和事件冒泡阶段是相反的,如果我们想在事件捕获阶段就触发事件可以使用capture修饰。
例子:先触发了最外层div的事件,然后是父div的事件,最后触发子div的事件
<html>
<header>
</header>
<body>
<div id="root">
<div id="grandParent-div" @click.capture="changeMsg($event, 'grandParent')">
最外层div
<div id="parent-div" class="parent" @click.capture="changeMsg($event, 'parent')">
父div
<div id="sub-div" class="son" @click.capture="changeMsg($event, 'son')">
子div
</div>
</div>
</div>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
}
},
methods: {
changeMsg(event, msg) {
console.log(event.target, msg);
}
}
});
vue.mount('#root')
</script>
<style>
.parent {
padding: 10px;
background-color: blue;
}
.son {
padding: 10px;
background-color: red;
}
</style>
</html>
- self
作用:只有事件在当前元素上触发时,方法才会被调用。
例子:
<!--当点击子div,父div,最外层div时,事件只在当前元素上触发,并不会向上冒泡-->
<html>
<header>
</header>
<body>
<div id="root">
<div id="grandParent-div" @click.self="changeMsg($event, 'grandParent')">
最外层div
<div id="parent-div" class="parent" @click.self="changeMsg($event, 'parent')">
父div
<div id="sub-div" class="son" @click.self="changeMsg($event, 'son')">
子div
</div>
</div>
</div>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
}
},
methods: {
changeMsg(event, msg) {
console.log(event.target, msg);
}
}
});
vue.mount('#root')
</script>
<style>
.parent {
padding: 10px;
background-color: blue;
}
.son {
padding: 10px;
background-color: red;
}
</style>
</html>
- once
作用:只让事件触发一次
例子:
<!--点击后,事件只触发一次-->
<html>
<header>
</header>
<body>
<div id="root">
<button id="once-div" @click.once="changeMsg($event, 'once event')">点我事件只触发一次</button>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
}
},
methods: {
changeMsg(event, msg) {
console.log(event.target, msg);
}
}
});
vue.mount('#root')
</script>
<style>
.parent {
padding: 10px;
background-color: blue;
}
.son {
padding: 10px;
background-color: red;
}
</style>
</html>
- passive
作用:默认事件行为会立即触发,不会等事件处理函数执行完后再触发
例子:
<!--在wheel事件上添加passive修饰符,鼠标滚轮滚动事件触发后,最外层div的滚动条先默认下滑,然后在调用事件处理函数-->
<html>
<header>
</header>
<body>
<div id="root">
<div style="height: 200px; width: 200px;overflow: scroll;" @wheel.passive="divScroll($event)">
<div style="height: 300px;width: 200px;background-color: red;">
</div>
<div style="height: 300px;width: 200px;background-color: blue;">
</div>
<div style="height: 300px;width: 200px;background-color: orange;">
</div>
</div>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
}
},
methods: {
changeMsg(event, msg) {
console.log(event.target, msg);
},
divScroll(event) {
for(let i = 0; i< 100000;i++) {
console.log(i);
}
console.log(event);
}
}
});
vue.mount('#root')
</script>
<style>
.parent {
padding: 10px;
background-color: blue;
}
.son {
padding: 10px;
background-color: red;
}
</style>
</html>
1.3. 按键修饰符
按键修饰符用来修饰键盘相关事件keyup和keydown。我们可以修饰键盘事件在按下特定键子时才触发。
在下面的例子中声明了两个input表单,分别绑定了键盘落下事件。在text1上用“1”修饰符,当在text1中按下键子“1”时事件才会被触发。在text2上用“caps-lock”修饰符,当在text2中按下键子“CapsLock”(大写锁定键)时,事件才会被触发。
注意:当按键修饰符修饰键名由两个单词组成的键子时,不能使用驼峰写法,要转换为串式写法。如CapsLock键需转换为caps-lock,ArrowUp需转换为arrow-up。如果你不知道想修饰的键的名字是什么,可以先不添加修饰符,然后打印事件对象,事件对象上的key属性即为键名
<!---->
<html>
<header>
</header>
<body>
<div id="root">
<input type="text" id="text1" @keyDown.1="keyDown($event)">
<br/>
<input type="text" id="text2" @keyDown.caps-lock="keyDown($event)">
</div>
</body>
<script src="./js/vue.global.js"></script>
<script>
let vue = Vue.createApp({
data() {
return {
}
},
methods: {
keyDown(event) {
console.log(event);
}
}
});
vue.mount('#root')
</script>
<style>
.parent {
padding: 10px;
background-color: blue;
}
.son {
padding: 10px;
background-color: red;
}
</style>
</html>
vue为内置了一些键的别名,分别为.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right。
特殊的系统按键修饰符
系统修饰符包含四个,分别是:.ctrl、.alt、.shift、.meta。
系统按键修饰符和常规按键不同。与 keyup 事件一起使用时,该按键必须在事件发出时处于按下状态。换句话说,keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。
事件修饰符和按键修饰符均可组合使用,如@keyup.enter.down表示同时抬起enter键和下方向键时触发事件。@click.stop.capture代表阻止click事件冒泡并在事件捕获阶段触发调用函数
我们可以使用.exact修饰符来控制系统按键修饰符的准确性,如果我们希望仅按下ctrl键的时候触发事件,可以使用.ctrl.exact来修饰事件。
1.4. 事件注意事项
- 事件捕获是从外层元素到内层元素的,事件冒泡是从内层到外层元素的。
- .exact仅能控制系统按键修饰符,在普通按键修饰符上使用是无效的。
- 按键修饰符不仅能作用在keydown和keyup事件上,也可以作用在click等其他事件上。