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  下键
```