事件处理

大概这是个坑吧......

绑定语法。

    
    

        Add 1
        
The button above has been clicked {{ counter }} times.
    

    

这里复习一下v-on的缩写，相信我，写的多了，你就会觉得少打两个字母是幸福。
结果自然是这样的。

点击的次数被忠实的记录下来，除非你刷新

当然，如果这里我要把点击次数上传或者做一些其他的修改，耦合程度就有点不太让人能接受了，于是可以这么写嘛。

    
    

        Greet
    

    

当然，在事件中，任何function里的this指针都指向本Vue实例。
结果如下。

点击后触发

在前面，我们已经无数次应用过这些了（所以文档是用来查的）
哦，漏了个小兄弟

在这里

代码的意思是，如果event是原生事件对象，就alert输出触发它的元素名称。
所以也间接求证了，Vue绑定的尽量是原生事件对象。

在v-on:绑定中调用事件也是可以的。

    
    

        Say hi
        Say what
    

    

根据传入的参数，会alert不同的内容。

hi

what

这种方法类似于在dom的onxx事件中书写JavaScript代码和调用函数，仁者见仁吧。

联系例子二和刚才的例子，如果我们要在内联语句处理器中访问原生的dom事件对象，怎么做呢？
Vue提供了封装的对象。

    
    

        
            Submit
        
    

    

可以在内联语句处理中，传入$event对象。

提交结果

为什么表单无法提交呢？因为我们调用了阻止对象默认事件的方法(event.preventDefault())，该方法最常用的场景就是用来阻止标签的href跳转和

标签的submit提交。当然，它也是原生dom中的API。
还有一个和它使用频率相同的API，即阻止事件冒泡（event.stopPropagantion()）的API，事件冒泡，是当该元素接收到事件之后，会向上传导，直到传导到最高级的父元素（标记）为止。俗称的“牵一发而动全身”，就是这个道理。举个例子，假如说，你在页面中的标记上，写了一个click事件，那么无论底下哪个元素被点击了，都会触发标记的click
事件。。。。。。
这么一想的话，这两个还挺重要的，不过老这么写，也挺难过。。。

事件修饰符

常见的六个

• .stop 阻止事件冒泡 stopPropagation()
• .prevent 阻止元素默认行为 preventDefault()
• .capture 即内部元素的事件先在此处理，然后再交给内部元素处理（逆stopPropagation()）
• .self 只处理自身触发的事件
• .once v2.1.4新增 事件只触发一次
• .passive v2.3.0新增 对应addEventListener()中的 passive 选项

...



...








...

几点提示：

• 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

• .once除了可以对原生的DOM事件修饰之外，还可以用于自定义的组件事件中。其他的修饰符不能做到这一点。

• .passive修饰符应用得当对移动端性能提升比较明显

• 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

可以将对应的事件与按键相关联。

也可以直接将KeyboardEvent.key暴露的任意有效按键名按照kebab-case的写法来作为修饰符。

实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。