Vue教程07：事件修飾符

閱讀更多系列文章請訪問個人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>
複製代碼