Vue学习笔记之事件处理

上一篇：Vue学习笔记之列表渲染

事件监听

可以用v-on指令监听DOM事件，但是大部分事件都比较复杂，因此，v-on 还可以接收一个需要调用的方法名称。

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

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

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

$event代表DOM的原始事件。

事件修饰符

修饰符是由点开头的指令后缀来表示的。

• 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>

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

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
不要把.passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

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

全部的按键别名：

• enter
• tab
• delete (捕获“删除”和“退格”键)
• esc
• space
• up
• down
• left
• right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

鼠标按钮修饰符

• left
• right
• middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。