一起来学Vue.js【8】

事件绑定

之前有提到过v-on指令，相当于点击事件。在此通过v-on来实现按钮的点击。在v-on的click里绑定了一个num变量，用来表示按钮单击次数，同时在data里加入num变量。

打开浏览器，初始值为0,随便点击按钮几下，次数不断增加。

在开发过程中需要编写复杂代码来响应按钮单击事件，可以通过Vue对象的methods属性来为按钮单击事件声明一个函数。


在浏览器页面上点击按钮，就会触发按钮单击事件绑定的clkOn函数。

此外还可以调用data里的数据。

程序运行后，单击按钮，会先提示"hello vue"，后提示this.name的内容。注意想要调用data里的数据，必须加上this，this代表定义的Vue对象，通过this找到name。否则无法知道name究竟是哪里的数据。


函数分为有参函数和无参函数。在clkOn里传入一个实参，在构造函数时添加一个形参，用alert来显示传入的实参。

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。


单击按钮以后，在浏览器控制台就可以看到e对象的详细信息。
v-on为html元素拥有的所有事件，每一个元素都有其对应的事件，只需通过v-on进行绑定即可。如按钮双击事件。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前使用过的" .stop"就是其中之一，修饰符是由点开头的指令后缀来表示的。
（1） .stop

（2）.prevent


（3）.capture

（4）.self

（5）.once
.once 修饰符不像其它只能对原生的 DOM 事件起作用的修饰符，还能被用到自定义的组件事件上。

（6）.passive
.passive修饰符能够提升移动端的性能。

详细信息可以参考官方的文档：

https://cn.vuejs.org/v2/guide/events.html