Vuejs 事件监听

在前端开发中，我们需要经常和用户交互，这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等

v-on 基础

<div id='app'><h2>{{counter}}</h2><button v-on:click="add">+</button><!-- v-on语法糖写法 @ --><button @click="sub">-</button>
</div><script>const app = new Vue({el: '#app',data: {counter: 0,},methods:{add(){this.counter++;},sub(){this.counter--;}}})
</script>
</script>

v-on 参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题
情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加；但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<div id='app'><!-- 事件调用的方法没有参数 --><button @click="btnClick1()">按钮1</button><button @click="btnClick1">按钮11</button><!-- 在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的 这个时候，vue会默认将浏览器生成的event事件对象作为参数传入到方法--><button @click="btnClick2(123)">按钮2</button><button @click="btnClick2()">按钮22</button><button @click="btnClick2">按钮222</button><!-- 在方法定义时，需要event对象，同时又需要其他参数 --><!-- 再调用方法时，如何手动的获取到浏览器参数的event对象：$event --><button @click="btnClick3(123, $event)">按钮3</button>
</div><script>const app = new Vue({el: '#app',data: {counter: 0,},methods:{btnClick1(){console.log("btnClick1");},btnClick2(event){console.log("------------", event);},btnClick3(abc, event){console.log(abc , "-----" , event);}}})
</script>

v-on 修饰符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vuejs</title><script src="js/vue.js"></script><style>div{widows: 100px;height: 100px;background: red;}</style>
</head>
<body>
<div id='app'><!-- 1、.stop修饰符：阻止事件冒泡 --><div @click="divClick"><button @click.stop="btnClick">按钮</button></div><br><!-- 2、 .prevent修饰符：阻止事件默认事件 --><form action="breezy"><!-- 阻止了submit自动提交 --><input type="submit" value="提交" @click.prevent="submitClick"></form><br><!-- 3、 .{keyCode |键别名}：监听某个键盘的键帽，当该键触发时，才执行函数--><input type="text" @keyup.enter="keyUp"><br><!-- 4、.once修饰符：只触发一次回调 --><button @click.once="btn2Click">只能点击一次</button>
</div><script>const app = new Vue({el: '#app',data: {counter: 0,},methods:{btnClick(){console.log("btnClick");},divClick(){console.log("divClick");},submitClick(){console.log("submitClick");console.log("submitClick");console.log("submitClick");console.log("submitClick");console.log("submitClick");},keyUp(){console.log("keyUp");},btn2Click(){console.log("once....");}}})
</script></body>
</html>

Vuejs 事件监听相关推荐

vue 键盘事件监听
原文链接: vue 键盘事件监听上一篇: 使用环形队列触发延时任务下一篇: vue 一次失败的dom游戏制作参考 https://cn.vuejs.org/v2/guide/events.htm ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
11-flutter事件监听
事件监听 1 本身支持事件检测,就可以直接使用onpress body:Center(child: RaisedButton(child: Text("Click"),onPres ...
从jQuery的缓存到事件监听
很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery********* ...
java中事件监听_Java中的事件监听机制
鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...
layui监听当前页_事件监听 · layui使用手册 · 看云
# 事件监听语法:form.on('event(过滤器值)', callback); form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时 ...
Java中事件监听机制
Java中事件监听机制一.事件监听机制的定义要想了解Java中的事件监听机制,首先就要去了解一下在Java中事件是怎样去定义的呢!在使用Java编写好一个界面后,我们就会对界面进行一些操作,比如, ...
关于事件监听机制的总结(Listener和Adapter)
记得以前看过事件监听机制背后也是有一种设计模式的.(设计模式的名字记不清了,只记得背后实现的数据结构是数组.) 附上事件监听机制的分析图: 一个事件源可以承载多个事件(只要这个事件源支持这个事件就可以 ...
Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作
<div id="divId" class="divTable"><div class="tableBody">&l ...

Vuejs 事件监听

v-on 基础

v-on 参数

v-on 修饰符

Vuejs 事件监听相关推荐

最新文章

热门文章