我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…
👨🎓作者：Java学术趴
💌公众号：Java学术趴
🚫特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系小编授权。
🙏版权声明：文章里的部分文字或者图片来自于互联网以及百度百科，如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。
☠️每日毒鸡汤：这个社会是存在不公平的，不要抱怨，因为没有用！人总是在反省中进步的！
👋大家好！我是你们的老朋友Java学术趴，好久没有时间写文章，最近忙着找工作。没有太多的时间给大家分享文章，从今天开始给大家持续发布新的技术文章，还希望大家多多支持支持。新的一年就要到来了，还记着在前几年，从SSM到SpringBoot，在到SpringBoot+vue2.0的时代。今年估计又会发生巨大的编程语言变革。俗话说：时代的几步必然会带动科技的发展，科技的发展必将带来新一波编程语言的到来。在今年，个人认为Vue3.0的时代就会到来，现在我们正处于Vue2.0+Vue3.0的时代，今年Vue3.0必将会替代Vue2.0的存在。
我们这篇文章也是会从Vue2.0到Vue3.0来一个过度，让大家先巩固一下Vue2.0，之后Vue3.0进发。大家如果感觉有帮助的话，可以点赞多支持支持。感谢感谢~~💓💓💓
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
