详解Vue(11)——事件处理(以简易计数器为例)

一、监听事件

以简易计数器为例

  

    -
    
{{count}}
    
    +
  

  

结果

二、事件修饰符

• .stop:阻止单击事件继续传播
  
• .prevent:提交事件不再重载页面
  
  
  
  
• .capture:内部元素触发的事件先在此处理，然后才交由内部元素进行处理
  
  ...
• .self:只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
  
  ...
• .once:点击事件将只会触发一次
  
• .passive:滚动事件的默认行为 (即滚动行为) 将会立即触发
  
  ...

  

    

      A
      

        B
        

          C
        
      
    
    go to baidu
    
  
  

• 1.当给ABC添加点击时，会触发冒泡

  
  
  仅有点击事件

• 2.当给C添加stop时，就会阻止冒泡行为
  

  C
  
  
  结果

• 3.go to baidu
  

  结果

• 4.@click.capture="clickA"
  

  结果

• 5.

  A

  B

  C

结果

三、其余修饰符

按键修饰符

结果

系统修饰键

四、监听事件的好处

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

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

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