Vue2键盘事件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件

键盘事件

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <script src="../js/Vue.js" charset="utf-8"></script>

  <script type="text/javascript">

    window.onload = function () {

      var vm = new Vue({

        el: ‘#box‘,

        data: {},

        methods: {

          show: function (ev) {

            alert(ev.keyCode)

          }

        }

      });

    }

  </script>

</head>

<body>

<div id="box">

  <input type="text" @keydown="show($event)">

</div>

</body>

</html>

keyCode

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <script src="../js/Vue.js" charset="utf-8"></script>

  <script type="text/javascript">

    window.onload = function () {

      var vm = new Vue({

        el: ‘#box‘,

        data: {},

        methods: {

          show: function (ev) {

            if(ev.keyCode==13){

              alert(‘你按了回车键!‘)

            }

          }

        }

      });

    }

  </script>

</head>

<body>

<div id="box">

  <input type="text" @keyup="show($event)">

</div>

</body>

</html>

keyUp

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <script src="../js/Vue.js" charset="utf-8"></script>

  <script type="text/javascript">

    window.onload = function () {

      var vm = new Vue({

        el: ‘#box‘,

        data: {},

        methods: {

          show: function (ev) {

            alert(ev.keyCode)

          }

        }

      });

    }

  </script>

</head>

<body>

<div id="box">

  <input type="text" @keyup="show($event)">

</div>

</body>

</html>

键盘事件——简写方式

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

  <script src="../js/Vue.js" charset="utf-8"></script>

  <script type="text/javascript">

    window.onload = function () {

      var vm = new Vue({

        el: ‘#box‘,

        data: {},

        methods: {

          show: function () {

            alert(‘你按了回车!‘);

          },

          show2: function () {

            alert(‘你按了回车!‘);

          },

          show3: function () {

            alert(‘你按了上键!‘);

          },

          show4: function () {

            alert(‘你按了下键!‘);

          },

          show5: function () {

            alert(‘你按了左键!‘);

          },

          show6: function () {

            alert(‘你按了右键!‘);

          }

        }

      });

    }

  </script>

</head>

<body>

<div id="box">

  <input type="text" @keyup.13="show()">

  <hr>

  <input type="text" @keyup.enter="show2()">

  <hr>

  <input type="text" @keyup.up="show3()">

  <hr>

  <input type="text" @keyup.down="show4()">

  <hr>

  <input type="text" @keyup.left="show5()">

  <hr>

  <input type="text" @keyup.right="show6()">

  <hr>

</div>

</body>

</html>

时间: 2024-12-24 23:41:17

Vue2键盘事件的相关文章

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

Vue 键盘事件

Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <script type="text/javascript"> window.o

vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type="button" value="按钮" @click="show1($event)"> </div> methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelB

关于事件冒泡和键盘事件 以及与Angular的区别

一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type="button" value="按钮" @click="show1($event)"> </div> methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelB

基于OpenGL编写一个简易的2D渲染框架-07 鼠标事件和键盘事件

这次为程序添加鼠标事件和键盘事件 当检测到鼠标事件和键盘事件的信息时,捕获其信息并将信息传送到需要信息的对象处理.为此,需要一个可以分派信息的对象,这个对象能够正确的把信息交到正确的对象. 实现思路: 要实现以上的功能,需要几个对象: 事件分派器:EventDispatcher,负责将 BaseEvent 分派给 EventListener 对象 事件监听器:EventListener,这只是一个接口类,接受 BaseEvent 的对象,真正的处理在它的子类中实现 事件:BaseEvent,储存

键盘事件相关

转自下面两个链接:http://www.cnblogs.com/starof/p/6558581.html   http://www.cnblogs.com/cathsfz/archive/2011/05/29/2062382.html 在 JavaScript 中监听 IME 键盘输入事件 在 JavaScript 中监听用户的键盘输入是很容易的事情,但用户一旦使用了输入法,问题就变得复杂了.输入法应当如何触发键盘事件呢?是每一下击键都触发一次事件,还是选词完毕才触发事件呢?整句输入又该如何触

jquery键盘事件总结

在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结: 一.首先要知道键盘事件的几个属性: 1.keydown():在键盘按下时触发. 2.keyup():是按下键盘起来后的事件. 3.keypress():在敲击按键时触发,我们可以理解为按下并抬起同一个按键. 二.获得键盘上对应的 ascII 码: //键码获取 $(document).keydown(function (event) { alert(event.keyCode);

JavaScript的事件对象_键盘事件

用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 keydown 和 keyup 事件时,event 对象的 keyCode 属性中会包含一个代码,与键盘上一个特定的键对应.对数字字母字符集,keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同.字母中大小写不影响. <script type="text/javascript&q

(四)WebDriver API:控制浏览器及鼠标、键盘事件

参考文档:WebDriver官方文档,下载链接:http://download.csdn.net/detail/kwgkwg001/4004500 虫师:<selenium2自动化测试实战-基于python语言> 一.控制浏览器 webdriver主要提供操作页面上各种元素的方法,但它也提供操作浏览器的一些方法,例如控制浏览器大小.前进和后退等. 1.控制浏览器窗口大小 webdriver提供了set_window_size()方法来设置浏览器大小: # 控制浏览器大小 from seleni