2.2　事件绑定指令

本节将介绍Vue.js的事件绑定指令，通过事件绑定指令可以实现页面的一系列操作。

1．v-on绑定事件与methods

使用v-on可以绑定一个事件，并且事件的名称需要在methods中定义，代码如下：

2．事件操作data数据

既然v-on绑定的事件可以执行，就可以修改data中的数据，从而实现对逻辑层的数据更新。

【示例2-1】一个元素的显示与隐藏由flag控制，而单击按钮可以切换flag的值，从而实现对元素的显示与隐藏控制。

代码如下：

可以看到操控data中的数据flag，其实就是操作this这个对象中的flag属性，写法为this.flag。

3．事件调用

当一个事件在执行的过程中需要调用其他已经封装好的事件时，可以使用this.函数名()的格式进行调用，代码如下：

4．v-on的简写

在前文叙述中，已经对v-on指令的主要使用方式进行了讲解，而在实际的开发过程中，往往使用的都是v-on的简写形式@，代码如下：

<button v-on:click="changeFlag">切换flag</button>
<!--  v-on可以简写为@ -->
<button @click="changeFlag">切换flag</button>

本节主要讲解了事件绑定指令v-on的用法、如何修改data中的数据、如何调用其他事件，以及v-on的简写。