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. 《LeetBook》leetcode题解(20):Valid Parentheses[E]——栈解决括号匹配问题

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  2. asp.net页面传值方法汇总

    1. Get(即使用QueryString显式传递)     方式:在url后面跟参数.     特点:简单.方便.     缺点:字符串长度最长为255个字符:数据泄漏在url中.     适用数据 ...

  3. iphoneX 适配

    1.iphoneX的尺寸  375*812   上边有44px的危险区,下边有34px的危险区,剩下的是安全区. 2.viewport设值cover <meta name="viewp ...

  4. linux环境下编译C++ 程序

    GCC(GNU Compiler Collection)是Linux下最主要的编译工具,GCC不仅功能非常强大,结构也异常灵活.它可以通过不同的前端模块来支持各种语言,如:Java.Fortran.P ...

  5. 使用Visual Studio Code搭建PHP调试环境

    1.需要安装的软件 Visual Studio Code. WAMP(包括Apache.MySQL.PHP.以及最关键的XDebug) 2.下载软件 Visual Studio Code,光看名字就知 ...

  6. 深入理解Java虚拟机：第2章 Java内存区域与内存溢出异常

    目录 2.2 运行时数据区域 Java堆 方法区 虚拟机栈 本地方法栈 程序计数器 2.3 HotSpot虚拟机对象探秘 对象的创建 对象的内存布局 对象的访问定位   2.2 运行时数据区域 Jav ...

  7. UIKit 框架之UISearchBar、UITableViewController

    // // tableViewController.m // tableVC // // Created by City--Online on 15/6/1. // Copyright (c) 201 ...

  8. Express开发性能优化

    1.使用浏览器缓存 在app.js里添加 var CACHETIME = 60 * 1000 * 60 * 24 * 30; app.use(express.static(path.join(__di ...

  9. Vertica使用Database Designer创建完整的设计

    Vertica Database Designer 分析逻辑架构,示例数据库可以分析实力查询. 创建可自动部署或手动部署的物理架构设计(一组投射) 任何不具备数据库专业知识的人员均可使用 可以随时运行 ...

  10. Java利用反射取得类的所有信息

    Java中可以利用反射获取类的名称.构造函数.属性.方法.也就是说可以通过反射可以取得类的所有信息(不管该成员是否封装为private). 如有下面的Dept类定义: package org.lyk. ...