vue事件处理

事件处理

监听事件

• 监听事件就是直接把事件代码写在v-on:里

  add 1
  

事件处理方法

• 就是把事件放入的methods: {}中调用

内联处理剂中的方法

• 就是传了参数的method: {}

  Say hi
  

事件修饰符

修饰符	说明
.stop	阻止单机事件继续传播（事件冒泡）
.prevent	提交事件不再重载页面
.capture	捕获事件（由内到外）
.self	只在自身出发时执行事件，不接受冒泡
.once	点击事件只触发一次
.passive	滚动事件的默认行为，比onScroll先执行

- 注意可以多个一起使用，但是不同的顺序的结果不一样，比如;用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

    
    

    
    


    
    

    
    


    
    
    
...

    
    
    
...

    //2.1.4版本新增
    
    

    //2.3.0版本新增
    
    
    
    
...

按键修饰符

• 可以使用的keyCode或者别名

  //如：keyCode
  
  //别名
  
  

  常用别名有：enter,tab,delete,esc,space,up,down,left,riught

自动匹配按键修饰符（2.5版本新增）

• 以KeyboardEvent.key的形式，kebab-case,就是把键名变成kebab-case这种形式去作为修饰符

  //pagedown,只在点击pagedown的时候去使用       
  
  

系统修饰符（2.1.0新增）

• 就是组合键，比如ctrl+enter,alt+13等等，支持这种性质的系统修饰符有ctrl,alt.shift.meta，必须组合才能生效

  
  
  
  
  Do something
  

.exact 修饰符

• .exact修饰符精确控制组合出发的事件

  
  A
  
  
  A
  
  
  A
  

鼠标修饰符

• 特定的 .left(左键) .right（右键） .middle（中键）

参考：https://cn.vuejs.org/v2/guide/events.html