1.v-on标签主要是用于监听客户端的事件,比如鼠标点击,键盘按下抬起等等。
2.v-on绑定点击事件例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<h2>当前数:{{counter}}</h2><br>
<!-- <button v-on:click="counter++">加一</button>-->
<!-- <button v-on:click="counter--">减一</button>-->
<!--v-on标签的语法糖,用@代替v-on,@click-->
<button @click="counter++">加一</button>
<button @click="counter--">减一</button>
</div>
<script src="./vue.js"></script>
<script>
const content = new Vue({
el: '#content',
data: {
counter: 0
}
})
</script>
</body>
</html>
3.结果
4.v-on参数的问题
1)调用的方法没有参数时,可以写成@click="addOne"或者@click=“addOne()”,注意,如果addOne方法里有一个参数,即addOne(event),我们没有传参数时其会默认将原生的event对象传递过去
2)当我们想同时传自己的参数以及event对象时,可以通过$event来传递
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<h2>当前数:{{counter}}</h2><br>
<button @click="addOne">加1</button>
<button @click="addOne()">加1</button>
<button @click="addFive(5)">加5</button>
<button @click="addTen(10,$event)">加10</button>
</div>
<script src="./vue.js"></script>
<script>
const content = new Vue({
el: '#content',
data: {
counter: 0
},
methods: {
addOne(event) {
console.log(event)
this.counter++
},
addFive(num) {
this.counter = this.counter + num
},
addTen(num,event) {
console.log(event)
this.counter = this.counter + 10
}
}
})
</script>
</body>
</html>
结果,可以看到点击这两个按钮的地方,控制台均打印了原生的event对象
5.v-on修饰符
1).stop,调用了event.stopPropagation(),阻止冒泡行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<h2>button数:{{bcounter}}</h2>
<h2>div数:{{dcounter}}</h2>
<div @click="dcounter++" style="height: 200px;width: 200px;background-color: red">
<button @click.stop="bcounter++">点我加1</button>
</div>
</div>
<script src="./vue.js"></script>
<script>
const content = new Vue({
el: '#content',
data: {
bcounter: 0,
dcounter: 0
},
})
</script>
</body>
</html>
结果,冒泡行为已停止
2).prevent,阻止默认行为,调用了event.preventDefault()
例子,阻止表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<form @submit.prevent action="">
用户名:<input type="text" name="username" value=""/><br>
密码:<input type="password" name="password" value=""/><br>
<button type="submit">登陆</button>
</form>
</div>
<script src="./vue.js"></script>
<script>
const content = new Vue({
el: '#content',
data: {
},
})
</script>
</body>
</html>
没有阻止之前,登陆
阻止默认行为后,登陆
3).once,只触发一次回调
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<button @click.once="btnClick">点我</button>
</div>
<script src="./vue.js"></script>
<script>
const content = new Vue({
el: '#content',
data: {
},
methods: {
btnClick() {
console.log('按钮事件。。。')
}
}
})
</script>
</body>
</html>
结果,只执行一次
4)键修饰符,用于监听键盘
如下为监听回车键抬起和A键抬起例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<input @keyup.enter="enterFun" type="text"/><br>
<input @keyup.A="oneFun" type="text"/>
</div>
<script src="./vue.js"></script>
<script>
const content = new Vue({
el: '#content',
data: {
},
methods: {
enterFun() {
console.log('enter事件触发')
},
oneFun() {
console.log('one事件触发')
}
}
})
</script>
</body>
</html>
结果