一、为什么要使用v-on指令:
在前端开发中,我们需要经常和用户交互,这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等
在Vue中如何监听事件呢?使用v-on指令。
二、v-on指令介绍
- 作用:绑定事件监听器
- 缩写:@
- 预期:Function (方法) | Inline Statement(内部表达式) | Object(对象)
- 参数: event
v-on的基本使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{text}} {{counter}}</h2>
<!-- 可以直接在click事件中定义简单实现,但是不建议这么做。
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button> -->
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
<!-- 通常写法是下面这样的,@ 是v-on的语法糖
<button @click="increment">+</button>
<button @click="decrement">-</button>-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
text: '当前计数:',
counter: 0
},
methods: {
increment() {
this.counter ++;
console.log('add被执行');
},
decrement() {
this.counter --;
console.log('sub被执行');
}
}
})
</script>
</body>
三、v-on参数
- 当通过methods中定义方法,以供@click调用时,需要注意参数问题:
- 情况一:如果该方法不需要额外参数,那么方法后的()可不添加
但是注意:如果方法本身中有一个参数,那么默认会将原生事件event参数传递进去
- 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--事件调用的方法没有参数-->
<button @click="increment()">按钮1</button>
<button @click="increment">按钮2</button>
<!--如果函数需要参数,但是没有传入,没有省略小括号,那么函数的形参为undefined-->
<button @click="button3()">按钮3</button>
<!--在事件定义时,写方法时省略了小括号,但是方法本身时需要一个参数的,这个时候,
浏览器会自动生成一个event,vue会默认将浏览器生成的event事件作为参数传入到方法种-->
<button @click="button3">按钮4</button>
<!--方法定义时,我们需要event对象,同时又需要其他参数-->
<!--在调用方法时,如何手动的获取到浏览器参数的event对象:$event-->
<button @click="button5(123, $event)">按钮5</button>
<!--写方法时省略了小括号,第一个值浏览器会传event对象,第二个参数为undefined-->
<button @click="button5">按钮8</button>
<!--写方法时不省略小括号,两个参数都为undefined-->
<button @click="button5()">按钮7</button>
<!--当只传一个参数的时候,第二个参数会为undefined,因为event作为默认参数只能传到第一个参数中-->
<button @click="button5(123)">按钮6</button>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
text: '当前计数:',
counter: 0
},
methods: {
increment() {
console.log('increment');
},
// 如果函数需要参数,但是没有传入,那么函数的形参为undefined
button3(event) {
console.log('按钮3', event)
},
button5(event, data) {
console.log('按钮5', event, data)
}
}
})
</script>
</body>
执行结果如下:
四、v-on修饰符
1、在某些情况下,我们拿到的event的目的可能是进行一些事件处理。
2、Vue提供了修饰符来帮助我们方便的处理一些事件:
- .stop - 调用 event.stopPropagation()--可以阻止事件冒泡。
- .prevent - 调用 event.preventDefault()。--可以阻止它的默认事件。
- .{keyCode(键盘对应的编码) | keyAlias(键盘对应的简写)} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1、 .stop修饰符的使用,当不加.stop的时候,我们点击按钮的时候,
会同时触发div的点击事件,被称为事件冒泡,当我们加了.stop即可以阻止事件冒泡-->
<div @click="divClick">
<button @click.stop="button5">按钮6</button>
</div>
<!--2、 .prevent 修饰符的使用, 阻止它的默认事件,可以自己收集数据,自己给服务端发送请求-->
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick"></input>
</form>
<!--3、 .监听某个键盘的键帽,如下面监听的时enter抬起时,才会触发方法-->
<br>
<input type="text" @keyup.enter="keyup"></input>
<!--4、 .once修饰符的使用,只有在第一次点击时候有反应,触发方法,后面就不触发了-->
<br>
<button @click.once="button2">按钮2</button>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
text: '当前计数:',
counter: 0
},
methods: {
divClick() {
console.log('divClick');
},
// 如果函数需要参数,但是没有传入,那么函数的形参为undefined
button5() {
console.log('button5');
},
submitClick() {
console.log('submitClick');
},
keyup() {
console.log('keyup');
},
button2() {
console.log('button2');
}
}
})
</script>
</body>