Vue2.0事件处理学习

一、事件的基本使用

1.使用方法：

（1）使用v-on：xxx或@xxx绑定事件，其中xxx是时间名；

（2）事件的回调需要配置在methods对象中，最终会在vm上；

（3）methods中配置的函数，不要用箭头函数！否则this就不是vm了；

（4）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；

（5）@click="demo"和@click="demo($event)"效果一致，但后者可以传参；

2.代码展示 

实例一

实例二

二、事件修饰符（修饰符可以连续写）

（1）Vue中的事件修饰符

1.prevent：阻止默认事件（常用）

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：（

5.self：只有event.target是当前操作的元素时才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

（2)代码阻止事件

 （3）事件冒泡

 

 

 阻止事件冒泡的方式

①添加stopPropagation

 ②在click后面添加.stop就可以了（注意观察添加的地方，根据层次选择添加的地方）

（3）事件只触发一次(代码)

 

(4)使用事件的捕获模式

①用冒泡的方式读取（代码）

 

②用捕获的方式读取（代码）（将capture放在外面的盒子上）

（5） 只有event.target是当前操作的元素时才触发事件（代码）

 

 （6）事件的默认行为立即执行，无需等待事件回调执行完毕

①scroll

②wheel

③加入passive有限享用滚动

三、 键盘事件

1.键盘事件常用的两个

①keydow

按下按键不用抬起来就触发事件

②keyup

按下去抬起来才会触发事件

2.Vue中常用的案件别名

回车 ==> enter

删除 ==> delete(捕获“删除”和“退格”键)

退出 ==> esc

空格 ==> space

换行 ==> tab （特殊，必须配合keydown使用）

上 ==> up

下 ==> down

左 ==> left

右 ==> right

代码：

不推荐使用的： 

3.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

 

4.系统修饰键（用法特殊）：ctrl、alt、shift、meta（后面还可以跟.x/i等）

①配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发

②配合keydown使用：正常触发

5.也可以使用keyCode去指定具体的按键（不推荐）

6.Vue.confg.keyCodes.自定义键名 = 键码，可以去定制按键别名