事件处理器v-on:(event)/@(event)
<!DOCTYPE html>
<html lang="zh"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="../css/style.css" rel="stylesheet"> </head> <body>
<div id="myApp">
<h1>事件处理器</h1>
<input id="txtName" v-on:keyup="txtKeyup($event)">
<button id="btnOK" v-on:click="btnClick($event)">OK</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {},
methods: {
txtKeyup: function(event){
this.debugLog(event);
},
btnClick: function(event){
this.debugLog(event);
},
debugLog:function(event){
console.log(
event.srcElement.tagName,
event.srcElement.id,
event.srcElement.innerHTML,
event.key?event.key:""
);
},
},
});
</script>
</body> </html>
事件处理器v-on:(event)/@(event)的更多相关文章
- ASP.NET Core Web API下事件驱动型架构的实现（二）：事件处理器中对象生命周期的管理
在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...
- Qt中事件处理的方法（三种处理方法，四种覆盖event函数,notify函数，event过滤，事件处理器。然后继续传递给父窗口。可观察QWidget::event的源码，它是虚拟保护函数，可改写）
一.Qt中事件处理的方式 1.事件处理模式一 首先是事件源产生事件,最后是事件处理器对这些事件进行处理.然而也许大家会问, Qt中有这么多类的事件,我们怎么样比较简便的处理每个事件呢?设想,如果是 ...
- SAP CRM和Cloud for Customer中的Event handler（事件处理器）
SAP CRM可以在开发工具中用右键直接创建一个新的事件处理器: 这些事件处理器实际上就是UI控制器(Controller)上具有特定接口类型的方法. C4C UI的event handler 在C4 ...
- Javascript 事件对象（二）event事件
Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...
- 兼容firefox，ie，谷歌，阻止浏览器冒泡事件，Firefox不支持event解决方法
兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return w ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单
提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jQuery之Ajax--全局Ajax事件处理器
1.这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后,这些事件处理器被调用.如果jQuery.ajaxSteup()中的 global 属性被设置为 true (这也 ...
随机推荐
- 【POJ】1182 食物链
这是<挑战设计程序竞赛>中的例题. 题目链接:http://poj.org/problem?id=1182 题意:中文题面.不赘述. 题解: 代码: //带权并查集 #include< ...
- 【POJ】1426 Find The Multiple
题目链接:http://poj.org/problem?id=1426 题意:给定一个正整数n,找一个比n大且能只由01构成的且能够被n整除的数. 题解:这个就是在后面添0和添1小心试探.一定要是添0 ...
- Codeforces 479【F】div3
题目链接:http://codeforces.com/problemset/problem/977/F 题意:给你一串数字序列,让你求最长上升子序列,但是这个子序列呢,它的数字得逐渐连续挨着. 题解: ...
- Neo4j 3.5发布，在索引方面大幅增强
Neo4j 3.5版本已正式发布,这也是Neo4j宣布企业版闭源以来发布的第一个版本. 这个版本在性能.资源使用率以及安全方面均有增强,我们可以先快速浏览一下这个版本: 全文索引 基于Index的快速 ...
- Linux CPU负载状态：%us/%sy/%ni/%id/%wa/%hi/%si/%st含义
原文 Linux CPU负载状态:%us/%sy/%ni/%id/%wa/%hi/%si/%st含义 缙哥哥发现用了雅黑的探针,在 Linux 的 CPU 状态信息中发现,有“%us.%sy.%ni. ...
- mysql的双主模式
mysql主主复制配置 server1 ip:192.168.0.231server2 ip:192.168.0.234 更改两台主机的mysql配置文件vim /etc/my.cnfserver1添 ...
- Python｜读、写Excel文件（三种模块三种方式）
python读写excel的方式有很多,不同的模块在读写的讲法上稍有区别: 用xlrd和xlwt进行excel读写: 用openpyxl进行excel读写: 用pandas进行excel读写: imp ...
- delphi 流程单打印
1.添加声明 f_count1: double; 2.得到拆分页数量 // Modified by 884 2018-04-20 14:50:18 AM0057 with aqTpCount do b ...
- Es567严格模式
Es5 严格模式 http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 除了正常运行模式(混杂模式),ES5添加了第二种 ...
- 把云数据库带回家！阿里云发布POLARDB Box数据库一体机
9月26日,2019杭州云栖大会上,阿里云宣布正式推出高性能数据库一体机——POLARDB Box,用户部署在自有数据中心即可享受云数据库的便捷体验,同时还为Oracle等传统数据库用户提供一键迁移功 ...