vue-6-事件处理

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

var example2 = new Vue({
  el: ‘#example-2‘,
  data: {
    name: ‘Vue.js‘
  },
  methods: {
    greet: function (event) {
      alert(‘Hello ‘ + this.name + ‘!‘)
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

在内联语句处理器中访问原生 DOM 事件

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

methods: {
  warn: function (message, event) {
    if (event) event.preventDefault()
    alert(message)
  }
}

事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

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

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- 只调用一次，.once 修饰符还能被用到自定义的组件事件上 -->
<div v-on:click.once="doThat">...</div>

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

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

键值修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

按键别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

常用按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

可以通过全局 config.keyCodes 对象自定义键值修饰符别名：
Vue.config.keyCodes.f1 = 112

修饰键

附加按键：
.ctrl
.alt
.shift
.meta

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

鼠标按钮修饰键：

.left
.right
.middle

在html中监听事件优点：解耦，无须清理