webveuje/vue/事件.md

vue 方法（事件处理）

事件监听

可以用v-on指令监听DOM事件，并在触发时运行一些javascript v-on 简写为@

事件处理方法

• 直接触发javascript代码(不推荐)

示例：

 <div id="app" >
        <button v-on:click="alert('hello!!!')">测试</button>
 </div>

• 在内联javascript 语句中调用方法（不推荐）

  <div id="example-3">
    <button v-on:click="say()">Say hi</button>
  </div>
  

  new Vue({
    el: '#example-3',
    methods: {
      say: function () {
        alert('hi')
      }
    }
  })
  

• 事件处理方法（推荐）

   <div id="app" >
          <button v-on:click="say">测试</button>
   </div>
  

  new Vue({
    el: '#example-3',
    methods: {
      say: function () {
        alert('hi')
      }
    }
  })
  

  methods中注册的是触发时执行的函数，也叫方法

事件修饰符

• .stop

  等同于JavaScript中的event.stopPropagation()，防止事件冒泡

• .once

  只会触发一次

使用：

<a v-on:click.stop="doThis"></a>

可以同时使用多个修饰符

<a v-on:click.stop.once="doThat"></a>

按键修饰符（自行拓展）

监听键盘事件：

@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)

获取按键的键码 e.keyCode
@keyup.delete    删除键

@keyup.enter 回车

@keyup.esc  ESC

@keyup.space 空格

@keyup.tab TAB

@keyup.left     左键

@keyup.right    右键

@keyup.up    上键

@keyup.down  下键