v-on事件监听
1、v-on的基本使用
<div id="app">
<h2>{
{counter}}</h2>
<!-- <button v-on:click="counter++"></button>-->
<!-- <button v-on:click="counter--"></button>-->
<!-- <button v-on:click="increment">+</button>-->
<!-- <button v-on:click="decrement">-</button>-->
<button @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>
2、v-on参数
2.1、事件调用的方法没有参数
如果事件调用的方法没有参数，则调用该方法时可以带括号，也可以不带括号。代码如下所示：
<body>
<div id="app">
<!--1、事件调用的方法没有参数-->
<button @click="btn1Click">按钮1</button>
<button @click="btn1Click()">按钮1</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀'
},
methods:{
btn1Click(){
console.log('按钮1');
}
}
})
</script>
</body>
2.2、事件调用的方法有参数
在定义事件时，写方法时省略了小括号，但是方法本身是需要一个参数的，
这个时候 Vue会默认将浏览器产生的event事件对象作为参数传入到方法。
<body>
<div id="app">
<!--2、在定义事件时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候
Vue会默认讲过浏览器产生的event时间对象作为参数传入到方法-->
<button @click="btn2Click('abc')">按钮1(方法带参数)</button>
<button @click="btn2Click()">按钮2(方法不带参数)</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀'
},
methods:{
btn2Click(event){
console.log('--------按钮2',event);
}
}
})
</script>
</body>
- 如下图所示，在不带括号的button按钮中，我们发现，Vue会默认将浏览器产生的event事件对象作为参数传入到方法。
- 在带括号不带参数的button按钮中，会显示没定义。
- 在带括号带参数的button按钮中，会打印出调用方法时传递的参数。
2.3、把event当做对象；手动取到浏览器参数event对象
<body>
<div id="app">
<!--3、方法定义时，我们需要event对象，又需要其他参数,如果按照以下方式写event,则vue是把event当做一个对象-->
<button @click="btn3Click(123,event)">按钮3,把event当成一个对象</button>
<!-- 调用方式中，如何手动获取到浏览器参数的event对象：$event-->
<button @click="btn3Click(123,$event)">按钮4，手动获取浏览器参数event对象</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀',
event:'哈哈'
},
methods:{
btn3Click(abc,event){
console.log('--------按钮2',abc,event);
}
}
})
</script>
</body>
3、v-on修饰符的使用
3.1、.stop修饰符的使用
<body>
<div id="app">
<div @click="divClick">
aaaaa
<button @click.stop="btnClick">按钮</button>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀'
},
methods:{
divClick(){
console.log('divClick');
},
btnClick(){
console.log('btnClick');
}
}
})
</script>
</body>
3.2、.prevent修饰符的使用
<body>
<div id="app">
<!--2、prevent修饰符的使用，阻止提交-->
<form action="02-v-on参数.html">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀'
},
methods:{
submitClick(){
console.log('submitClick');
}
}
})
</script>
</body>
2.3、@keyup：监听键盘，当触发并释放键盘时会有打印。
@keyup.enter当点击回车时有打印
<!--3、keyup监听键盘，当释放键盘时会在控制台打印。keydown：当按下键盘时会有打印-->
<!-- <input type="text" @keyup="keyup">-->
<!--keyup监听键盘，当按下回车时才会有打印-->
<input type="text" @keyup.enter="keyup">
2.4、只触发一次回调
这个按钮只在第一次触发时有效。
<body>
<div id="app">
<!--4、只触发一次回调-->
<button @click.once="btn2Click">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀'
},
methods:{
btn2Click(){
console.log('btn2Click');
}
}
})
</script>
</body>