Vue2键盘事件：keydown/keyup...

1.使用

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                methods:{

                    show:function(ev){

                        if(ev.keyCode == 13){

                            alert('你按回车键了');

                        }

                    },

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        <input type="text" placeholder="请输入" @keyup="show($event)"> 

        <input type="text" placeholder="请输入" @keyup.13="show($event)">

    </div>

</body>

</html>

当按下键盘的时候，执行show方法，然后再去执行相应的业务。

两个input的效果都是一样的 如果安13  也就是按键 enter   才会执行弹窗！！

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

Vue2学习笔记:键盘事件的更多相关文章

  1. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  2. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  3. Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>

    Caliburn.Micro学习笔记目录 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现 ...

  4. iOS学习笔记--触摸事件

    最近空闲时间在学习iOS相关知识,几周没有更新文章了,今天总结下这些天的学习内容,也整理下iOS的学习笔记,以便以后查阅翻看- iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件 响 ...

  5. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  6. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  7. javascript学习笔记 --event事件

    事件源(按钮.窗口)->事件对象->事件处理程序 事件源可以是网页元素浏览器窗口事件处理程序一般是一个函数.       一个事件可以被多个函数处理       事件的总类       鼠 ...

  8. Python:GUI之tkinter学习笔记3事件绑定

    相关内容: command bind protocol 首发时间:2018-03-04 19:26 command: command是控件中的一个参数,如果使得command=函数,那么点击控件的时候 ...

  9. JS学习笔记6_事件

    1.事件冒泡 由内而外的事件传播(从屏幕里飞出来一支箭的感觉) 2.事件捕获 由表及里的事件传播(力透纸背的感觉) 3.DOM事件流(DOM2级) 事件捕获阶段 -> 处于目标阶段 -> ...

随机推荐

  1. Chapter 3 Phenomenon——15

    "So, what's the verdict?" he asked me. “所以,你的结论是什么?”他问我. “那么,他们对你的判决是?”他问我. "There's ...

  2. Linux笔记：linux常用命令

    文件目录操作 1.展示目录命令 ls # 展示当前目录下的可见文件 ls -a # 展示当前目录下所有的文件(包括隐藏的文件) ls -l # 展示当前目录下文件的详细信息 ll # 展示当前目录下文 ...

  3. docker 安装集群管理工具 docker-compose

    compose将管理的容器分为3层, 工程, 服务, 容器. 一个工程中可包含多个服务, 每个服务中定义容器运行的镜像参数, 依赖, 一个服务中科包含多个容器实力, 并没有解决负载均衡的问题 dock ...

  4. 使用C# 开始第一个QQ机器人

    本示例将会使用”嘤鹉学舌”这个小插件的实现来演示如何使用Newbe.Mahua实现第一个机器人插件. 插件功能 自动将发送者的消息回发给发送人,嘤鹉(Parrot,其实是说嘤嘤嘤怪)学舌. 开发环境要 ...

  5. 设计模式学习--装饰者模式(Decorator Pattern)

    概念: 装饰者模式(Decorator Pattern): 动态地将功能添加到对象,相比生成子类更灵活,更富有弹性. 解决方案: 装饰者模式的重点是对象的类型,装饰者对象必须有着相同的接口,也也就是有 ...

  6. Node.js 常用工具util包

    Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.isError(obj); util.is ...

  7. 转载：SQL按照日、周、月、年统计数据的方法

    转载源:http://www.jb51.net/article/42613.htm SQL按照日.周.月.季度.年统计数据的方法 方式一: --按日 select sum(consume),day([ ...

  8. Java - String, Stringbuilder, StringBuffer比较

    http://www.cnblogs.com/zuoxiaolong/p/lang1.html

  9. WCF使用net.tcp绑定的配置实例

    <system.serviceModel> <bindings> <basicHttpBinding> <!--默认http绑定的配置,这里提高了最大传输信息 ...

  10. Spring+SpringMVC+SpringDataJpa整合

    一.思路: (一) Dao层与Service层: applicationContext.xml. a) 数据库连接池 b) 整合jpa c) 配置@service文件扫描器. d) 配置事务管理管理器 ...