Event modifier
Vue provides event modifiers for v-on. Modifiers use . to represent command suffixes, including the following:
Case
<!DOCTYPE html>
<htmI 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>
<script src="//i2.wp.com/unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.liColor {
background-color: brown;
}
</style>
</head>
<body>
<div id="app">
<a @click="handleAClick" href="https://www.baidu.com">A tag 1</a><br> <!--Clicking will jump to Baidu-->
<a @click.prevent="handleAClick" href="https://www.baidu.com">A tag 2</a><br> <!--Block the default event of the a tag, so clicks will not jump to Baidu -->
<a @click.prevent href="https://www.baidu.com">A tag 3</a> <!--Click will not jump to Baidu-->
<!--.stop modifier: prevent elements from bubbling-->
<ul @click="handleUlClick">
<li @click="handleLiClick">LI1</li> <!--Clicking it will launch handleUlClick-->
<li @click.stop="handleLiClick">LI2</li> <!--Clicking it will not start handleUlClick-->
<!--Chain writing method: prevent the bubbling of the a tag, and cancel the default event of the a tag, so clicking it will not jump to Baidu-->
<li><a @click.stop.prevent="handleAClick" href="https://www.baidu.com">A tag</a></li>
</ul>
<!--.prevent modifier: Cancel the default event of the element-->
<!--Do not use .passive and .prevent at the same time, because .passive already indicates to the browser that you do not want to prevent the default behavior of the event. If you do this, .prevent will be ignored and the browser will throw a warning -->
<form action="" @submit="submitEvent()"> <!--Button form with type="submit" type in the form can be submitted normally-->
<button type="submit">Submit 1</button>
</form>
<form action="" @submit.prevent="submitEvent()"> <!--Prevent button forms of type="submit" in the form from being submitted-->
<button type="submit">Submit 2</button>
</form>
<form action="">
<button type="submit" @click.prevent>Submit 3</button><!--Prevent button forms of type="submit" in the form from being submitted -->
</form>
<!--.self modifier-->
<ul @click.self="handleUlClick"><!--Only clicking on ul itself will trigger the click event. Click events that bubble up through child elements cannot be triggered-->
<li @click="handleLiClick">LI1</li> <!--Clicking it will not trigger the parent's handleUlClick event because the parent element ul has the .self modifier-->
</ul>
<!--.once modifier: the click event is triggered at most once -->
<div>
{<!-- -->{count}}
<!--This can be clicked once. If it is clicked more than once, the click event will be unbound, so it will be invalid if clicked again. Therefore, the count value of a click here can be increased to 1 at most, but cannot be increased to 2-->
<button @click.once="count + + ">increment by 1</button>
</div>
<script>
var app = Vue.createApp({
data() {
return {
count: 0
}
},
methods: {
handleUlClick() { alert('clicked on ul') },
handleLiClick() { alert('li was clicked') },
handleAClick() { alert('Clicked on label A') },
submitEvent() {
return false;
//You can do some controls to fill in and verify, etc.
}
}
}).mount("#app")
</script>
</div>
</body>
</htmI>
Key modifier
<!DOCTYPE html>
<htmI 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>
<script src="//i2.wp.com/unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.liColor {
background-color: brown;
}
</style>
</head>
<body>
<div id="app">
<!--How to use JS for key press events-->
<input type="text" @keyup="JshandleKeyUp">
<!--How to do key events in Vue-->
<input type="text" @keyup.enter="VueHandleKeyUpEnter"> <!--The Enter key is bounced-->
<input type="text" @keyup.space="VueHandleKeyUpSpace"> <!--The space bar is bounced-->
<input type="text" @keyup.esc="VueHandleKeyUpeEsc"> <!--ESC key is bounced-->
<input type="text" @keyup.a="VueHandleKeyUpA"> <!--You can directly write the letters on the keyboard to correspond. For example, the A key is .a. The B key is .b. The C key is .c. It is very convenient-- >
<input type="text" @keyup.a.b="VueHandleKeyUpAB"> <!--You can also use chain writing to support the operation of multiple keys being bounced up at the same time, such as: the AB key is bounced up at the same time-->
<input type="text" @keyup.q.w.e="VueHandleKeyUpQWE"> <!--I don’t know why, this three-key chain writing method with letters will be triggered only if any one of them is bounced-->
<input type="text" @keyup.ctrl.space="VueHandleKeyUpCtrlAndSpace"> <!--You can also use chain writing to support the operation of multiple keys being bounced at the same time, such as: the AB key is bounced at the same time-- >
<script>
var app = Vue.createApp({
data() {
return {
count: 0
}
},
methods: {
JshandleKeyUp(evt) {
if (evt.keyCode === 13) {
alert('Enter key is bounced')
}
else if (evt.keyCode === 32) {
alert('The space bar is popped up')
} else if (evt.keyCode === 33) {
alert('PgUp key is bounced')
}else if (evt.keyCode === 34) {
alert('PgDn key is bounced')
} else if (evt.keyCode === 46) {
alert('Delete key is popped up')
} else if (evt.keyCode === 27) {
alert('Esc key is bounced')
}else{
alert(evt.keyCode)
}
},
VueHandleKeyUpEnter(){
alert('Enter key is bounced')
},
VueHandleKeyUpSpace(){
alert('The space bar is popped up')
},
VueHandleKeyUpeEsc(){
alert('esc key is bounced')
},
VueHandleKeyUpA(){
alert('A key is bounced')
},
VueHandleKeyUpAB(){
alert('AB keys are bounced up at the same time')
},
VueHandleKeyUpQWE(){
alert('Q or W or E is bounced')
},
VueHandleKeyUpCtrlAndSpace(){
alert('Ctrl + Spacebar is bounced up at the same time')
}
}
}).mount("#app")
</script>
</div>
</body>
</htmI>
Form modifier
HTML element: change event
The change event fires on the,