事件监听
在vue中,我们有时候需要对浏览器事件进行事件监听,比如当鼠标点击某一个按钮时,触发某种事件,这时,Vue为我们提供了方便快捷的方式v-on:
- v-on的基本使用
示例代码:定义两个按钮,点击对应的按钮,对数据进行相应的增加和减少:
<div id="app">
<h3>{{counter}}</h3>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
add() {
this.counter++;
},
sub() {
this.counter--;
}
}
});
</script>
运行结果:点击对应的按钮,对文本实现相对应的增减
2.v-on的参数问题:
在我们使用v-on进行事件监听时,有可能需要对监听的事件传入相对于的参数,这时候需要对事件监听后的函数传递参数,其情况可以大致分为以下几种:
示例代码:
<div id="app">
<h3>{{counter}}</h3>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
<!-- 不需要传参数,加不加括号都可以 -->
<button @click="btn1()">按钮1</button>
<button @click="btn1">按钮1</button>
<!-- 需要传一个参数,传入的参数需要加引号,不加引号将会去data里面寻找 -->
<button @click="btn2('abc')">按钮2</button>
<!-- 未加参数undefined -->
<button @click="btn2()">按钮2</button>
<!-- 没有括号获取浏览器的事件event -->
<button @click="btn2">按钮2</button>
<!-- 手动获取浏览器的event对象,$event -->
<button @click="btn(123,$event)">按钮</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
add() {
this.counter++;
},
sub() {
this.counter--;
},
btn1() {
console.log("123");
},
btn2(str){
console.log(str);
},
btn(str, event) {
console.log(str, event);
}
}
});
</script>
- 当不需要传递参数时,函数的括号加不加都可以,实现的效果是一样的:
<!-- 不需要传参数,加不加括号都可以 -->
<button @click="btn1()">按钮1</button>
<button @click="btn1">按钮1</button>
运行结果:
点击按钮1,因为不需要传递参数,所以两者的实现效果一致,都打印出123;
- 当需要传递一个参数时:需要传一个参数,传入的参数需要加引号,不加引号将会去data里面寻找;
<!-- 需要传一个参数,传入的参数需要加引号,不加引号将会去data里面寻找 -->
<button @click="btn2('abc')">按钮2</button>
<!-- 未加参数undefined -->
<button @click="btn2()">按钮2</button>
<!-- 没有括号获取浏览器的事件event -->
<button @click="btn2">按钮2</button>
运行结果:
第一个按钮需要传递参数str,第一个按钮传递的时字符串abc因此在控制台打印出abc字符串,第二个按钮调用的时btn2方法,btn2需要传入一个参数,但是第二个按钮调用时并没有给该方法传入一个参数,因此打印出未定义;
在需要传入参数,没有给函数方法传入参数,并且也没有括号时:传入的是浏览器的event对象
- 当我们既需要传入参数,有需要获取浏览器的event对象时:可以通过$event获取:
<button @click="btn(123,$event)">按钮</button>
运行结果: