Vue中事件处理原理的示例分析

这篇文章主要为大家展示了“Vue中事件处理原理的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue中事件处理原理的示例分析”这篇文章吧。

创新互联主营新田网站建设的网络公司,主营网站建设方案,手机APP定制开发,新田h5小程序制作搭建,新田网站营销推广欢迎新田等地区企业咨询

Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念。实际上，所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致维护上的困难，使用v-on有以下好处：

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

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

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

事件处理步骤

1. 绑定监视

2. 事件修饰符

3. 按键修饰符

代码如下

  
  





  
绑定监听
  test1
  test2
  test3 
  test4

  
事件修饰符
  
  
阻止事件冒泡