在 Vue 组件的元素上你可以绑定一些事件，然后指定发生这些事件的时候要去做什么。在这个 App 组件的模板里面，先添加一个按钮元素，一组 button，按钮文字是 重置。

想在这个按钮元素上绑定一个点击事件，可以这样，用 v-on ，然后冒号，再加上要绑定的事件的名字，比如 click，在双引号里面设置一下发生这个事件的时候要做什么，也就是设置一下这个事件的处理器。比如设置成 resetName。

下面我们要在组件里定义这个 resetName 方法，在组件的 methods 里面，定义一个 resetName，这个方法要做的事情就是把 name 这个数据的值设置成 NINGHAO。

在浏览器上预览一下，点击 重置 按钮，触发了点击事件，因为在组件的这个元素上我们绑定了点击事件，事件处理器设置成了 resetName，所以在这个按钮上发生点击事件的时候，就会执行组件里的 resetName 这个方法，这个方法做的事情就是把 name 这个数据的值设置成 NINGHAO。

绑定事件还有一种简单的写法，在 App 组件的模板里面，再添加一组 button，按钮文字是 更新，在这个按钮上绑定一个 click 事件，一个 @ 符号，再加上事件的名字，这就是绑定事件的简单的写法，效果跟上面用 v-on 冒号，再加上事件的名字是一样的。 发生点击事件，执行 setName ，这个是之前我们在组件里定义过的一个方法。

回到浏览器再预览一下，界面上会显示两个按钮，这里我们可以在这两个按钮周围添加点边距，回到组件，在组件里添加一组 style， 组件里用的样式可以放在这组 style 里面，设置一下 button 元素的样式，用 margin 添加 4 个像素的边距。

再回到浏览器。

先点一下 重置 按钮， 发生点击事件以后，它会把 name 的值设置成 NINGHAO ，再点一下 更新 按钮，3 秒钟以后，会把 name 数据的值设置成 宁皓网。