Vue.js学习笔记：v-no绑定事件

v-on 指令用于监听DOM事件 形式如：v-on:click  缩写为 @click

（一）.监听DOM事件

以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码

    
    
   



	增加 1
	
这个按钮被点击了 {{ counter }} 次。


 

(二).方法处理器

直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。,绑定一个单机事件的处理方法showMsg到methods中

    
    
   



    {{msg}}


 

（三）.内联处理器方法

除了直接绑定到一个方法里面，也可以用内联Javascript语句

    
    



	
	hello ,欢迎你学习vue.js 


 

有时也需要在内联语句处理器中访问原生DOM事件，比如阻止链接跳转。可以用特殊变量$event把它传入方法

    
    



    打开Vue官网


 

点击a链接以后，页面还能跳转到vue官网吗？

(四).事件修饰符

在事件处理器中经常需要调用event.preventDefault()或event.stopPropagation()。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

...

...

（五）.键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：

在此之前先了解keycode的相关知识

   最体可以看官网：https://cn.vuejs.org/v2/guide/events.html#事件修饰符

（六）为什么在HTML中监听事件？

（1）、扫一眼HTML模板便能轻松定位在Javascript代码里对应的方法。

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

（3）、当一个ViewModel被销毁时，所有的事件处理器都会被自动删除，你无需担心如何自己清楚它们