Vue教程07：事件修饰符

[chencl1986]

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

事件修饰符

代码示例：/lesson07/01. 事件修饰符.html

通过事件修饰符可以实现为事件添加event.preventDefault()、event.stopPropagation()等操作。
事件修饰符介绍如下：

事件修饰符	作用
.stop	阻止冒泡
.prevent	阻止默认事件
.capture	使用事件捕获
.self	只监听直接触发该元素的事件
.once	事件只触发一次
.passive	该修饰符会忽略event.preventDefault()
.native	监听组件内部根元素的原生事件，而不是自定义事件
.left	鼠标左键点击事件
.right	鼠标右键点击事件
.middle	鼠标中键点击事件
.{keyCode	keyAlias}

普通修饰符的例子：
JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {},
  methods: {
    fn1() {
      alert('fn1')
    },
    fn2() {
      alert('fn2')
    },
    submit() {
      alert('submit')
    },
  }
})

HTML：

<div id="app">
  <div v-on:click="fn1()">
    <form action="" v-on:submit.prevent="submit()">
      <input type="submit" value="按钮" v-on:click.prevent.stop.once="fn2()">
    </form>
  </div>

按键修饰符

代码示例：/lesson07/02. 按键修饰符.html

JavaScript：

let vm = new Vue({
  el: '#app',
  data: {},
  methods: {
    fn1() {
      alert('回车')
    },
    fn2() {
      alert('ctrl+回车')
    },
  }
})

<div>
  <!-- 按下回车键时弹窗，也可以写成v-on:keydown.13 -->
  <input type="text" v-on:keydown.enter="fn1()">
  <!-- 按键修饰符也支持组合 -->
  <input type="text" v-on:keydown.ctrl.enter="fn2()">
</div>