Vue事件处理

谁践踏了优雅 2021-10-20 00:46 327阅读 0赞

### Vue事件处理 ###

*  监听事件
 *  事件处理方法
 *  内联处理器中的方法
 *  事件修饰符
 *  按键修饰符

# 监听事件 #

可以使用`v-on`监听DOM事件，并在触发时执行一些Javascript代码。  
`v-on`可简写为`@`

<div id="example">
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {
       { counter }} times.</p>
    </div>

var example = new Vue({ 
      el: '#example',
      data: { 
        counter: 0
      }
    })

# 事件处理方法 #

然而许多事件处理逻辑会更为复杂，所以直接把 Javascript 代码写在 `v-on` 指令中是不可行的。因此 `v-on` 还可以接收一个需要调用的方法名称。

<div id="example">
      
      <button v-on:click="greet">Greet</button>
    </div>

var example = new Vue({ 
      el: '#example',
      data: { 
        name: 'Vue.js'
      },
      // 在 methods 对象中定义方法
      methods: { 
        greet: function (event) { 
          // this 在方法里指向当前 Vue 实例
          alert('Hello ' + this.name + '!')
          // event 是原生 DOM 事件
          if (event) { 
            alert(event.target.tagName)
          }
        }
      }
    })
    
    // 也可以用 JavaScript 直接调用方法
    example.greet() // => 'Hello Vue.js!'

# 内联处理器中的方法 #

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

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

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 `$event` 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
      Submit
    </button>

// ...
    methods: { 
      warn: function (message, event) { 
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
      }
    }

# 事件修饰符 #

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 `v-on` 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

*  .stop
 *  .prevent
 *  .capture
 *  .self
 *  .once
 *  .passive

<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>
    
    
    
    <div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 `v-on:click.prevent.self` 会阻止所有的点击，而 `v-on:click.self.prevent` 只会阻止对元素自身的点击。

**2.1.4 新增**

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

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。

**2.3.0 新增**

Vue 还对应 `addEventListener` 中的 `passive` 选项提供了 `.passive` 修饰符。

<div v-on:scroll.passive="onScroll">...</div>

这个 `.passive` 修饰符尤其能够提升移动端的性能。

不要把 `.passive` 和 `.prevent` 一起使用，因为 `.prevent` 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，`.passive` 会告诉浏览器你不想阻止事件的默认行为。

# 按键修饰符 #

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">

你可以直接将 `KeyboardEvent.key` 暴露的任意有效按键名转换为 `kebab-case` 来作为修饰符。

在在上述示例中，处理函数只会在 `$event.key` 等于 `PageDown` 时被调用