浅入深出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开发会变得更加有趣和多变。
