事件修饰符
Vue为v-on提供了事件修饰符。修饰符用 . 表示指令后缀,包含以下这些:
.stop //阻止冒泡:<a @click.stop="doThis"></a>
.prevent //阻止默认事件:<a @click.prevent="doThis"></a>, <form @submit.prevent="onSubmit"></form>
.self
.capture
.once
.passive
案列
<!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="https://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标签1</a> <br> <!--点击会跳转到百度-->
<a @click.prevent="handleAClick" href="https://www.baidu.com">A标签2</a><br> <!--阻止a标签的默认事件,所以点击不会跳转到百度-->
<a @click.prevent href="https://www.baidu.com">A标签3</a> <!--点击不会跳转到百度-->
<!--.stop修饰符:阻止元素冒泡-->
<ul @click="handleUlClick">
<li @click="handleLiClick">LI1</li> <!--点击它会出发handleUlClick-->
<li @click.stop="handleLiClick">LI2</li> <!--点击它不会出发handleUlClick-->
<!--链式写法:阻止a标签的冒泡,同时取消a标签的默认事件,所以点击它不会跳转到百度-->
<li><a @click.stop.prevent="handleAClick" href="https://www.baidu.com">A标签</a></li>
</ul>
<!--.prevent修饰符:取消元素的默认事件-->
<!--请勿同时使用 .passive 和 .prevent,因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了,则 .prevent 会被忽略,并且浏览器会抛出警告-->
<form action="" @submit="submitEvent()"> <!--单中的 type="submit"类型的button表单做提交可以正常提交-->
<button type="submit">提交1</button>
</form>
<form action="" @submit.prevent="submitEvent()"> <!--阻止表单中的 type="submit"类型的button表单做提交处理-->
<button type="submit">提交2</button>
</form>
<form action="">
<button type="submit" @click.prevent>提交3</button><!--阻止表单中的 type="submit"类型的button表单做提交处理-->
</form>
<!--.self修饰符-->
<ul @click.self="handleUlClick"><!--只有点击ul自己才会才会触发click事件,通过子元素冒泡上来的无法被触发click事件-->
<li @click="handleLiClick">LI1</li> <!--点击它不会出发父级的handleUlClick事件,因为父元素ul上有.self修饰符-->
</ul>
<!--.once修饰符:点击事件最多被触发一次-->
<div>
{{count}}
<!--这个就能点击一次,超过一次就将click事件解绑了,所以再点击就无效了,所以这里点击一次count的值最多能增加到1,无法增加到2-->
<button @click.once="count++">自增1</button>
</div>
<script>
var app = Vue.createApp({
data() {
return {
count: 0
}
},
methods: {
handleUlClick() { alert('点击了ul') },
handleLiClick() { alert('点击了li') },
handleAClick() { alert('点击了A标签') },
submitEvent() {
return false;
//里面可以做一些控件填写校验等。
}
}
}).mount("#app")
</script>
</div>
</body>
</htmI>
按键修饰符
<!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="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.liColor {
background-color: brown;
}
</style>
</head>
<body>
<div id="app">
<!--按键事件JS的做法-->
<input type="text" @keyup="JshandleKeyUp">
<!--按键事件Vue的做法-->
<input type="text" @keyup.enter="VueHandleKeyUpEnter"> <!--回车键被弹起-->
<input type="text" @keyup.space="VueHandleKeyUpSpace"> <!--空格键被弹起-->
<input type="text" @keyup.esc="VueHandleKeyUpeEsc"> <!--ESC键被弹起-->
<input type="text" @keyup.a="VueHandleKeyUpA"> <!--可以直接写键盘上面的字母来对应,比如A键就.a B键就.b C键就.c 非常方便-->
<input type="text" @keyup.a.b="VueHandleKeyUpAB"> <!--还可以通过链式写法,支持多个键同时被弹起的操作,如:AB键同时被弹起-->
<input type="text" @keyup.q.w.e="VueHandleKeyUpQWE"> <!--不知道为什么,这种带字母的三个按键链式写法,只有其中任何一个被弹起都会被触发-->
<input type="text" @keyup.ctrl.space="VueHandleKeyUpCtrlAndSpace"> <!--还可以通过链式写法,支持多个键同时被弹起的操作,如:AB键同时被弹起-->
<script>
var app = Vue.createApp({
data() {
return {
count: 0
}
},
methods: {
JshandleKeyUp(evt) {
if (evt.keyCode === 13) {
alert('Enter键被弹起')
}
else if (evt.keyCode === 32) {
alert('空格键被弹起')
} else if (evt.keyCode === 33) {
alert('PgUp键被弹起')
}else if (evt.keyCode === 34) {
alert('PgDn键被弹起')
} else if (evt.keyCode === 46) {
alert('Delete键被弹起')
} else if (evt.keyCode === 27) {
alert('Esc键被弹起')
}else{
alert(evt.keyCode)
}
},
VueHandleKeyUpEnter(){
alert('Enter键被弹起')
},
VueHandleKeyUpSpace(){
alert('空格键被弹起')
},
VueHandleKeyUpeEsc(){
alert('esc键被弹起')
},
VueHandleKeyUpA(){
alert('A键被弹起')
},
VueHandleKeyUpAB(){
alert('AB键同时被弹起')
},
VueHandleKeyUpQWE(){
alert('Q或者W或者E被弹起')
},
VueHandleKeyUpCtrlAndSpace(){
alert('Ctrl+空格键同时被弹起')
}
}
}).mount("#app")
</script>
</div>
</body>
</htmI>
表单修饰符
HTML 元素:change 事件
当用户更改<input>、<select> 和 <textarea>
元素的值时,change 事件在这些元素上触发。和 input 事件不同的是,并不是每次元素的 value 改变时都会触发 change 事件。
文本输入元素
对于像<input type="text">
这样的元素,change 事件在控件失去焦点
前都不会触发。
案列
<!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="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- v-model.lazy -->
<!-- 这个v-model其实就是v-on:input原生事件的语法糖,只要input的value值一发生变化就立即被监听到 -->
{{myname}} <input type="text" v-model="myname">
<!-- 这个v-model.lazy其实就是v-on:change原生事件的语法糖,只要input的value值一发生变化并且input标签失去焦点后才会被监听到 -->
{{myname}} <input type="text" v-model.lazy="myname"><!--所以这里你要是在input标签中不断的输入myname的值是不会变动,只有在input失去焦点后才会改变myname的值-->
<!-- v-model.trim -->
<!-- v-model.trim会清空value值两边的空格 -->
<input type="text" v-model.trim="myname">
<!-- v-model.number -->
<!-- v-model.number会自动将value值转化成input类型,如果无法转化的就不会转化 -->
<!--如果输入123 那么它的值就是int类型的123 -->
<!--如果输入123abc 那么它的值就是int类型的123 -->
<!--如果输入abc123 那么它的值就是string类型的abc123 -->
<!--如果输入abc 那么它的值就是string类型的abc -->
{{age}}
<input type="text" v-model.number="age">
<script>
var app = Vue.createApp({
data() {
return {
myname: '',
age:0
}
},
//computed与methods的不同就是methods没有缓存,而computed会有缓存,如果计算的值不发生变化,第二次用到这个方法就直接从缓存中拿,就不需要再计算一次了。提高性能
//computed 应该值做计算而没有任何其他的副作用的事,这点非常重要,请务必牢记。举列来说就是不要在计算属性中做异步请求,或者更改DOM的事情。
computed: {},
methods: {}
}).mount("#app")
</script>
</div>
</body>
</htmI>