Vue学习-------------（8）v-on事件监听
v-on语法糖： v-on:click 等同于 @click
基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data : {
counter : 0
},
methods: {
sub() {
this.conter--
}
}
})
</script>
</body>
</html>
当通过methods中定义方法，以供@click调用时需要注意参数问题：
- 情况一：如果该方法不需要额外参数，那么方法后的()可以不用添加
- 但是注意：如果方法本身中有一个参数，且没有传参，那么会默认将原生事件event参数传递进去
- 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件
<script>
//如果函数需要参数，但是没有传入，那么函数的形参为undefined
function abc(name) {
console.log(name);
}
abc()
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//如果方法本身是需要一个参数的，但在使用方法的时候省略了小括号，
//这个时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法
<button @click="btn">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
methods: {
btn(name) {
cosole.log(name)
}
}
})
</script>
</body>
</html>
情况二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//方法定义时，我们需要event对象，同时又需要其他参数
//在调用时，如何手动获取浏览器产生的event对象：$event
<button @click="btn('zhangsan', $event">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
methods: {
btn(name, event) {
cosole.log(name,event)
}
}
})
</script>
</body>
</html>
v-on修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
// .stop 调用 event.stopPropagation()
//阻止事件冒泡
<div @click="divClick">
aaaaaaa
<button @click="btnClick.stop">按钮</button>
</div>
<br>
// .prevent 调用 event.preventDefault() 阻止默认行为
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<br>
//监听某个键盘的键入
<input type="text" @keyup="keyUp">
//监听enter键的键入
<input type="text" @keyup.enter="keyUp">
<br>
//只触发一次回调
<button @onclick.once="onceClick">一次点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
methods: {
btnClick() {
cosole.log("btn");
},
divClick() {
console.log("div");
},
submitClick() {
console("submit");
},
keyUp() {
console("key");
},
onceClick() {
console("once");
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号