1.9.3 键盘事件
1. Vue中常用的按键别名：
- 回车：enter
- 删除：delete（注意:这个捕获的是”删除“和“退格”键。删除键不会删除数据，然后显示数据。退格键会删除一位数据然后显示数据。）
- 退出：esc
- 空格：space
- 换行：tab（注意：tab键只能配合 keydown 事件使用。如果配合 keyup 事件，当键盘按下的时候已经失去了对于此DOM对象的焦点。就不会触发这个DOM对象对用的函数。）
- 上：up
- 下：down
- 左：left
- 右：right
2.绑定键盘的方式
- Vue未提供别名的按键，可以使用按键原始的key值(key名)去绑定，但是注意转为kebab-case(短横线命名) 例如：转换大小写(Caps键)的名字为：CapsLock，当时使用 @keyup.CapsLock不起效果。 此时需要将其转换为：caps-lock(短横线命名)
- 系统修饰符(用法特殊)：ctrl、alt、shift、meta(win键)(1)：配合keyup使用：按下修饰键的同时，在按下其他键(任意键)，随后释放其他键，事件才会被触发。(2)：配合keydown使用：正常按键触发事件。
- 注意事项
- 对于系统修饰符来说，我们可以指定系统修饰符配合哪个键使用才会生效
@keyup.ctrl.y : 代表只有点击 ctrl + y 键的时候才会触发这个键盘弹起事件。 点击其他的组合键(ctrl+z、ctrl+t等都不会触发这个键盘弹起事件。) - 也可以使用keyCode去指定具体的按键(不推荐)。
- Vue.config.keyCodes.自定义键名(别名) = 键值，可以定义按键的别名(不推荐 )
- 键盘上任何一个按键都有键值和键名例如：回车键的键值为 13，键名为 Enter。我们之所以可以使用 @keyup.enter 是因为Vue给我们提供了几个按键的别名，我们可以直接使用。Enter才是回车键的真正名字。
- 不是所有的按键都可以绑定事件。有些按键连键盘捕获都捕获不到这个按键，比如调整音量大小、亮度等按键。
- 有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件</title> <script type="text/javascript" src="../../../../../js/vue.js"></script> </head> <body> <!--准备一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2><br> <input type="text" placeholder="按下键盘触发事件" @keydown.huiche="show($event)"> <!-- 此时只有点击ctrl+y之后在松开才会触发这个时间函数 --> <input type="text" placeholder="按下键盘触发事件" @keyup.ctrl.y="show($event)"> <!-- 不仅可以应用键名去绑定，还可以通过键值去绑定，但是通过键值的方式不被推荐。 以为随着键盘布局的不同，他的键值会所有差别。 --> <input type="text" placeholder="按下键盘触发事件" @keyup.13="show($event)"> </div> <script type="text/javascript"> Vue.config.productionTip = false; // 阻止 Vue 在启动时生成生产提示。 /* 给键盘定义别名 Vue.config.keyCodes.自定义键名(别名) = 键值，可以定义按键的别名*/ /* 涉及到Vue全局配置的都在Vue对象的外部定义 */ Vue.config.keyCodes.huiche = 13; new Vue({ el:'#root', data:{ name:'清华大学', }, methods:{ show(event){ /* event代表的是：KeyboardEvent 键盘事件 这个键盘事件中有很多的属性，可以通过键盘事件中相应的属性来获取相关的信息。 不同的事件调用这个函数传递回来的event事件是不同的。(鼠标单机事件：PointerEvent。键盘事件：KeyboardEvent) event.target 获取的是调用当前函数的DOM对象(input对象) event.target.value <=> DOM.value(调用input标签中的value属性获取对应的value值) */ // 获取键值 使用event.KeyCode，因为keyCode是属于event中的属性。而不是属于event.target中的属性。 // 而 target也是属于 event中的属性，此时的这个 event.target就是input框。 // 但是value是属于DOM中的一个属性，此时也就是input框中的value属性。(文本框的值) // 所以需要使用 event.target.value来获取这个DOM对象的value值。 // 以下是用来获取用户点击的 键以及这个键对应的键值。 console.log(event); /* event.key是这个按键的名字，这个名字并不是按键上写的名字(x,y,z,Caps) * 这里的名字需要自己获取。 * */ console.log(event.key,event.keyCode); console.log(event.target.value); /* * 这里我们给定一个需求：只有当用户按下 enter键的时候才会将DOM对象中的value值打印到控制台。 * enter键的键值为 13 * 这是以前我们使用JavaScript的方式。 * * 在Vue中国我们只需要在事件的后面加入 事件修饰即可。不使用这种方式。 * */ /* if (event.keyCode === 13){ console.log(event.target.value); }*/ } } }) </script> </body> </html> 复制代码
2.0 Vue中的数据代理
- Vue中的数据代理：通过vm对象来代理data对象中属性的操作。(读/写)
- vue中数据代理的好处：更加方便的操作data中的数据
- 基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，指定一个getter/setter。在getter/setter内部取操作(读/写)data中对应的属性。
- 在Vue的实列对象vm中，只要数据存在(...)说明一定使用了数据代理。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的数据代理</title> <!-- 引入Vue的js文件 --> <script src="../../../../../js/vue.js"></script> </head> <body> <!-- 1. Vue中的数据代理： 通过vm对象来代理data对象中属性的操作。(读/写) 2. vue中数据代理的好处： 更加方便的操作data中的数据 3. 基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性，指定一个getter/setter。 在getter/setter内部取操作(读/写)data中对应的属性。 4. 在Vue的实列对象vm中，只要数据存在(...)说明一定使用了数据代理。 --> <!--给定一个容器，也就是MVVM中的V（view）--> <div id="root"> <!-- 此时data中的数据全部存储到了vm的 _data中。 并且没有发生动态代理，只是简单的将data中的数据复制一份存储到 _data 中 以前在模板语法中讲过，只要是vm中的数据，都可以直接使用 {{xxx}} 直接获取。 此时的 _data 在vm中，并且_data 中存在name属性值。 所以说，如果不使用数据代理完全可以获取到data中的值。 --> 学校名称：{{_data.name}} <br/> <!-- 当我们把 name、address直接存储到 vm 中的时候才发生了Vue的数据代理 相当于我们将 vm中的_data中的数据复制一份传递给vm对象，此时vm中的name、address 就代理了 _data中的name与address。这个地方才发生了数据代理。 就是将 vm(name、address)代理了_data(name,address)，此时使用的就是：Object.defineProperty 之所以使用数据代理，是为了使我们的开发更加方便。就不用使用 {{_data.name}}的方式。 并且当我们存储完这个两个数据的时候，在vm中会自动生成 getter/setter 方法 当在页面中取出data中的数据的时候会调用 getter 方法。 当在网页上修改数据的时候，会自动调用setter方法修改data中的数据。 并且这个getter/setter直接操作的是vm中的_data，而不是data。 通过_data改变data中的数据。 _data.name <==> name --> 学校地点：{{address}} </div> <script type="text/javascript"> /*定义一个MVVM中的vm(视图模型)，也就是Vue对象*/ const vm = new Vue({ el:"#root", /* 这个data中的数据会存储到vm中的 _data属性中。此时还没有发生动态代理。 只是单纯的把 data中的数据赋值给了 vm中_data。 */ data:{ name:'清华大学', address:'北京大兴区' } }) </script> </body> </htm
