事件

事件

1.事件驱动与数据驱动

用原生JavaScript事件驱动通常是这样的流程：

• 先通过特定的选择器查找到需要操作的节点->给节点添加相应的事件监听
• 然后用户执行某事件（点击，输入，后退等等）-> 调用 JavaScript来修改节点
  这种模式对业务来说是没有什么问题，但是从开发成本和效率来说会比较不理想，特别是在业务系统越来越庞大的时候。另一方面，找节点和修改节点这件事，效率本身就很低，因此出现了数据驱动模式。

Vue的一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据,其流程如下：

用户执行某个操作 -> 反馈到VM 处理（可以导致 Model 变动）-> VM 层改变，通过绑定关系直接更新页面对应位置的数据

可以简单地理解：数据驱动不是操作节点的，而是通过虚拟的抽象数据层来直接更新页面。主要就是因为这一点，数据驱动框架才得以有较快的运行速度（因为不需要去折腾节点），并且可以应用到大型项目。

2.修饰符事件

Vue事件分为普通事件和修饰符事件，这里我们主要介绍修饰符事件。

Vue 提供了大量的修饰符封装了这些过滤和判断，让开发者少写代码，把时间都投入的业务、逻辑上，只需要通过一个修饰符去调用。我们先来思考这样问题：怎样给这个自定义组件 custom-component 绑定一个原生的 click 事件？

<custom-component @click.native="xxx">组件内容</custom-component>

这里的 @click 是自定义事件click，并不是原生事件 click。绑定原生的 click ，需要加上native修饰符。

实际开发过程中离不开事件修饰符，常见事件修饰符有以下这些：

• 表单修饰符

1. lazy（lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步）
   在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加lazy修饰符，从而转变为使用 change事件进行同步。适用于输入完所有内容后，光标离开才更新视图的场景。

2. trim（用来过滤前后的空格，中间的是不会过滤的）
   如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

3. number（当不加number修饰符输入123..数字的时候显示的类型为string， 而加了number修饰符就变成了number类型）
   如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符:

<input v-model.number="value" type="text" />

从上面例子，可以得到如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加.number

• 事件修饰符

.stop - 调用 event.stopPropagation()，禁止事件冒泡。

.prevent - 调用 event.preventDefault()，阻止事件默认行为。
（默认行为是单击超链接<a>会发生跳转）

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>