vue事件处理

事件处理

监听事件

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

  <button v-on:click="count += 1">add 1</button>
  

事件处理方法

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

内联处理剂中的方法

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

  <button :on:click=say('hi')">Say hi</button>
  

事件修饰符

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

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

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>

    //2.1.4版本新增
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>

    //2.3.0版本新增
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>

按键修饰符

• 可以使用的keyCode或者别名

  //如：keyCode
  <input @keyup:13="submit"/>
  //别名
  <input @keyup:enter="submit"/>
  

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

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

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

  //pagedown,只在点击pagedown的时候去使用       
  <input @keyup.page-down="onPageDown" />
  

系统修饰符（2.1.0新增）

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

  <!-- Alt + C -->
  <input @keyup.alt.67="clear">
  
  <!-- Ctrl + Click -->
  <div @click.ctrl="doSomething">Do something</div>
  

.exact 修饰符

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

  <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  <button @click.ctrl="onClick">A</button>
  
  <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  <button @click.ctrl.exact="onCtrlClick">A</button>
  
  <!-- 没有任何系统修饰符被按下的时候才触发 -->
  <button @click.exact="onClick">A</button>
  

鼠标修饰符

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

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