Vue学习计划基础笔记(四) - 事件处理

事件处理

目标：

1. 熟练掌握事件监听的方式，熟悉事件处理方式以及各类事件修饰符
2. 理解在html中监听事件的意义

监听事件(v-on)

1. 类似普通的on,例如v-on:click或@click就相当于普通的onclick, v-on调用的是vue实例methods里面的方法.
2. v-on不只可以调用methods的方法, 也可以执行一些js表达式
3. 传入特殊变量$event就可以访问到元素的DOM事件

事件修饰符

1. 修饰符
   
   .stop // 阻止事件传播
   
   .prevent // 阻止默认行为
   
   .capture // 使用事件捕获模式(先自身处理,再次交由内部元素处理)
   
   .self // 当event.target是当前元素自身时触发(其他元素引起的不会生效)
   
   .once // 只能触发一次
   
   .passive // 让默认行为立即触发
2. 修饰符加在事件名称后面,而且可以串联,也可以只有修饰符

例如: <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>

按键事件修饰符

1.键盘事件

@keydown // 键盘按下事件

@keyup // 键盘松开事件

2.修饰符(按键别名)

.enter

.tab

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

.esc

.space

.up

.down

.left

.right

除此之外,可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

3.系统控制组合修饰

.ctrl

.alt

.shift

.meta

 <!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

为什么在HTML中监听事件

实质上所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上

而使用v-on有以下好处:

1. 方便查看模版绑定的事件以及能轻松定位js代码里面对应的方法
2. 无需js手动绑定事件,和dom解耦,易于测试
3. 当一个ViewModel被销毁时, 所有的事件处理器都会自动被删除,不用清除.