Vue.js Method

Method

Vue.js 的事件监听一般都通过 v-on 指令配置在HTML中，虽然也可以在Javascript 代码中使用原生 addEventListener 方法添加事件监听，但Vue.js 本身并不提倡如此。

看上去这种方式不符合传统的“关注点分离”的理念，但其实所有的Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上。实际上，采用它提供的 v-on 指令有以下几点好处：

（1）、通过查看HTML 模板便能轻松定位 Javascript 代码中对应的方法

（2）、无须在Javascript 中手动绑定事件，ViewModel 和 Dom 完全解耦，更易于测试

（3）、当一个 ViewModel 被销毁时，所有的事件处理器都会被自动删除

如何绑定事件

在原生DOM 事件中，我们可以通过 Javascript 给 HTML 文档元素注册不同的事件处理程序。代码如下：

submit

AngularJS 也采取了类似的方式，只不过换成了ng-前缀的事件指令：

submit

Vue.js 也采取了这样的方式来绑定事件

1、内联方式

Vue.js 在HTML 文档元素中采用 v-on 指令来监听DOM事件

    Say Hi    Say What

2、methods 配置

上例中，当用户将click 事件与某个方法绑定时，需要在Vue 实例中进行定义，所有定义的方法都放在methods 属性下

    Greet    Say Hi

需要注意的地方如下：

（1）、methods中定义的方法中的this 始终指向创建的 Vue实例

（2）、与事件绑定的方法支持参数 event 即原生 DOM 事件的传入

（3）、方法用在普通元素上时，只能监听原生 DOM事件；用在自定义元素组件上时，也可以监听子组件触发的自定义事件

3、 应用

前面的例子中，在Vue 实例中创建的方法需要访问原生DOM事件时可以直接传入 event 来获得。如果在内联语句处理器中需要访问原生DOM事件时，则可以用一个特殊变量 $event 将其传入方法中。

    Vue官网

这样，就阻止了点击a 链接以后，跳转到Vue页面

4、如何使用修饰符

修饰符（modifiers）是以半角句号（.）开始的特殊后缀，用于表示指令应当以特殊方式绑定。在事件处理器上，Vue.js 为 v-on 提供了4个事件修饰符，即 .prevent, .stop, .capture, .self，使Javascript代码负责处理纯粹的数据逻辑，而不用处理这些DOM事件的细节。

在使用方式上，事件修饰符可以串联，代码示例如下：

也可以只使用修饰符，不绑定事件：

4-1、prevent

在事件处理器中，经常需要调用 event.preventDefault() 来阻止事件的默认行为，Vue.js 提供了 .prevent 事件修饰符以使之在HTML中便能完成操作

4-2、stop

event.stopPropagation() 用于阻止事件冒泡，Vue.js 也提供了相应的.stop事件修饰符

4-3、capture

.capture事件修饰符是 Vue.js 1.0.16 版本中新增的，表示事件侦听器时采用 capture 即捕获模式

4-4、self

.self 事件修饰符同样是 Vue.js 1.0.16 版本中新增的，表示只当事件在该元素本身（而不是子元素）触发时触发回调

5、按键

监听键盘事件经常需要检测 keyCode。Vue.js 可以为 v-on 添加键盘修饰符

更多关于keyCode的介绍，可参考博文 http://dapengtalk.blog.51cto.com/11549574/1860203