浅入深出Vue：事件处理

上一篇的最后留下了一个 v-on的思考，也就是本章的主题：事件处理

为何须要事件处理

在前端开发中，常常要面对各类表单、按钮。而这里面就住着一个事件：点击 (click)。

前端童鞋们确定不陌生它，由于常常会出现。好比说：

• 表单提交

• 各式各样的按钮

• 列表多级菜单折叠

v-on支持监听原生的 DOM事件，也就是 vue中也支持之前纯js写法中各式各样的时间，只是在 vue中换了一种写法。

使用事件处理的好处便在于咱们能够经过事件来控制数据。

MVVM中强调的一点即是数据驱动，那么在 vue中若是利用数据去驱动视图呢，上一篇讲了双向绑定。绑定上去了，若是没办法对数据进行操做，那就变成了单向渲染了。对于这个问题，解决的方案即是：事件处理，利用事件去控制数据变化，再由数据的变化驱动着视图。

事件处理是什么

这一个问题在上面已经给出答案了：

• 从字面上理解，它就是DOM事件，只不过在 vue中使用方式不一样。

• 深层次理解，它是控制数据变化的控制器，是链接视图与数据的桥梁。

如何使用

经过按钮标签来看一下事件处理的写法：

<button v-on:须要响应的事件名="处理事件的函数名"></button>

这里须要注意一点：

• 处理事件的函数名必须写在 methods中，要让当前组件实例可访问。

仍是继续昨天的例子，这里让咱们解决最后一个问题：

• 利用按钮的点击事件来改变 isDark的值。

首先页面上加上按钮：

<template>
  <div>
    <h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>
    <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>
    <br/><button v-on:click="change">改变背景</button>
  </div>
</template>

这里咱们指定响应 click事件的函数名是 change，接着咱们去定义咱们的函数：

methods: {
    change: function() {
      this.isDark = !this.isDark
    }
  }

代码很简洁，由于这是个布尔值，咱们直接取反就行了。

来看看效果：

如今是白色的，让咱们点一下看看：

点完以后变黑了，再点击一次又变回白色了~ 很完美的达到了咱们的要求。

还能够经过其余的事件来完成一些特效，好比：

• 输入框在失去焦距时的自动验证

• 鼠标移动到元素上时弹出提示文字

等等。

事件修饰符

若是咱们只想让这个按钮生效一次怎么办？

点了一次以后，就再也不让它继续变了。

vue在这方便提供了事件修饰符，目的就是为了不开发者们手动去处理原生事件的一些逻辑。

语法以下：

<button v-on:事件名.事件修饰符="处理函数"></button>

全部的修饰符在下表列出：

• .stop

• .prevent

• .capture

• .self

• .once

• .passive

修饰符能够同时使用多个：

<button v-on:事件名.事件修饰符1.事件修饰符2.事件修饰符3="处理函数"></button>

上述修饰符待后面咱们具体用到时再细细讲解，其中的一些修饰符拿出来甚至足够一篇长博文的内容了。

这里咱们使用到的修饰符是：

.once

代码：

<template>
  <div>
    <h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>
    <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>

    <!-- 在click后面添加 once 修饰符 -->
    <br/><button v-on:click.once="change">改变背景</button>
  </div>
</template>

先看看点击前的效果：

如今是黑色的，点击以后：

毫无疑问这里确定是白色的，重点是接下来的一次点击！：

没有变化，依旧是白色，再点一次，仍是白色。.once修饰符很好的解决了咱们的需求。

写在文末

至此，对于 vue中的一些基础语法，事件咱们已经有了初步的了解和使用了。

接下来将要一块儿学习路由与组件这两大Boss了，有了它们，vue开发会变得更加有趣和多变。