一、v-on的基本使用
vue中的监听事件由v-on实现，缩写@
这里我们用一个监听按钮的点击事件来简单使用v-on
代码如下：
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click="add">+</button>
<button @click='sub'>-</button>
</div> <script>
const app = new Vue({
el: '#app',
data: {
message: 'helloWorldďź',
counter:0
},
methods: {
add(){
this.counter++;
},
sub(){
this.counter--;
}
},
});
</script>通过上述的写法就能实现点击事件，这比原生的js方便多了
二、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>Document</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<!--如果你调用的方法不需要参数可以把括号省略，但是如果你的方法需要传参数，则要带上括号-->
<button @click="btn01">1</button>
<button @click="btn01()">1</button>
<!--当方法定义了一个参数，加括号和不加的区别，如果不带浏览器就会默认把生成的event事件对象作为参数传入到方法里-->
<button @click="btn02(123)">2</button>
<button @click="btn02">2</button>
<!--如果在方法调用时我们需要event，又需要其他的参数-->
<!--如果要手动获取浏览器的event对象，可这样写：$event-->
<button @click="btn03(123,$event)">3</button>
<button @click="btn03">3</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'helloWorld！'
},
methods: {
btn01(){
console.log("btn01");
},
btn02(abc){
console.log("......",abc);
},
btn03(abc,aca){
console.log(".....",abc,aca);
}
},
});
</script>
</body>
</html>三、v-on的修饰符
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<!--这里点击btn会由于事件的冒泡造成div也会触发事件，所以可以在@click后面加个 .stop 来取消冒泡 -->
<div @click="div">
aaaaa
<button @click.stop="btn">点一下</button>
</div>
<form action="https://www.baidu.com">
<!-- .prevent 阻止默认提交行为-->
<input type="submit" value="提交" @click.prevent= "submitClick">
<br>
</form>
<!--监听键盘事件 .enter就是监听回车键-->
<input type="text" @keyup.enter="keyupClick">
<!-- .once修饰符是只触发一次回调-->
<br>
<button @click.once="btn">点一下</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'helloWorld！'
},
methods: {
btn(){
console.log("btn");
},
div(){
console.log("div");
},
submitClick(){
console.log("submitClick");
},
keyupClick(){
console.log("heyUp");
}
},
});
</script>
</body>
</html>