Vue的数据代理+事件处理+事件修饰符+键盘事件

一、回顾Object.defineProperty()方法

1、几个属性

Vue的数据代理+事件处理+事件修饰符+键盘事件_第1张图片
Vue的数据代理+事件处理+事件修饰符+键盘事件_第2张图片

2、getter和setter(get函数和set函数)

Vue的数据代理+事件处理+事件修饰符+键盘事件_第3张图片
Vue的数据代理+事件处理+事件修饰符+键盘事件_第4张图片

二、初识Vue

Vue的数据代理+事件处理+事件修饰符+键盘事件_第5张图片

三、数据代理

1、数据代理的定义

通过obj2去操作x
Vue的数据代理+事件处理+事件修饰符+键盘事件_第6张图片

Vue的数据代理+事件处理+事件修饰符+键盘事件_第7张图片

2、vue中的数据代理

1、概览
Vue的数据代理+事件处理+事件修饰符+键盘事件_第8张图片
Vue的数据代理+事件处理+事件修饰符+键盘事件_第9张图片
2、验证setter
Vue的数据代理+事件处理+事件修饰符+键盘事件_第10张图片
Vue的数据代理+事件处理+事件修饰符+键盘事件_第11张图片

3、数据代理图示

Vue的数据代理+事件处理+事件修饰符+键盘事件_第12张图片
Vue的数据代理+事件处理+事件修饰符+键盘事件_第13张图片

四、vue中的事件处理

1、点击事件

Vue的数据代理+事件处理+事件修饰符+键盘事件_第14张图片

2、事件修饰符

Vue的数据代理+事件处理+事件修饰符+键盘事件_第15张图片
Vue的数据代理+事件处理+事件修饰符+键盘事件_第16张图片

五、键盘事件

1、常用按键

Vue的数据代理+事件处理+事件修饰符+键盘事件_第17张图片

Vue的数据代理+事件处理+事件修饰符+键盘事件_第18张图片

2、短横线

Vue的数据代理+事件处理+事件修饰符+键盘事件_第19张图片
Vue的数据代理+事件处理+事件修饰符+键盘事件_第20张图片

3、tab的用法

tab适用于keydown,不适用与keyup
Vue的数据代理+事件处理+事件修饰符+键盘事件_第21张图片

4、定制按键别名

Vue的数据代理+事件处理+事件修饰符+键盘事件_第22张图片

六、事件总结

1、修饰符可以连续写
2、系统修饰符后面可以跟一个具体的按键,表明两者一起按下时起作用

Vue的数据代理+事件处理+事件修饰符+键盘事件_第23张图片
Vue的数据代理+事件处理+事件修饰符+键盘事件_第24张图片

你可能感兴趣的:(Vue,Vue)