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. C/C++ -- Gui编程 -- Qt库的使用 -- 理解主窗体构造函数

    MyWidget做父窗体 MyWidget的构造函数中可以手动添加组件 Ui::MyWidget存放子部件 Ui::MyWidget执行setupUi()函数为子部件开辟空间,指定父窗体 MyWidg ...

  2. Chapter 3 Phenomenon——15

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

  3. 使用httpClient连接池处理get或post请求

    以前有一个自己写的: http://www.cnblogs.com/wenbronk/p/6482706.html 后来发现一个前辈写的更好的, 再此感谢一下, 确实比我写的那个好用些 1, 创建一个 ...

  4. C++运行时动态类型

    RTTI 运行时类型识别(RTTI)的引入有三个作用: 配合typeid操作符的实现: 实现异常处理中catch的匹配过程: 实现动态类型转换dynamic_cast typeid操作符的实现 静态类 ...

  5. Visual Studio使用阿里云Code Git服务器的常见问题

    使用Github的服务器太慢,阿里的https://code.aliyun.com的国内服务器还是很快的.但是使用阿里的Git服务器总是有些地方出问题,现记录下常见的问题: 1.如提示源码已在TFS管 ...

  6. mybatis逆向工程总结工具类

    逆向工程字面意思就是反向生成工程,和hibernate一样mybatis也有自己的逆向工程工具,hibernate的逆向生成我没有做过,不过我猜大概都已样,再说,hibernate的现在使用很少了,到 ...

  7. HTTPS 接入优化建议

      随着网络安全的普及成为共识,部署SSL证书完成HTTPS加密的站点 也随之增多.HTTPS加密能够带来的对身份验证及信息加密等诸多好处,不过想要HTTPS协议发挥更加完美的作用也需要开发者在相应环 ...

  8. Mysql汉字乱码的解决

    在安装Mysql时其实可能选择使用GBK来处理汉字,由于以前没使用,所以就按默认的英语处理.不过,也可以C:\Program Files\MySQL\MySQL Server 6.8安装路径下的my文 ...

  9. [转]微信小程序之加载更多（分页加载）实例 —— 微信小程序实战系列（2）

    本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...

  10. fastjson之JSONObject、JSONArray

    JSONObject,JSONArray是JSON的两个子类. 首先我们来看JSONObject源码: 会发现JSONObject是继承Map<String, Object>,并且都是使用 ...