Vue快速入门(二：事件绑定与监听)《快乐Vue》

事件绑定与监听

当模板渲染完成之后，就可以进行事件的绑定与监听了。Vue.js 提供了 v-on 指令用来监听 DOM 事件，通常在模板内直接使用，而不像传统方式在 js 中获取 DOM 元素，然后绑定事件。例如：

Say

方法及内联语句处理器

通过 v-on 可以绑定实例选项属性 methods 中的方法作为事件的处理器，v-on: 后参数接受所有的原生事件名称。
示例：

    
    






    v-on：Say_1

    @：Say_2


    
    Say_3

修饰符

Vue.js 为指令 v-on 提供了多个修饰符，方便我们处理一些 DOM 事件的细节，并且修饰符可以串联使用。主要的修饰符如下
.stop: 等同于调用 event.stopPropagation()。
.prevent: 等同于调用 event.preventDefault()。
.capture: 使用 capture 模式添加事件监听器。
.self: 只当事件是从监听元素本身触发时才触发回调。
示例：

与传统事件绑定的区别

1、无需手动管理事件。ViewModal 被销毁时，所有的事件处理器都会自动被删除，让我们从获取 DOM 绑定事件然后在特定情况下再解绑这样的事情中解脱出来。
1、解耦。ViewModel 代码是纯粹的逻辑代码，和 DOM 无关，有利于我们写自动化测试用例