山地人

事件处理

山地人
山地人
2021-05-13

前面,我们创建了一个启动就立即运行的计时器。现在我们对这个定时器做一下升级,让它支持自定义启动。

结构分析

  • template 这次在模板中增加了一个启动按钮button,用它来控制计时器的启动。
  • v-on:click 这是vue提供的一条用来绑定点击事件的指令
  • startTimer 是点击事件触发后的处理函数,这个函数的定义必须要放置在methods对象中,否则Vue无法找到。

流程分析

  1. Vue在渲染阶段,会把v-on:click指令进行解析,然后在按钮上绑定click对应的处理函数startTimer
  2. 用户点击启动,按钮对应的startTimer就会被调用起来。接着计时器开始运行。

原生JavaScript写法

下面的写法,我们不借助任何JavaScript框架,使用原生JavaScript来实现类似的功能。

随着功能的复杂度提升,原生JavaScript编写应用,代码量也逐渐变多。

练一练

修改上面的例子,再增加一个停止计数器。

在第8行后面,添加下面的代码。

<button v-on:click="stopTimer">结束</button>