<!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)的更多相关文章

  1. ASP.NET Core Web API下事件驱动型架构的实现（二）：事件处理器中对象生命周期的管理

    在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...

  2. Qt中事件处理的方法（三种处理方法，四种覆盖event函数,notify函数，event过滤，事件处理器。然后继续传递给父窗口。可观察QWidget::event的源码，它是虚拟保护函数，可改写）

    一.Qt中事件处理的方式   1.事件处理模式一 首先是事件源产生事件,最后是事件处理器对这些事件进行处理.然而也许大家会问, Qt中有这么多类的事件,我们怎么样比较简便的处理每个事件呢?设想,如果是 ...

  3. SAP CRM和Cloud for Customer中的Event handler（事件处理器）

    SAP CRM可以在开发工具中用右键直接创建一个新的事件处理器: 这些事件处理器实际上就是UI控制器(Controller)上具有特定接口类型的方法. C4C UI的event handler 在C4 ...

  4. Javascript 事件对象（二）event事件

    Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  5. jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...

  6. 兼容firefox，ie，谷歌，阻止浏览器冒泡事件，Firefox不支持event解决方法

    兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return w ...

  7. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单

    提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. jQuery之Ajax--全局Ajax事件处理器

    1.这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后,这些事件处理器被调用.如果jQuery.ajaxSteup()中的 global 属性被设置为 true (这也 ...

随机推荐

  1. HDU 2167 状压dp方格取数

    题意:给出一个数表,规定取出一个数后周围的八个数都不可取,求可获得的最大数字和 思路:状态压缩dp,每一行的取数方法为状态,显然,由于取数规则的限制,可取的状态并不是 1<<size_co ...

  2. java OOP第03章_继承、抽象类和抽象方法

    一. 为什么需要继承: 若多个类中都需要一些属性和方法,那么就可以将属性和方法抽取到一个父类中,需要的子类可以通过extends关键字去继承这个父类后拥有相应的属性和方法. 类.数组.方法----引用 ...

  3. linux 服务器安装php5.6

    查看原有的php版本:php -v 如果已经装了低版本的php,为了避免冲突,查看: yum list installed | grep php 删除:自行百度吧.可能不能一次性全部删除,只能一个一个 ...

  4. Java怎样判断身份证号

    判断身份证号是否正确使用的是正则,Java与js中使用正则的方式大差不差,下面是Java通过正则判断身份证号是否正确的 * */ @Test public void cardId() { System ...

  5. 安装和设置kubectl命令

    Linux [root@cx-- ~]# curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.13.5/bin/ ...

  6. MySql学习笔记（一）之DQL常用查询

    MySql学习笔记(一)之DQL常用查询 前言:mysql是中小型的数据库软件,SQL语言分为DDL,DCL,DML,DQL四种,在这里重点讲解DQL的单表查询. 正文:在学习mysql单表查询之前, ...

  7. badboy录制添加检查点

    前提条件 安装badboy 下载地址:http://www.badboy.com.au/download/index 录制脚本 1.例:录制www.baidu.com 2.打开badboy工具输入录制 ...

  8. VS2010-MFC（常用控件：按钮控件Button、Radio Button和Check Box）

    转自:http://www.jizhuomi.com/software/182.html 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check ...

  9. 《DSP using MATLAB》Problem 8.36

    上代码: function [wpLP, wsLP, alpha] = lp2lpfre(wplp, wslp) % Band-edge frequency conversion from lowpa ...

  10. MongoDB特性及使用场景

    概述 MongoDB(Humongous Database),中文意思就是巨大无比的数据库,顾名思义,MongoDB就是为处理大数据而生,以解决海量数据的存储和高效查询使用为使命.MongoDB是一款 ...