事件监听(v-on:)
- 在前端开发中,我们需要经常和用户交互。
- 这个时候,我们就必须监听用户发生的事件,比如点击、拖拽、键盘事件等等。
- 在Vue中如何监听事件呢?使用
v-on
指令。
v-on
介绍- 作用:绑定事件监听器。
- 缩写:
@
- 预期:
Function | Inline Statement | Object
- 参数:
event
- 下面,我们就具体来学习下
v-on
的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-v-on的基本使用</title>
</head>
<body>
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
})
</script>
</body>
</html>
v-on传参数
- 当通过methods中定义方法,以供
@click
调用时,需要注意参数问题。 - 情况一:如果该方法不需要额外参数,那么方法后面的()可以不添加。
- 但是注意,如果方法本身有一个参数,那么会默认将原生事件event参数传递进去
- 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-v-on的参数问题</title>
</head>
<body>
<div id="app">
<!-- 如果该方法不需要额外参数,那么方法后面的()可以不添加。 -->
<button @click="btn1Click">按钮1</button>
<!-- 在定义事件时,写方法时省略了小括号,但是方法本身需要一个参数,这个时候,Vue会默认
将浏览器生成的event事件对象作为参数传递到方法 -->
<button @click="btn2Click">按钮2</button>
<!-- 方法定义时,我们需要event对象,同时又需要其他参数,如何手动获取浏览器的event对象:$event -->
<button @click="btn3Click(123,$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(abc) {
console.log(abc);
},
btn3Click(abc, event){
console.log(abc, event);
}
}
})
</script>
</body>
</html>
v-on修饰符
-
在某些情况下,我们拿到event的目的可能是进行一些事件处理。
-
Vue提供了修饰符来帮助我们方便的处理一些事件:
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
-
当我们如下写代码的时候会触发冒泡事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-v-on的修饰符</title>
</head>
<body>
<div id="app">
<div @click="divClick">
div区域
<button @click="buttonClick">按钮</button>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
buttonClick() {
console.log("button");
},
divClick() {
console.log("div");
}
}
})
</script>
</body>
</html>
点击按钮触发buttonClick事件的同时也触发了它的父元素的divClick事件,如果我们不想触发冒泡事件,只需要加一个.stop
修饰符:
<button @click.stop="buttonClick">按钮</button>
- 我们也可以用
.prevent
修饰符来阻止默认操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-v-on的修饰符</title>
</head>
<body>
<div id="app">
<form action="http://www.baidu.com">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
submitClick() {
console.log("自己提交");
}
}
})
</script>
</body>
</html>
如果我们不设置prevent修饰符的话,会默认进行提交表单操作:
- 当我们想只当事件是从特定键触发时才触发回调:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-v-on的修饰符</title>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="keyup">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
keyup() {
console.log("keyup");
}
}
})
</script>
</body>
</html>
回顾
Vue笔记一——Vue安装与体验
Vue笔记二——Vue声明周期与模板语法
Vue笔记三——计算属性(computed)